/*
 * WestAcademy — Education Hub CSS tokens + tier-cascade rules
 * Phase 1, 2026-06-02. See docs/WESTACADEMY-BRAND.md + docs/EDU-UX-TIER-SYSTEM.md.
 *
 * Token contract: every Edu component sizes against --edu-* multipliers, never hardcodes pixels.
 * Body class .edu-tier-junior / .edu-tier-senior / .edu-tier-parent / .edu-tier-employee flips
 * the token values; the same DOM renders correctly per tier.
 *
 * Brand color palette: navy primary, cream canvas, warm gold for mastery/honors,
 * pink demoted to tertiary highlight (was Keterwest primary in v1).
 */

:root {
  /* WestAcademy palette */
  --wa-navy: #1a3a52;          /* Primary CTA + text + headings (scholarly) */
  --wa-deep-navy: #0d2333;     /* Headings on light cards (higher contrast) */
  --wa-cream: #f5f3f0;         /* Canvas / page background (warmer than white) */
  --wa-card: #ffffff;          /* Pure white card on cream */
  --wa-warm-gold: #d4a537;     /* Mastery / honors / certificate ink + crown accent */
  --wa-slate: #6B9BAA;         /* Muted secondary text */
  --wa-sky: #5BB8E8;           /* Junior-tier subject coin backs */
  --wa-sunshine: #FBBF24;      /* Junior tertiary, positive feedback */
  --wa-accent-pink: #ec4899;   /* DEMOTED to tertiary (was v1 primary CTA) */
  --wa-friendly-orange: #F97316; /* Kid-tier "not yet" feedback — NEVER red */

  /* Tier tokens — default = parent/admin (no tier class on body) */
  --edu-touch-scale: 1.0;
  --edu-font-scale: 1.0;
  --edu-mascot-display: none;
  --edu-tts-default: 0;
  --edu-card-padding-scale: 1.0;
  --edu-card-radius: 14px;
  --edu-card-shadow: 0 1px 6px rgba(0,0,0,.08);
  --edu-mascot-corner-display: none;
}

/* Junior tier — ages 5-7 (Matthew, Lily by default). Big tap targets, mascot Newton on, TTS on. */
body.edu-tier-junior {
  --edu-touch-scale: 2.5;
  --edu-font-scale: 1.75;
  --edu-mascot-display: block;
  --edu-tts-default: 1;
  --edu-card-padding-scale: 1.5;
  --edu-mascot-corner-display: block;
}

/* Senior tier — ages 8+ (PJ, Ana by default). WelliQ-looking, slightly bigger tap targets,
   TTS off by default. */
body.edu-tier-senior {
  --edu-touch-scale: 1.1;
  --edu-font-scale: 1.0;
  --edu-mascot-display: none;
  --edu-tts-default: 0;
  --edu-card-padding-scale: 1.0;
}

/* Parent tier — adults. Pure WelliQ aesthetic, normal-size buttons, no mascot. */
body.edu-tier-parent {
  --edu-touch-scale: 1.0;
  --edu-font-scale: 1.0;
  --edu-mascot-display: none;
  --edu-tts-default: 0;
  --edu-card-padding-scale: 1.0;
}

/* Employee tier — Hailey / future West Networks hires. Same as parent but voice tokens swap
   in copy + brand cascades to WestHub teal (handled by edu-voice.js token map). */
body.edu-tier-employee {
  --edu-touch-scale: 1.0;
  --edu-font-scale: 1.0;
  --edu-mascot-display: none;
  --edu-tts-default: 0;
  --edu-card-padding-scale: 1.0;
}

/* ── Reusable component primitives ────────────────────────────────────── */

.edu-card {
  background: var(--wa-card);
  border-radius: var(--edu-card-radius);
  box-shadow: var(--edu-card-shadow);
  padding: calc(16px * var(--edu-card-padding-scale));
}

.edu-tap-target {
  min-width: calc(44px * var(--edu-touch-scale));
  min-height: calc(44px * var(--edu-touch-scale));
}

.edu-body-text { font-size: calc(14px * var(--edu-font-scale)); }
.edu-h1 { font-size: calc(24px * var(--edu-font-scale)); }
.edu-h2 { font-size: calc(20px * var(--edu-font-scale)); }
.edu-h3 { font-size: calc(16px * var(--edu-font-scale)); }

.edu-mascot { display: var(--edu-mascot-display); }
.edu-mascot-corner { display: var(--edu-mascot-corner-display); }

/* Buttons */
.edu-btn-primary {
  background: var(--wa-navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: calc(10px * var(--edu-touch-scale)) calc(20px * var(--edu-touch-scale));
  font-size: calc(14px * var(--edu-font-scale));
  cursor: pointer;
}
.edu-btn-primary:hover { background: var(--wa-deep-navy); }

/* Wrong-answer feedback — friendly orange, never red */
.edu-not-yet {
  background: rgba(249,115,22,.12);
  color: var(--wa-friendly-orange);
  border: 1px solid rgba(249,115,22,.4);
  border-radius: 8px;
  padding: 8px 12px;
}

/* Subject coins (Junior tier scrolling strip) */
.edu-subject-coin {
  width: calc(48px * var(--edu-touch-scale));
  height: calc(48px * var(--edu-touch-scale));
  border-radius: 50%;
  background: var(--wa-sky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hub-page canvas */
.wa-canvas {
  background: var(--wa-cream);
  min-height: 100vh;
}

/* Mastery / honors callouts use crown gold */
.edu-mastery {
  color: var(--wa-warm-gold);
  font-weight: 600;
}