/* =============================================================================
   tokens.css - the TheSATMentor token layer.

   VERBATIM MIRROR of layer 02 of ../styles.css. Extracted mechanically, never
   hand-typed. Do not edit values here: edit styles.css, then re-mirror.
   test/hr-tokens.test.mjs fails the build if the two ever drift apart.

   The HR portal is served from its own directory, so it cannot @import the
   test center stylesheet across the served root. It also has no use for the
   other ten thousand lines of it: this portal shares the brand, not the
   practice player. What it must never do is invent a colour.
   ============================================================================= */
:root {
  color-scheme: light;

  /* -- brand: fixed in both themes ---------------------------------------- */
  --brand-dark: #bc070c;
  --brand: #ca252b;
  --brand-lite: #d6434b;
  --brand-knockout: #fdfdfd;
  --brand-gradient: linear-gradient(100deg, #bc070c 0%, #d6434b 100%);

  /* -- neutral ramp: warm, red-cast --------------------------------------- */
  --paper: #fbf9f8;
  --paper-2: #f4f0ee;
  --paper-3: #ebe5e2;
  --line: #e4dcd8;
  --line-2: #d0c4bf;
  --ink-4: #9e908b;
  --ink-3: #796b66;
  --ink-2: #4b3f3b;
  --ink: #1f1917;

  /* -- state: product only ------------------------------------------------ */
  --ok: #12734a;
  --ok-wash: #e7f3ec;
  --ok-line: #a6cdb8;
  --wrong: #b3261e;
  --wrong-wash: #fbeae8;
  --wrong-line: #e4a9a3;
  --warn: #8a5a12;
  --warn-wash: #faf1e0;
  --warn-line: #e0c48b;
  --info: #2c5c8a;
  --info-wash: #eaf0f6;
  --info-line: #b3c8db;
  --danger: var(--wrong);

  /* -- semantic aliases: Mode B values. Mode A overrides these on :root. --- */
  --accent: var(--ink);
  --accent-contrast: var(--paper);
  --focus: var(--ink);

  /* -- heatmap ramp: warm neutral -> ink, deliberately not green ----------- */
  --level-0: #efe9e6;
  --level-1: #d9cbc4;
  --level-2: #b39c93;
  --level-3: #7d655c;
  --level-4: #3a2b26;

  /* -- data displays: one shared geometry ---------------------------------
     SCOPE NOTE: layer 02 is out of scope for the layout pass. These three are
     added anyway because the brief's section 5 asks the charts to "read as one
     system", and a shared system needs shared values - .score-meter (6px),
     .wrong-answer-column-track and the heatmap were each sized in isolation.
     Consumers live in layers 09, 10 and 15.

     No hue is introduced. Magnitude is carried by the same neutral ramp the
     heatmap uses, because green and red are spoken for: they mean correct and
     incorrect, and a categorical palette that reuses either for a non-answer
     meaning is a bug, not a taste choice. --wrong appears on the admin chart
     only, where the quantity being measured genuinely is wrong answers. */
  --bar-size: 8px;          /* thickness of any linear meter */
  --bar-track: var(--paper-3);
  --bar-max: 72px;          /* a column never grows wider than this */

  /* -- typography --------------------------------------------------------- */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
    Inter, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-read: Heuristica, "Iowan Old Style", Charter, "Bitstream Charter",
    "Source Serif 4", "Noto Serif", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo,
    Consolas, monospace;

  --fs-2xs: 0.6875rem; /* 11 */
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-md: 0.9375rem;  /* 15 */
  --fs-base: 1rem;     /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.3125rem;  /* 21 */
  --fs-2xl: 1.5625rem; /* 25 */
  --fs-3xl: 1.9375rem; /* 31 */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.55;
  --lh-read: 1.7;

  --tr-tight: -0.02em;
  --tr-flat: 0;
  --tr-wide: 0.06em;

  /* -- spacing: 4px base. Mode B stops at --s-12. -------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* -- radius ------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* -- elevation. Mode B: --e-1 in flow, --e-2/--e-3 for true overlays. ---- */
  --e-1: 0 1px 2px rgba(31, 25, 23, 0.06);
  --e-2: 0 4px 12px -2px rgba(31, 25, 23, 0.1), 0 2px 4px -2px rgba(31, 25, 23, 0.06);
  --e-3: 0 16px 40px -8px rgba(31, 25, 23, 0.18), 0 4px 10px -4px rgba(31, 25, 23, 0.08);

  /* -- motion. Mode B ceiling is --t-base, under the 150ms budget. --------- */
  --t-fast: 120ms;
  --t-base: 150ms;
  --t-slow: 280ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* -- hit targets -------------------------------------------------------- */
  --hit-sm: 32px;
  --hit: 40px;
  --hit-lg: 48px;

  /* -- layout ------------------------------------------------------------- */
  --sidebar-w: 236px;
  --content-max: 1320px;
  --measure: 68ch;

  --scrollbar-thumb: rgba(121, 107, 102, 0.38);
  --scrollbar-thumb-hover: rgba(121, 107, 102, 0.62);
  --backdrop: rgba(31, 25, 23, 0.55);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #171210;
  --paper-2: #1f1917;
  --paper-3: #2a2320;
  --line: #372e2a;
  --line-2: #4b3f3a;
  --ink-4: #7e706a;
  --ink-3: #a2938d;
  --ink-2: #cbbfb9;
  --ink: #f3edea;

  --ok: #4fbe8b;
  --ok-wash: #12281f;
  --ok-line: #2e5c45;
  --wrong: #f1786e;
  --wrong-wash: #33100d;
  --wrong-line: #6b241e;
  --warn: #dfa84c;
  --warn-wash: #2e2109;
  --warn-line: #5c4517;
  --info: #7fb0dc;
  --info-wash: #132330;
  --info-line: #2c445c;

  --level-0: #2a2320;
  --level-1: #4a3b35;
  --level-2: #6f584f;
  --level-3: #9d8177;
  --level-4: #d5c0b6;

  --e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --e-2: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --e-3: 0 16px 40px -8px rgba(0, 0, 0, 0.62), 0 4px 10px -4px rgba(0, 0, 0, 0.45);

  --scrollbar-thumb: rgba(162, 147, 141, 0.34);
  --scrollbar-thumb-hover: rgba(162, 147, 141, 0.58);
  --backdrop: rgba(0, 0, 0, 0.66);
}