/* Design tokens shared by /status and /admin/ (design D12). Dark values are declared twice:
   once for the system preference (unless the user forced light) and once for the manual toggle. */
:root {
  color-scheme: light dark;
  --bg: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f3f2ee;
  --border: rgba(11, 11, 11, 0.1);
  --text: #0b0b0b;
  --text-2: #52514e;
  --muted: #6b6a65;
  --grid: #e1e0d9;
  --accent: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-hero: 32px;
  --fs-title: 20px;
  --fs-section: 15px;
  --fs-body: 14px;
  --fs-meta: 12px;
  --fs-overline: 11px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --radius-card: 8px;
  --radius-control: 6px;
  --radius-pill: 999px;
  --card-pad: 16px;
  --gutter: 16px;
  --max-width: 1200px;
  --motion: 150ms ease-out;
}

@media (min-width: 1024px) {
  :root {
    --card-pad: 20px;
    --gutter: 24px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232321;
    --border: rgba(255, 255, 255, 0.1);
    --text: #ffffff;
    --text-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --accent: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232321;
  --border: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --text-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --accent: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
}

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