/* Design tokens: colours, spacing, radii, shadows, breakpoints.
   Two palettes, both cool-neutral so the themes read as siblings. The inline
   script in index.html stamps data-theme="light|dark" on <html> before the
   first paint (saved preference, else the OS), so nothing flashes and CSS only
   has to describe the two states — no prefers-color-scheme duplication. */
:root {
  color-scheme: light;

  --bg: #f1f3f7;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --border: #dde2ea;
  --border-soft: #edf0f5;
  --text: #15181d;
  --ink: #15181d;            /* active segment / chip background */
  --ink-on: #f7f9fb;         /* text on --ink */
  --muted: #5f6a7d;
  --faint: #8b95a5;

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

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

  --shadow: 0 1px 2px rgba(21, 24, 29, .06);
  --shadow-lg: 0 20px 60px rgba(21, 24, 29, .18);

  /* ambient backdrop — see css/backdrop.css */
  --glow-1: rgba(210, 31, 31, .10);
  --glow-2: rgba(245, 166, 35, .13);
  --glow-3: rgba(26, 165, 104, .11);
  --hatch: rgba(21, 24, 29, .07);   /* diagonal "no shift" texture */
  --dot: rgba(21, 24, 29, .07);
  --chrome: rgba(255, 255, 255, .78);

  --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 stays cool and neutral — warm, tinted darks look muddy at low luminance. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --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);

  /* the glows carry further on a dark ground, so they start a touch stronger */
  --glow-1: rgba(210, 31, 31, .16);
  --glow-2: rgba(245, 166, 35, .09);
  --glow-3: rgba(139, 92, 246, .14);
  --hatch: rgba(255, 255, 255, .06);
  --dot: rgba(255, 255, 255, .045);
  --chrome: rgba(23, 27, 33, .78);
}