/* Design tokens: colour, type, spacing.
   Dark values apply from the OS preference unless the visitor picked a theme with the toggle,
   which sets data-theme on <html>. Keep the two dark blocks identical. */
:root {
  color-scheme: light dark;

  --paper: #f3f4f1;
  --ink: #1b2630;
  --ink-2: #4e5d6a;
  --ink-3: #5f6e7a;
  --rule: #cfd6d9;

  --water: #d9e6ee;
  --land: #e2dccb;
  --land-edge: #b9ae94;
  --grat: #b7c7d2;

  --track: #0f4c81;
  --fix: #c2410c;
  --storm: #b4232a;
  --storm-soft: #e8b6b8;
  --calm: #7d6710;
  --calm-soft: rgba(184, 155, 42, 0.18);

  --ok: #1a6e44;
  --ok-soft: #d8efe2;
  --warn: #855c00;
  --warn-soft: #fbeccb;

  --card: #ffffff;
  --card-2: #f7f8f5;
  --shadow: 0 1px 2px rgba(20, 35, 50, 0.08), 0 6px 16px -10px rgba(20, 35, 50, 0.18);

  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --radius: 8px;
  --radius-sm: 5px;
  --topbar-h: 48px;
  --gutter: max(16px, env(safe-area-inset-left));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111920;
    --ink: #e6ecf0;
    --ink-2: #9fb0bd;
    --ink-3: #7d90a0;
    --rule: #2c3a46;
    --water: #15283a;
    --land: #2b2f2a;
    --land-edge: #5b6150;
    --grat: #2f4659;
    --track: #6fb4ef;
    --fix: #ff8a4c;
    --storm: #ff6b6f;
    --storm-soft: #5a2326;
    --calm: #d9b84a;
    --calm-soft: rgba(217, 184, 74, 0.16);
    --ok: #5ccb8f;
    --ok-soft: #163d2a;
    --warn: #f0c04a;
    --warn-soft: #3d3010;
    --card: #182431;
    --card-2: #1c2a38;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -10px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111920;
  --ink: #e6ecf0;
  --ink-2: #9fb0bd;
  --ink-3: #7d90a0;
  --rule: #2c3a46;
  --water: #15283a;
  --land: #2b2f2a;
  --land-edge: #5b6150;
  --grat: #2f4659;
  --track: #6fb4ef;
  --fix: #ff8a4c;
  --storm: #ff6b6f;
  --storm-soft: #5a2326;
  --calm: #d9b84a;
  --calm-soft: rgba(217, 184, 74, 0.16);
  --ok: #5ccb8f;
  --ok-soft: #163d2a;
  --warn: #f0c04a;
  --warn-soft: #3d3010;
  --card: #182431;
  --card-2: #1c2a38;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -10px rgba(0, 0, 0, 0.6);
}