/* =============================================================
   tokens.css — Design tokens & global resets
   -------------------------------------------------------------
   Contains: CSS custom properties (colors, radii, shadow, font
   stacks) on :root, the dark-theme overrides on
   :root[data-theme="dark"] (applied by js/preferences.js from the
   System/Light/Dark toggle on Info — "system" resolves via
   matchMedia in JS, so CSS only ever sees an explicit theme),
   plus browser resets (box-sizing, margins, focus outline,
   reduced-motion).
   Loaded first — every other CSS file (and the JS renderers
   that build class names) depends on these variables existing.
   Edit here to: change the color palette, spacing radii, or
   fonts app-wide. Do NOT rename a variable without grepping for
   every var(--name) usage across css/*.css first. The --chrome*
   tokens are the nav/app-frame chrome (dark in both themes);
   --field/--field-border are form input surfaces; --gold-text/
   --grey-text are the readable-on-tint text colors.
   ============================================================= */
/* ============ TOKENS ============ */
:root{
  --ink:#12232F;
  --ink-70: rgba(18,35,47,.7);
  --ink-45: rgba(18,35,47,.45);
  --mist:#EEF3F5;
  --paper:#FFFFFF;
  --line:#DCE5E8;
  --buoy:#FF6A3D;
  --buoy-10: rgba(255,106,61,.12);
  --teal:#0F7A78;
  --teal-10: rgba(15,122,120,.10);
  --gold:#E7B23A;
  --gold-10: rgba(231,178,58,.14);
  --sage:#6B9B6E;
  --sage-10: rgba(107,155,110,.14);
  --channel:#2E6E9E;
  --channel-10: rgba(46,110,158,.12);
  --violet:#8B5FBF;
  --violet-10: rgba(139,95,191,.12);
  --grey:#93A3AA;
  --grey-10: rgba(147,163,170,.14);
  --chrome:#12232F;
  --chrome-contrast:#EEF3F5;
  --chrome-muted:rgba(238,243,245,.5);
  --chrome-line:rgba(255,255,255,.08);
  --field:rgba(255,255,255,.72);
  --field-border:rgba(18,35,47,.14);
  --gold-text:#8A6A16;
  --grey-text:#5F7078;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(18,35,47,.06), 0 8px 24px -12px rgba(18,35,47,.18);
  --font-display: 'Staatliches', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ink:#EAF1F3;
  --ink-70:rgba(234,241,243,.72);
  --ink-45:rgba(234,241,243,.48);
  --mist:#0F171D;
  --paper:#17242C;
  --line:rgba(234,241,243,.13);
  --buoy:#FF815C;
  --buoy-10:rgba(255,129,92,.16);
  --teal:#4DBDB6;
  --teal-10:rgba(77,189,182,.16);
  --gold:#EAC35E;
  --gold-10:rgba(234,195,94,.17);
  --sage:#89BE8C;
  --sage-10:rgba(137,190,140,.16);
  --channel:#78B9E7;
  --channel-10:rgba(120,185,231,.16);
  --violet:#B392DC;
  --violet-10:rgba(179,146,220,.16);
  --grey:#A7B4BB;
  --grey-10:rgba(167,180,187,.16);
  --chrome:#0A1015;
  --chrome-contrast:#EEF3F5;
  --chrome-muted:rgba(238,243,245,.58);
  --chrome-line:rgba(255,255,255,.12);
  --field:rgba(255,255,255,.06);
  --field-border:rgba(234,241,243,.16);
  --gold-text:#EAC35E;
  --grey-text:#AAB8BE;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 28px -18px rgba(0,0,0,.72);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--chrome);
  font-family:var(--font-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--buoy); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}