/* Design tokens — every color, size, and type value the UI uses.
   Light is the default; dark swaps in via prefers-color-scheme. Status
   colors follow the validated status palette (good/warning/critical) with
   per-mode text-safe variants: the solid token paints dots/cells, the -text
   token is guaranteed ≥4.5:1 on --surface in its own mode. */

:root {
  color-scheme: light dark;

  /* Surfaces & ink (light) */
  --bg: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f0efec;
  --border: rgba(11, 11, 11, 0.10);
  --border-strong: rgba(11, 11, 11, 0.20);
  --text: #0b0b0b;
  --text-muted: #52514e;
  --text-faint: #898781;

  /* Status: running / forming / idle / no-data */
  --ok: #0ca30c;
  --ok-text: #006300;
  --ok-tint: rgba(12, 163, 12, 0.10);
  --warn: #fab219;
  --warn-text: #8a5f00;
  --warn-tint: rgba(250, 178, 25, 0.16);
  --down: #d03b3b;
  --down-text: #b02f2f;
  --down-tint: rgba(208, 59, 59, 0.10);
  --nodata: #dbdad3;
  --nodata-text: #52514e;
  --nodata-tint: rgba(137, 135, 129, 0.10);

  /* History cells want the pattern readable, not alarming — idle hours are
     the common case, so their fill is softened; running stays full. */
  --cell-running: var(--ok);
  --cell-forming: var(--warn);
  --cell-idle: #e5a19e;
  --cell-nodata: var(--nodata);

  --accent: #2a78d6;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(11, 11, 11, 0.06);
  --shadow-2: 0 4px 16px rgba(11, 11, 11, 0.10);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-pill: 999px;
  --r-cell: 3px;

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               monospace;
  --fs-xs: 0.6875rem;   /* 11 — axis labels, legend */
  --fs-sm: 0.8125rem;   /* 13 — metadata, pills */
  --fs-md: 0.9375rem;   /* 15 — body, tile stats */
  --fs-lg: 1.0625rem;   /* 17 — tile game label */
  --fs-xl: 1.375rem;    /* 22 — page title, headline stat */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #242423;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.22);
    --text: #ffffff;
    --text-muted: #c3c2b7;
    --text-faint: #898781;

    --ok: #0ca30c;
    --ok-text: #23bd23;
    --ok-tint: rgba(12, 163, 12, 0.16);
    --warn: #fab219;
    --warn-text: #fab219;
    --warn-tint: rgba(250, 178, 25, 0.14);
    --down: #d03b3b;
    --down-text: #e66767;
    --down-tint: rgba(208, 59, 59, 0.16);
    --nodata: #383835;
    --nodata-text: #c3c2b7;
    --nodata-tint: rgba(137, 135, 129, 0.14);

    --cell-running: var(--ok);
    --cell-forming: var(--warn);
    --cell-idle: #6e2f2d;
    --cell-nodata: var(--nodata);

    --accent: #3987e5;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.50);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  }
}