/* Maple TCF — the design system's tokens (Claude Design: "Maple TCF", project/tokens.json), as CSS. site/tokens.css
   is an exact copy. The system's own names come first; the older names the style sheets were written with follow,
   each an alias of a system token, so every page takes the new look without renaming its rules:
     bg → surface · surface → surface-raised · surface-2 → surface-sunken · accent → navy · ok → correct ·
     bad → incorrect · amber → caution · sun → sky (the old yellow had no place in the system) · hall → a navy ground.
   Maple is the accent: the one button that starts a timed test, the active tab's underline, the rule under a title. */
:root {
  /* the system */
  --surface-page: #f6f7fb;
  --surface-raised: #ffffff;
  --surface-sunken: #eceff6;
  --line: #d5dae6;
  --line-strong: #7d869c;
  --ink: #141a45;
  --ink-muted: #4f5672;
  --navy: #1f2a6b;
  --navy-soft: #e4e8f7;
  --on-navy: #ffffff;
  --maple: #c8102e;
  --maple-soft: #fde8eb;
  --on-maple: #ffffff;
  --sky: #2852c4;
  --link: var(--sky);
  --focus: #2852c4;
  --correct: #0b6574;
  --correct-soft: #e0f3f5;
  --incorrect: #b3261e;
  --incorrect-soft: #fdeceb;
  --caution: #8a4b00;
  --caution-soft: #fdf1de;
  --hall: #141a45;
  --hall-ink: #eef1fa;
  --scrim: rgba(20, 26, 69, 0.45);
  --shadow-card: 0 1px 2px rgba(20, 26, 69, 0.06), 0 4px 12px rgba(20, 26, 69, 0.06);
  --shadow-float: 0 12px 32px rgba(20, 26, 69, 0.14);

  /* the older names */
  --bg: var(--surface-page);
  --surface: var(--surface-raised);
  --surface-2: var(--surface-sunken);
  --accent: var(--navy);
  --on-accent: var(--on-navy);
  --accent-soft: var(--navy-soft);
  --sun: var(--sky);
  --sun-soft: var(--navy-soft);
  --ok: var(--correct);
  --ok-soft: var(--correct-soft);
  --bad: var(--incorrect);
  --bad-soft: var(--incorrect-soft);
  --amber: var(--caution);
  --amber-soft: var(--caution-soft);
  --new: var(--line);
  /* the old pressed shadow: gone (one elevation only, on cards) */
  --shadow-press: none;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  /* the scrollbar (public/scrollbars.js draws it): one colour, one shape, and a gutter it lives in */
  --sb-thumb: color-mix(in srgb, var(--navy) 45%, transparent);
  --sb-thumb-active: var(--navy);
  --sb-size: 6px;
  --sb-gutter: 14px;
  --border-strong: 1px;
  --border-hair: 1px;
  --duration-quick: 150ms;
  --duration-move: 150ms;
  --duration-hall: 600ms;
  /* strong curves: ease-out for what enters, leaves or answers a press; ease-in-out for what moves on screen.
     No ease-in: it starts slow, at the moment the eye is on it */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* the brand's two families (Bonjour TCF system): Source Sans 3 for all that is read or tapped, Source Serif 4 (600)
     for the big titles only. display and mono are kept as names: both are Source Sans 3 now (digits tabular) */
  --font-display: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #0e1424;
    --surface-raised: #161e33;
    --surface-sunken: #0a0f1c;
    --line: #2a3550;
    --line-strong: #6b7896;
    --ink: #eef1fa;
    --ink-muted: #a9b1c8;
    --navy: #a3b3ff;
    --navy-soft: #232e66;
    --on-navy: #0e1424;
    --maple: #ff7a8a;
    --maple-soft: #3d1420;
    --on-maple: #0e1424;
    --sky: #93b1ff;
    --focus: #93b1ff;
    --correct: #5fd0de;
    --correct-soft: #0d2e35;
    --incorrect: #ff8a80;
    --incorrect-soft: #3a1513;
    --caution: #f5b84a;
    --caution-soft: #33240a;
    --hall: #0a0f1c;
    --hall-ink: #eef1fa;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface-page: #0e1424;
  --surface-raised: #161e33;
  --surface-sunken: #0a0f1c;
  --line: #2a3550;
  --line-strong: #6b7896;
  --ink: #eef1fa;
  --ink-muted: #a9b1c8;
  --navy: #a3b3ff;
  --navy-soft: #232e66;
  --on-navy: #0e1424;
  --maple: #ff7a8a;
  --maple-soft: #3d1420;
  --on-maple: #0e1424;
  --sky: #93b1ff;
  --focus: #93b1ff;
  --correct: #5fd0de;
  --correct-soft: #0d2e35;
  --incorrect: #ff8a80;
  --incorrect-soft: #3a1513;
  --caution: #f5b84a;
  --caution-soft: #33240a;
  --hall: #0a0f1c;
  --hall-ink: #eef1fa;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}