/* GENERATED from design/tokens.json by design/build.mjs — do not edit by hand. */

/* Dark is the default look. Light applies via prefers-color-scheme when the
   person hasn't chosen, and [data-theme] (the toggle, theme.js) always wins. */
:root {
  --bg: #0e2a33;
  --panel: #14313b;
  --panel-2: #1a3844;
  --border: #23404a;
  --ink: #f2ede4;
  --ink-dim: #a9bac0;
  --ink-faint: #6e8891;
  --red: #d93a1e;
  --gold: #ffb800;
  --ok: #2ecc71;
  --focus: #7fd4e6;
  --water: rgba(150,205,220,0.149);
  --grid: rgba(255,255,255,0.035);
  --text-caption: 12px;
  --text-label: 13px;
  --text-body: 15px;
  --text-title: 20px;
  --text-display: 34px;
  --text-metric-compact: 48px;
  --text-metric: 72px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-control: 4px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 600ms;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f1ea;
    --panel: #ffffff;
    --panel-2: #ede8dd;
    --border: #ddd6c8;
    --ink: #16262b;
    --ink-dim: #4b5f65;
    --ink-faint: #7c8f94;
    --red: #d93a1e;
    --gold: #96690a;
    --ok: #1e8449;
    --focus: #0b6e85;
    --water: rgba(22,70,90,0.122);
    --grid: rgba(20,49,59,0.051);
  }
}
:root[data-theme="light"] {
  --bg: #f4f1ea;
  --panel: #ffffff;
  --panel-2: #ede8dd;
  --border: #ddd6c8;
  --ink: #16262b;
  --ink-dim: #4b5f65;
  --ink-faint: #7c8f94;
  --red: #d93a1e;
  --gold: #96690a;
  --ok: #1e8449;
  --focus: #0b6e85;
  --water: rgba(22,70,90,0.122);
  --grid: rgba(20,49,59,0.051);
}
:root[data-theme="dark"] {
  --bg: #0e2a33;
  --panel: #14313b;
  --panel-2: #1a3844;
  --border: #23404a;
  --ink: #f2ede4;
  --ink-dim: #a9bac0;
  --ink-faint: #6e8891;
  --red: #d93a1e;
  --gold: #ffb800;
  --ok: #2ecc71;
  --focus: #7fd4e6;
  --water: rgba(150,205,220,0.149);
  --grid: rgba(255,255,255,0.035);
}