/* Design tokens: colours, spacing, radii, shadows, breakpoints. */
:root {
  /* Warm paper palette: cream surfaces, ink text, near-black for active chips. */
  --bg: #f5f2ec;
  --surface: #fffefb;
  --surface-2: #faf8f3;
  --border: #ded8cc;
  --border-soft: #f0ece3;
  --text: #1b1a17;
  --ink: #14130f;            /* active segment / chip background */
  --ink-on: #f2efe9;         /* text on --ink */
  --muted: #7d7869;
  --faint: #a09884;

  --primary: #d21f1f;
  --primary-600: #b41818;
  --accent: #f5a623;
  --ok: #17915b;

  --green: #1aa568;
  --purple: #8b5cf6;
  --yellow: #e0a100;
  --grey: #8b93a1;

  --shadow: 0 1px 2px rgba(43, 38, 26, .05);
  --shadow-lg: 0 20px 60px rgba(43, 38, 26, .22);

  --font-ui: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 12px;
  --radius-sm: 9px;
  --radius-pill: 999px;

  --tap: 44px;              /* minimum comfortable touch target */
  --topbar-h: 57px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* Dark mode stays cool and neutral — the warm paper palette only reads well
   on light backgrounds; tinted browns look muddy at low luminance. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --surface: #171b21;
    --surface-2: #1e232b;
    --border: #2a303a;
    --border-soft: #232832;
    --text: #e7eaee;
    --muted: #9aa4b2;
    --faint: #6b7684;
    --ink: #e7eaee;          /* inverted: the "active" fill becomes light */
    --ink-on: #0f1216;
    --shadow: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .55);
  }
}