/* tokens.css  (generated by src/build.py; edit src/palette.py, not this file) */
:root {
  color-scheme: light dark;
  --bg: #fcf7f1;
  --surface: #fffbf6;
  --raised: #ffffff;
  --sunken: #f5ece2;
  --tint: #efdfd0;
  --text: #231f1b;
  --muted: #59504a;
  --line-soft: #efdfd0;
  --line: #877b70;
  --accent: #1d4fa6;
  --accent-on: #ffffff;
  --accent-text: #1d4fa6;
  --secondary: #7b4a88;
  --secondary-text: #7b4a88;
  --secondary-on: #ffffff;
  --highlight: #f6d92e;
  --highlight-on: #231f1b;
  --success: #186f38;
  --warning: #845000;
  --danger: #b3281f;
  --info: #1d4fa6;
  --focus: #1d4fa6;
  --scrim: rgb(35 31 27 / .45);
  --shadow: 0 2px 4px rgb(35 31 27 / .06), 0 12px 32px rgb(35 31 27 / .16), inset 0 1px 0 rgb(255 255 255 / .8);
  --elev-1: 0 1px 1px rgb(35 31 27 / .05), 0 2px 8px rgb(35 31 27 / .07), inset 0 1px 0 rgb(255 255 255 / .7);
  --elev-2: 0 2px 4px rgb(35 31 27 / .06), 0 12px 32px rgb(35 31 27 / .16), inset 0 1px 0 rgb(255 255 255 / .8);
  --elev-bar: 0 1px 2px rgb(35 31 27 / .06), 0 4px 12px rgb(35 31 27 / .07);
  --btn-shadow: 0 1px 1px rgb(29 79 166 / .30), 0 2px 5px rgb(29 79 166 / .22), inset 0 1px 0 rgb(255 255 255 / .22);
  --sheen: linear-gradient(to bottom, rgb(255 255 255 / .14), rgb(255 255 255 / 0) 70%);
  --field-inset: inset 0 1px 2px rgb(35 31 27 / .12);
  --press: inset 0 2px 4px rgb(0 0 0 / .25);

  /* Type */
  --font-ui: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Merriweather", Georgia, "Times New Roman", serif;
  --text-sm: 0.875rem;    /* 14: captions, meta */
  --text-base: 1rem;      /* 16: body, controls (never smaller on inputs: stops iOS zoom) */
  --text-md: 1.125rem;    /* 18: lead, list titles */
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --leading-tight: 1.2;
  --leading-body: 1.5;
  --measure: 66ch;

  /* Space: 4px base. Use the three "relationship" aliases first. */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4.5rem;
  --gap-within: var(--space-2);    /* label + value, icon + text: one thing */
  --gap-related: var(--space-4);   /* items in the same group */
  --gap-section: var(--space-7);   /* separate groups; space does the dividing */
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Shape: one small radius, used everywhere. */
  --radius: 6px;
  --radius-sm: 3px;

  /* Targets and focus (WCAG 2.5.8, 2.4.11, 2.4.13) */
  --target: 2.75rem;               /* 44px; AA only requires 24px */
  --focus-ring: 3px solid var(--focus);
  --focus-offset: 2px;

  /* Motion */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur: 140ms;
}

/* Automatic dark, unless the page has chosen light explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1424;
    --surface: #141c31;
    --raised: #1c2641;
    --sunken: #080d19;
    --tint: #26335a;
    --text: #f4f1ec;
    --muted: #b6bfd1;
    --line-soft: #26335a;
    --line: #8993ac;
    --accent: #8eb6ff;
    --accent-on: #0c2250;
    --accent-text: #8eb6ff;
    --secondary: #e2b4f2;
    --secondary-text: #e2b4f2;
    --secondary-on: #2c1735;
    --highlight: #f6d92e;
    --highlight-on: #231f1b;
    --success: #6fe19b;
    --warning: #ffc94d;
    --danger: #ff9d92;
    --info: #8eb6ff;
    --focus: #f6d92e;
    --scrim: rgb(2 5 14 / .65);
    --shadow: 0 2px 4px rgb(3 6 16 / .40), 0 12px 32px rgb(3 6 16 / .55), inset 0 1px 0 rgb(255 255 255 / .08);
    --elev-1: 0 1px 1px rgb(3 6 16 / .35), 0 2px 8px rgb(3 6 16 / .30), inset 0 1px 0 rgb(255 255 255 / .06);
    --elev-2: 0 2px 4px rgb(3 6 16 / .40), 0 12px 32px rgb(3 6 16 / .55), inset 0 1px 0 rgb(255 255 255 / .08);
    --elev-bar: 0 1px 0 rgb(3 6 16 / .5), 0 6px 14px rgb(3 6 16 / .35);
    --btn-shadow: 0 1px 1px rgb(3 6 16 / .45), 0 2px 6px rgb(3 6 16 / .35), inset 0 1px 0 rgb(255 255 255 / .28);
    --sheen: linear-gradient(to bottom, rgb(255 255 255 / .18), rgb(255 255 255 / 0) 70%);
    --field-inset: inset 0 1px 3px rgb(3 6 16 / .55);
    --press: inset 0 2px 4px rgb(3 6 16 / .35);
  }
}

/* Explicit choices (theme toggle) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1424;
  --surface: #141c31;
  --raised: #1c2641;
  --sunken: #080d19;
  --tint: #26335a;
  --text: #f4f1ec;
  --muted: #b6bfd1;
  --line-soft: #26335a;
  --line: #8993ac;
  --accent: #8eb6ff;
  --accent-on: #0c2250;
  --accent-text: #8eb6ff;
  --secondary: #e2b4f2;
  --secondary-text: #e2b4f2;
  --secondary-on: #2c1735;
  --highlight: #f6d92e;
  --highlight-on: #231f1b;
  --success: #6fe19b;
  --warning: #ffc94d;
  --danger: #ff9d92;
  --info: #8eb6ff;
  --focus: #f6d92e;
  --scrim: rgb(2 5 14 / .65);
  --shadow: 0 2px 4px rgb(3 6 16 / .40), 0 12px 32px rgb(3 6 16 / .55), inset 0 1px 0 rgb(255 255 255 / .08);
  --elev-1: 0 1px 1px rgb(3 6 16 / .35), 0 2px 8px rgb(3 6 16 / .30), inset 0 1px 0 rgb(255 255 255 / .06);
  --elev-2: 0 2px 4px rgb(3 6 16 / .40), 0 12px 32px rgb(3 6 16 / .55), inset 0 1px 0 rgb(255 255 255 / .08);
  --elev-bar: 0 1px 0 rgb(3 6 16 / .5), 0 6px 14px rgb(3 6 16 / .35);
  --btn-shadow: 0 1px 1px rgb(3 6 16 / .45), 0 2px 6px rgb(3 6 16 / .35), inset 0 1px 0 rgb(255 255 255 / .28);
  --sheen: linear-gradient(to bottom, rgb(255 255 255 / .18), rgb(255 255 255 / 0) 70%);
  --field-inset: inset 0 1px 3px rgb(3 6 16 / .55);
  --press: inset 0 2px 4px rgb(3 6 16 / .35);
}