/* Abacus4Everyone v2 — design tokens.
   The single source of truth. Per audit: Inter, 4px spacing grid, navy identity
   + amber primary accent + neutral greys, semantic-only status colours, belt
   colours reserved for learner/curriculum, 8px controls / 12px cards. */

:root{
  /* ---- brand identity (recognition assets — preserved) ---- */
  /* brand identity — MATCHES the live Abacus4Everyone app exactly */
  --navy-900:#0f2036; --navy-800:#1D3557; --navy-700:#26456b; --navy-600:#345680;
  --amber-600:#e69500; --amber-500:#FFB703; --amber-400:#ffc63d; --amber-100:#fff3d6;
  --orange:#FB8500; --sky:#8ECAE6;

  /* ---- neutral scale (greys do the work) ---- */
  --n-0:#ffffff; --n-25:#fbfbfc; --n-50:#f6f7f9; --n-100:#eceef2; --n-200:#e0e3e9;
  --n-300:#cbd0da; --n-400:#9aa2b1; --n-500:#6b7382; --n-600:#4c5462; --n-700:#343a46;
  --n-800:#222731; --n-900:#141820;

  /* ---- semantic status (ONLY for meaning, never decoration) ---- */
  --ok:#0f7b52;   --ok-bg:#e6f4ee;
  --warn:#9a6b00; --warn-bg:#fbf3df;
  --err:#b42318;  --err-bg:#fdecea;
  --info:#1f5fbf; --info-bg:#e8f0fc;

  /* ---- roles / applied ---- */
  --bg:var(--n-25); --surface:var(--n-0); --ink:var(--n-900); --ink-2:var(--n-500);
  --ink-3:var(--n-400); --line:var(--n-100); --line-2:var(--n-200);
  --accent:var(--amber-500); --accent-ink:#5a3d00; --accent-bg:var(--amber-100); --accent-strong:var(--orange);
  --brand:var(--navy-800); --brand-2:var(--sky);

  /* ---- belt colours (learner + curriculum markers ONLY) ---- */
  --belt-white:#e8eaed; --belt-yellow:#f4c430; --belt-orange:#e8843c;
  --belt-green:#2f9e5f; --belt-blue:#2f74e0; --belt-purple:#7a4fd0;
  --belt-brown:#8a5a2b; --belt-red:#d0392b; --belt-black:#20242c;

  /* ---- spacing (4px grid) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px;

  /* ---- radius ---- */
  --r-ctl:8px; --r-card:12px; --r-pill:999px;

  /* ---- type ---- */
  --font:"Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,monospace;
  --t-caption:12px; --t-meta:12px; --t-body:14px; --t-row:16px;
  --t-h3:16px; --t-h2:20px; --t-h1:24px; --t-page:20px;

  /* ---- elevation (border-first; one shadow for overlays) ---- */
  --shadow-sm:0 1px 2px rgba(20,24,32,.05);
  --shadow-pop:0 8px 24px rgba(20,24,32,.12);

  --focus:0 0 0 3px var(--info-bg), 0 0 0 1px var(--info);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:var(--t-body);line-height:1.5;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-ctl)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}