/* Scaled design tokens, direction "Instrument" (see DESIGN.md).
   Graphite and paper surfaces, emerald for action and progress, sand for scores, coral for weak spots.
   The theme follows the device; html[data-theme="light" | "dark"] forces it (set by js/boot.js from sc.theme).
   The exam screen has its own tokens (.exam), always light, like a test-centre terminal. */

@font-face { font-family: "Geist"; src: url("/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* type */
  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-base: 16px; --t-lg: 18px; --t-xl: 20px;
  --t-2xl: 24px; --t-3xl: 30px; --t-4xl: 38px; --t-5xl: 48px; --t-6xl: 64px;
  --lh-tight: 1.05; --lh-snug: 1.25; --lh: 1.55;
  --tr-display: -0.045em; --tr-head: -0.03em; --tr-label: 0.08em;
  --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; --w-heavy: 800;

  /* space: a 4 px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;
  --gutter: 16px; --max: 1200px; --max-text: 68ch;

  /* shape */
  --r-xs: 4px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  --hit: 44px; --hit-sm: 36px;            /* touch targets: 44 px, small controls 36 px on a mouse only */

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1); --d1: 120ms; --d2: 200ms; --d3: 320ms;

  /* layers */
  --z-bar: 20; --z-menu: 40; --z-modal: 60; --z-toast: 80;

  /* light theme (the default when the device is light) */
  color-scheme: light;
  --bg: #F5F7F4;        --bg-2: #ECF0EC;      --surface: #FFFFFF;   --surface-2: #F2F5F2;  --surface-3: #E6EBE7;
  --line: #DCE3DE;      --line-2: #C3CDC6; --field: #808C86;
  --ink: #0E1311;       --ink-2: #44514A;     --ink-3: #5F6D66;     --ink-inv: #F3F6F4;
  --accent: #2EE59D;    --accent-hi: #1FD18C; --accent-ink: #04140D; --accent-text: #057A4E; --accent-soft: #DDF8EC; --accent-line: #8FE5C2;
  --sand: #93560C;      --sand-soft: #F5ECD9;                      /* scores: dark sand text on light */
  --warn: #B5400D;      --warn-soft: #FDEBE2;
  --bad: #B42318;       --bad-soft: #FDE8E6;
  --info: #0B6E99;      --info-soft: #E1F1F8;
  --verbal: #0B6E99;    --quant: #9A5B00;     --total: #057A4E;
  --focus: #057A4E;
  --shadow-1: 0 1px 2px rgba(14, 19, 17, .06), 0 1px 1px rgba(14, 19, 17, .04);
  --shadow-2: 0 12px 32px -12px rgba(14, 19, 17, .22), 0 2px 6px rgba(14, 19, 17, .06);
  --glow: 0 0 0 0 transparent;
  --scrim: rgba(10, 14, 12, .45);
  --skeleton: #E4EAE5; --skeleton-hi: #F1F5F2;
}

/* dark theme: the device asks for it (and the student did not force light), or the student forced it */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0C0F0E;      --bg-2: #111514;      --surface: #161B19;   --surface-2: #1C2220;  --surface-3: #232B28;
    --line: #26302C;    --line-2: #34413B; --field: #66756E;
    --ink: #EEF2EF;     --ink-2: #A9B6AF;     --ink-3: #8A9890;     --ink-inv: #0C0F0E;
    --accent: #2EE59D;  --accent-hi: #5CEDB5; --accent-ink: #04140D; --accent-text: #2EE59D; --accent-soft: #12271E; --accent-line: #1F6B4C;
    --sand: #E9DCC1;    --sand-soft: #2A2519;
    --warn: #FF8A5B;    --warn-soft: #33201A;
    --bad: #FF7A70;     --bad-soft: #351C1A;
    --info: #7CC8F0;    --info-soft: #14262F;
    --verbal: #7CC8F0;  --quant: #F2C46D;     --total: #2EE59D;
    --focus: #2EE59D;
    --shadow-1: 0 1px 0 rgba(255, 255, 255, .03) inset;
    --shadow-2: 0 24px 60px -28px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02);
    --glow: 0 18px 60px -30px rgba(46, 229, 157, .35);
    --scrim: rgba(0, 0, 0, .6);
    --skeleton: #1C2220; --skeleton-hi: #26302C;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C0F0E;      --bg-2: #111514;      --surface: #161B19;   --surface-2: #1C2220;  --surface-3: #232B28;
  --line: #26302C;    --line-2: #34413B; --field: #66756E;
  --ink: #EEF2EF;     --ink-2: #A9B6AF;     --ink-3: #8A9890;     --ink-inv: #0C0F0E;
  --accent: #2EE59D;  --accent-hi: #5CEDB5; --accent-ink: #04140D; --accent-text: #2EE59D; --accent-soft: #12271E; --accent-line: #1F6B4C;
  --sand: #E9DCC1;    --sand-soft: #2A2519;
  --warn: #FF8A5B;    --warn-soft: #33201A;
  --bad: #FF7A70;     --bad-soft: #351C1A;
  --info: #7CC8F0;    --info-soft: #14262F;
  --verbal: #7CC8F0;  --quant: #F2C46D;     --total: #2EE59D;
  --focus: #2EE59D;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .03) inset;
  --shadow-2: 0 24px 60px -28px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02);
  --glow: 0 18px 60px -30px rgba(46, 229, 157, .35);
  --scrim: rgba(0, 0, 0, .6);
  --skeleton: #1C2220; --skeleton-hi: #26302C;
}

/* the exam: always light, plain, like the real test (whatever the theme) */
.exam {
  color-scheme: light;
  --x-bar: #1E2321;     --x-bar-ink: #F3F6F4; --x-bar-2: #2C3330;  --x-bar-line: #3A433F;
  --x-paper: #FFFFFF;   --x-paper-2: #F4F6F5; --x-ink: #111614;    --x-ink-2: #4A5550;  --x-line: #C9D1CC;
  --x-select: #111614;  --x-select-ink: #FFFFFF;
  --x-mark: #B42318;    --x-hl: #FFE58A;      --x-time: #F3F6F4;   --x-time-low: #FFB4A8;
  --x-next: #057A4E;    --x-next-ink: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d1: 0ms; --d2: 0ms; --d3: 0ms; }
}