/* shared/tokens.css — THE design system. One file, every surface.
 *
 * Why this exists: on 27.7.2026 our four surfaces (customer dashboard, teacher /edu page,
 * onboarding, portal login) each defined their own values. Four different backgrounds
 * (#f4f4f5 / #fafafa / #f8fafc / #09090b) and FIVE accents — including a stray purple
 * #6d28d9 and blue #1d4ed8 next to the emerald. The same concept was --surface here and
 * --card there, so a component could not be copied between screens without a rewrite.
 *
 * The values below are promoted from the onboarding page, which already had the most
 * complete and best-reasoned set. Nothing was invented for its own sake.
 *
 * TWO THEMES, ONE VOCABULARY:
 *   :root                    → 'product'. Light, quiet, built for daily dense work
 *                              (a 35x8 mastery grid is read for minutes at a time).
 *   [data-theme="brand"]     → dark editorial, for marketing/landing surfaces.
 * A component written against these names works in BOTH without changes — that is the
 * whole point of naming the decision instead of the colour.
 *
 * RULES
 *  1. No raw hex in any component file. If a value is missing, add it HERE.
 *  2. Emerald is STATE, never decoration.
 *  3. Shadow means true elevation (overlay/bar) — never a decorative glow.
 */

:root {
  /* ── surfaces (cool zinc ramp) ─────────────────────────────────────────── */
  --bg: #fafafa;              /* page */
  --surface: #ffffff;         /* card / panel */
  --surface-2: #f4f4f5;       /* hover / inset */
  --line: #e4e4e7;            /* 1px default border */
  --line-2: #d4d4d8;          /* hover / focus-within border */

  /* ── ink ───────────────────────────────────────────────────────────────── */
  --ink: #18181b;             /* headings, primary */
  --ink-2: #3f3f46;           /* body */
  --ink-3: #52525b;           /* secondary */
  --ink-4: #71717a;           /* meta / tertiary — still AA on --bg */

  /* ── accent: emerald, state and action only ────────────────────────────── */
  --accent: #047857;          /* links / active text (AAA on light) */
  --accent-600: #059669;
  --accent-fill: #10b981;     /* filled control background */
  --accent-fill-hover: #059669;
  --accent-fill-active: #047857;
  --accent-fill-ink: #09090b; /* text ON a filled control */
  --accent-soft: #ecfdf5;     /* subtle positive tint */
  --accent-border: #a7f3d0;

  /* ── semantic ──────────────────────────────────────────────────────────── */
  --success: #047857;  --success-soft: #ecfdf5;  --success-border: #a7f3d0;
  --error:   #b91c1c;  --error-soft:   #fef2f2;  --error-border:   #fecaca;
  --warn:    #b45309;  --warn-soft:    #fffbeb;  --warn-border:    #fde68a;
  --info:    #0369a1;  --info-soft:    #f0f9ff;  --info-border:    #bae6fd;
  --dot-busy: #f59e0b;

  /* ── mastery scale (edu heat-map) ──────────────────────────────────────── */
  /* Five states a cell can hold. Deliberately NOT a red→green gradient: level 0 is
     "struggling", not "failure", and a wall of red on a child's row is the wrong message
     to hand a teacher. Muted tints, with only "mastered" carrying a solid fill. */
  --lv-none: #f4f4f5;         /* not practised yet */
  --lv-0: #fee2e2;            /* struggling */
  --lv-1: #fef3c7;            /* beginning */
  --lv-2: #d1fae5;            /* progressing */
  --lv-3: #10b981;            /* mastered — the only solid */
  --lv-3-ink: #052e1f;        /* text on the solid */

  /* ── radii ─────────────────────────────────────────────────────────────── */
  --r-ctrl: 10px;             /* buttons, inputs */
  --r-card: 14px;             /* cards, panels */
  --r-pill: 999px;

  /* ── spacing scale ─────────────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ── elevation ─────────────────────────────────────────────────────────── */
  --shadow-bar: 0 1px 2px rgba(24, 24, 27, .04);
  --shadow-overlay: 0 4px 16px -4px rgba(24, 24, 27, .10), 0 12px 32px -8px rgba(24, 24, 27, .14);

  /* ── motion ────────────────────────────────────────────────────────────── */
  --dur-fast: 150ms; --dur: 200ms; --dur-slow: 250ms;
  --ease: cubic-bezier(0, 0, .2, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);

  /* ── type ──────────────────────────────────────────────────────────────── */
  --font: 'Rubik', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Rubik', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --fs-1: 12px; --fs-2: 13.5px; --fs-3: 15px; --fs-4: 17px;
  --fs-5: 21px; --fs-6: 26px;  --fs-7: 34px;
  --lh-tight: 1.25; --lh: 1.6;

  /* ── focus ─────────────────────────────────────────────────────────────── */
  /* One ring everywhere, so keyboard users never have to relearn a surface. */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* ── BRAND THEME ──────────────────────────────────────────────────────────────
 * Dark editorial, for landing / marketing / the page a principal is sent.
 * Same names, different values — a component crosses over untouched.
 * Deliberately NOT used for the teacher dashboard: a dense mastery grid on a dark
 * canvas is eye strain, and this theme is meant to be read once, not all day.
 */
[data-theme="brand"] {
  --bg: #111111;
  --surface: #191919;
  --surface-2: #222222;
  --line: #2e2e2e;
  --line-2: #3d3d3d;

  --ink: #f5f3ee;             /* warm off-white — not pure white on near-black */
  --ink-2: #d6d3cc;
  --ink-3: #a8a49b;
  --ink-4: #7d7a73;

  /* On the brand surface the accent carries emphasis, so it warms to a signal red. */
  --accent: #e6533c;
  --accent-600: #d84327;
  --accent-fill: #e6533c;
  --accent-fill-hover: #f26a54;
  --accent-fill-active: #c93a20;
  --accent-fill-ink: #ffffff;
  --accent-soft: #2a1713;
  --accent-border: #5c2a1f;

  --success: #4ade80; --success-soft: #10241a; --success-border: #1f4b34;
  --error:   #f87171; --error-soft:   #2a1414; --error-border:   #5c2626;
  --warn:    #fbbf24; --warn-soft:    #2a2113; --warn-border:    #5c4620;
  --info:    #60a5fa; --info-soft:    #131f2a; --info-border:    #23425c;

  --shadow-bar: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-overlay: 0 4px 16px -4px rgba(0, 0, 0, .6), 0 12px 32px -8px rgba(0, 0, 0, .7);
}

/* ── BACK-COMPAT ALIASES ─────────────────────────────────────────────────────
 * The old surfaces used different names for identical concepts. These keep every
 * existing stylesheet working while files migrate one at a time, so the switch is
 * never a big-bang rewrite. Delete an alias once nothing references it.
 */
:root, [data-theme="brand"] {
  --card: var(--surface);         /* edu.html, onboarding, portal */
  --border: var(--line);          /* dashboard, edu.html */
  --border-hover: var(--line-2);  /* dashboard */
  --border-h: var(--line-2);      /* edu.html */
  --body: var(--ink-2);           /* edu.html */
  --muted: var(--ink-3);          /* edu.html */
  --faint: var(--ink-4);          /* edu.html */
  --accent-strong: var(--accent); /* dashboard */
  --accent-bg: var(--accent-soft);/* dashboard */
  --accent-ink: var(--accent-fill-ink);
  --danger: var(--error);         /* dashboard, edu.html */
  --radius: var(--r-card);        /* edu.html, onboarding, portal */
  --radius-s: var(--r-ctrl);      /* edu.html */
  --r-control: var(--r-ctrl);     /* dashboard */
  --lv0: var(--lv-0);             /* edu.html heat-map */
  --lv1: var(--lv-1);
  --lv2: var(--lv-2);
  --lv3: var(--lv-3);
  --lvnull: var(--lv-none);
}

/* Motion is a preference, not a decoration. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}