/* ============================================================
   Mixto Math — Color tokens
   A deliberately modern, digital-first palette — NOT the
   primary-crayon classroom look. Deep navy base (trust/"smart"),
   bright teal energy, electric orange action, lime accent, and a
   single reserved mastery-green so "mastered = green" stays sacred.
   ============================================================ */

:root {
  /* ---- Brand base: Deep Navy (trust / "smart" / game canvas) ---- */
  --navy-950: #080C24;
  --navy-900: #0B1030; /* app/game background */
  --navy-800: #131A45; /* raised surface */
  --navy-700: #1C2557; /* card on navy */
  --navy-600: #28326E; /* hairline / border on navy */
  --navy-500: #3A458A; /* muted line / disabled on navy */
  --navy-400: #5560A6; /* secondary text on navy */
  --navy-300: #8C95C4; /* tertiary text on navy */

  /* ---- Bright Teal: primary energy ---- */
  --teal-700: #0A8E9B;
  --teal-600: #0FB0BE;
  --teal-500: #18C9D6; /* PRIMARY */
  --teal-400: #4ADAE5;
  --teal-300: #84E8EF;
  --teal-200: #BCF3F7;
  --teal-100: #E3FAFC;

  /* ---- Electric Orange: action, CTAs, celebration ---- */
  --orange-700: #D9510F;
  --orange-600: #F4621A;
  --orange-500: #FF7A2D; /* PRIMARY CTA */
  --orange-400: #FF985A;
  --orange-300: #FFB888;
  --orange-200: #FFD7BC;
  --orange-100: #FFEDE0;

  /* ---- Lime: accent (energy spark, NOT mastery) ---- */
  --lime-600: #9FCE0F;
  --lime-500: #BFEF3C; /* ACCENT */
  --lime-400: #D2F56A;
  --lime-300: #E4FA9E;
  --lime-100: #F6FDD9;

  /* ---- Mastery Green: RESERVED for the "mastered" map state ----
     Kept emerald-distinct from lime so green = "I know this cold"
     never collides with the lime accent. Do not reuse for accents. */
  --mastery-700: #149E54;
  --mastery-600: #1BB863;
  --mastery-500: #28D072; /* the one true "mastered" */
  --mastery-400: #5BDF95;
  --mastery-200: #B6F0CF;

  /* ---- Amber: the "in-progress" map state (seen, not fluent) ---- */
  --amber-600: #F0A81C;
  --amber-500: #FFC23D; /* in-progress */
  --amber-300: #FFDD8A;
  --amber-100: #FFF2CF;

  /* ---- Unseen: the quiet "not yet seen" map state ---- */
  --unseen-on-navy: #424C82; /* node on the navy constellation */
  --unseen-neutral: #C8CCDE; /* on light surfaces */

  /* ---- Snow: the soft off-white app canvas — a BRAND CORE color ----
     Snow is the surface the whole product sits on (game + dashboards). */
  --snow: #F4F6FC;

  /* ---- Warm neutrals: surfaces & ink (data-forward but warm) ---- */
  --paper: #FFFFFF;
  --paper-soft: var(--snow); /* app canvas = Snow */
  --paper-sunk: #ECEEF6; /* inset wells, track backgrounds */
  --ink-900: #141B45; /* primary text on light (navy ink) */
  --ink-700: #3B4374;
  --ink-500: #6B73A0;
  --ink-400: #969DC2;
  --ink-300: #BFC4DD;
  --hairline: #E4E7F2; /* borders on light */

  /* ---- Semantic feedback (used sparingly) ---- */
  --success: var(--mastery-500);
  --warning: var(--amber-500);
  --danger: #F5455C; /* form errors only — never for a wrong fact */
  --danger-soft: #FFE2E6;
  --info: var(--teal-500);

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components.
     ============================================================ */

  /* App canvas — LIGHT everywhere (game + dashboards). Warm paper, not navy. */
  --bg-app: var(--paper-soft);
  --bg-raised: var(--paper);

  /* Navy as an ACCENT surface (device bezel, logo-on-dark cards) — used sparingly */
  --surface-card: var(--navy-700);
  --surface-card-hover: #222C63;
  --border-subtle: var(--navy-600);
  --border-strong: var(--navy-500);
  --text-on-navy: #FFFFFF;
  --text-on-navy-soft: var(--navy-300);
  --text-on-navy-mute: var(--navy-400);

  /* Dashboard / light context */
  --bg-canvas: var(--paper-soft);
  --surface-panel: var(--paper);
  --surface-well: var(--paper-sunk);
  --text-body: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --border-card: var(--hairline);

  /* Actions */
  --action-primary: var(--orange-500);
  --action-primary-press: var(--orange-700);
  --action-primary-edge: var(--orange-700); /* chunky bottom edge */
  --action-secondary: var(--teal-500);
  --action-secondary-press: var(--teal-700);
  --action-secondary-edge: var(--teal-700);
  --focus-ring: var(--teal-400);

  /* Mastery state scale (the sacred map colors) */
  --state-unseen: var(--unseen-on-navy);
  --state-progress: var(--amber-500);
  --state-mastered: var(--mastery-500);
}