/* /css/tokens.css: design tokens (§4.1, §4.2). "The surveyor's field notebook at night."
   Light ("Notebook") is the default. Dark ("Observatory") applies under prefers-color-scheme: dark unless the
   learner chose light, and under [data-theme="dark"]. The two dark blocks are identical by rule.
   Color carries meaning: blue = lab, vermilion = rocket, gold = light, teal = invariant, purple = your code. */

:root {
  color-scheme: light;
  --bg: #FBF8F1;
  --surface: #FFFFFF;
  --surface-2: #F3EEE2;
  --ink: #1E2227;
  --ink-muted: #5B616B;
  --rule: #D9D0BE;
  --grid-minor: #ECE5D6;
  --c-lab: #2457A6;
  --c-rocket: #B83C0A;
  --c-light: #B07A0A;
  --c-light-text: #8A5A00;
  --c-inv: #0E7568;
  --c-you: #6D3FC0;
  --c-ok: #2A752E;
  --c-bad: #B3261E;
  --c-timelike: rgba(176,122,10,0.08);
  --c-spacelike: rgba(91,97,107,0.05);
  --focus: #2457A6;
  --ad-bg: #F1ECE0;
  --shadow: 0 1px 2px rgba(30,34,39,.06), 0 4px 16px rgba(30,34,39,.06);

  /* Derived (F1): quiet tints for fills and states, never used for text. */
  --tint-lab: rgba(36,87,166,.08);
  --tint-rocket: rgba(184,60,10,.08);
  --tint-light: rgba(176,122,10,.10);
  --tint-inv: rgba(14,117,104,.09);
  --tint-you: rgba(109,63,192,.08);
  --tint-ok: rgba(42,117,46,.09);
  --tint-bad: rgba(179,38,30,.08);
  --on-accent: #FFFFFF;
  --shadow-lift: 0 2px 4px rgba(30,34,39,.07), 0 12px 32px rgba(30,34,39,.10);
  --paper-dot: rgba(30,34,39,.045);

  /* Radii, spacing, motion */
  --r-s: 6px; --r-m: 10px; --r-l: 16px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --ease: cubic-bezier(.4,0,.2,1); --t-ui: 200ms; --t-morph: 600ms;

  /* Type (§4.2): system stacks only (D20) */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;

  /* Layout (§4.3) */
  --measure: 680px;
  --rail-w: 220px;
  --margin-w: 260px;
  --gap: 40px;
  --header-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E1116;
    --surface: #151A21;
    --surface-2: #1B222B;
    --ink: #E7E2D7;
    --ink-muted: #9BA4AF;
    --rule: #2B333D;
    --grid-minor: #1F262F;
    --c-lab: #82AAF2;
    --c-rocket: #FF8F5E;
    --c-light: #F4C552;
    --c-light-text: #F4C552;
    --c-inv: #4FD1B5;
    --c-you: #B79CFF;
    --c-ok: #6BCB77;
    --c-bad: #FF8A80;
    --c-timelike: rgba(244,197,82,0.07);
    --c-spacelike: rgba(155,164,175,0.05);
    --focus: #F4C552;
    --ad-bg: #161B22;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
    --tint-lab: rgba(130,170,242,.10);
    --tint-rocket: rgba(255,143,94,.10);
    --tint-light: rgba(244,197,82,.10);
    --tint-inv: rgba(79,209,181,.10);
    --tint-you: rgba(183,156,255,.10);
    --tint-ok: rgba(107,203,119,.10);
    --tint-bad: rgba(255,138,128,.10);
    --on-accent: #0E1116;
    --shadow-lift: 0 2px 6px rgba(0,0,0,.45), 0 14px 36px rgba(0,0,0,.4);
    --paper-dot: rgba(231,226,215,.05);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E1116;
  --surface: #151A21;
  --surface-2: #1B222B;
  --ink: #E7E2D7;
  --ink-muted: #9BA4AF;
  --rule: #2B333D;
  --grid-minor: #1F262F;
  --c-lab: #82AAF2;
  --c-rocket: #FF8F5E;
  --c-light: #F4C552;
  --c-light-text: #F4C552;
  --c-inv: #4FD1B5;
  --c-you: #B79CFF;
  --c-ok: #6BCB77;
  --c-bad: #FF8A80;
  --c-timelike: rgba(244,197,82,0.07);
  --c-spacelike: rgba(155,164,175,0.05);
  --focus: #F4C552;
  --ad-bg: #161B22;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --tint-lab: rgba(130,170,242,.10);
  --tint-rocket: rgba(255,143,94,.10);
  --tint-light: rgba(244,197,82,.10);
  --tint-inv: rgba(79,209,181,.10);
  --tint-you: rgba(183,156,255,.10);
  --tint-ok: rgba(107,203,119,.10);
  --tint-bad: rgba(255,138,128,.10);
  --on-accent: #0E1116;
  --shadow-lift: 0 2px 6px rgba(0,0,0,.45), 0 14px 36px rgba(0,0,0,.4);
  --paper-dot: rgba(231,226,215,.05);
}

/* KaTeX color classes (\lab \rkt \inv \lit \you macros, §2.7) */
.k-lab { color: var(--c-lab); }
.k-rkt { color: var(--c-rocket); }
.k-inv { color: var(--c-inv); }
.k-light { color: var(--c-light-text); }
.k-you { color: var(--c-you); }