/* ─────────────────────────────────────────────────────────────────────────────
   Design system — TOKENS (named values). Source of truth: ~/Projects/designer/system/
   Consumers vendor a copy (see sync.sh): infra/pulse, Wind Dashboard.
   Rule: no colour, font, radius, spacing, shadow or z-index is typed anywhere
   else — every rule in every app says var(--…). This file holds the base
   scales and the default THEME "pulse-inspired" (dark, with light MODE under
   [data-theme="light"]). Other themes are token sets in themes/*.css,
   activated with data-ds="<theme>" on <html>; mode stays independent.
   Base palette and series colours come from Pulse (validated on --panel, dark).
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #08070d;            /* page */
  --panel: #0f0e16;         /* cards, bars, sheets */
  --panel-2: #14131d;       /* raised / hover / selected */
  --line: #1f1d2b;          /* borders */
  --line-2: #2a2838;        /* stronger borders, focus rings on panels */
  --glass: color-mix(in srgb, var(--panel) 90%, transparent);   /* floating panels over the map */
  --glass-blur: 10px;

  /* Ink */
  --ink: #e8e6f0;           /* primary text */
  --ink-2: #a8a5b8;         /* secondary text */
  --muted: #716e82;         /* labels, hints, disabled */

  /* Interface accent — selection, cursor, primary action. Never a data colour. */
  --accent: #8b5cf6;
  --accent-2: #a78bfa;      /* links, hover */
  --accent-ink: #ffffff;    /* text on accent */
  --accent-glow: color-mix(in srgb, var(--accent) 25%, transparent);

  /* Status — always paired with a word or a shape, never colour alone */
  --good: #0ca30c;
  --warn: #fab219;
  --serious: #ec835a;
  --bad: #d03b3b;
  --info: #3987e5;
  /* Status as small text on dark surfaces (pills, notes): lighter tints that keep ≥4.5:1 */
  --good-ink: #7ad17a; --warn-ink: #f5cf6a; --serious-ink: #f5a98a; --bad-ink: #f09090; --info-ink: #8ab8f0;

  /* Semantic aliases (wind app). DERIVED tokens (these, --glass, --accent-glow,
     --ring, --scrim) resolve where they are declared, so every theme block
     re-declares them — otherwise a theme set on <body> keeps the dark values. */
  --go: var(--good);
  --marginal: var(--warn);
  --nogo: var(--bad);
  --unknown: var(--muted);
  --stale: var(--serious);  /* data older than its refresh interval */
  --stale-ink: var(--serious-ink);

  /* Series — categorical data colours (dataviz reference palette) */
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;

  /* Type */
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs: 13.5px; --fs-md: 15px; --fs-lg: 20px; --fs-xl: 24px;
  --lh: 1.45;
  --tracking-label: .05em;  /* uppercase labels */

  /* Shape */
  --r: 10px; --r-sm: 6px; --r-pill: 999px;

  /* Space (4-pt scale) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --tap: 44px;              /* minimum touch target (hit area; the visible control may be smaller) */
  --ctl-h: 34px;            /* visible height of buttons, selects, inputs (40px on touch screens, see parts) */
  --top-h: 48px;            /* app header */
  --gutter: 16px;           /* side padding */

  /* Elevation */
  --shadow: 0 2px 12px rgba(0, 0, 0, .35);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);
  --ring: 0 0 0 1px var(--line-2);
  --scrim: rgba(0, 0, 0, .55);   /* behind modals */

  /* Motion */
  --t-fast: 120ms; --t: 200ms; --t-slow: 320ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Layers — one scale for every app; the map is 0 */
  --z-map: 0; --z-overlay: 800; --z-bar: 1000; --z-float: 1100; --z-popup: 1200; --z-modal: 1300;

  /* Safe areas (notch, home indicator) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Light mode — same names, re-pointed. Set data-theme on <html> or <body>. */
:root[data-theme="light"], body[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f2f8;
  --panel: #ffffff;
  --panel-2: #f5f4fa;
  --line: #e4e2ed;
  --line-2: #cdcada;
  --glass: color-mix(in srgb, var(--panel) 86%, transparent);
  --ink: #17161f;
  --ink-2: #4b4860;
  --muted: #7a7790;
  --accent: #6d4ae0;
  --accent-2: #5b3fd6;
  --accent-ink: #ffffff;
  --good: #0f8a14;
  --warn: #a86d05;
  --serious: #c05a2a;
  --bad: #c22f2f;
  --info: #2a6fc9;
  --good-ink: var(--good); --warn-ink: var(--warn); --serious-ink: var(--serious); --bad-ink: var(--bad); --info-ink: var(--info);
  --shadow: 0 2px 12px rgba(20, 16, 40, .14);
  --shadow-lg: 0 8px 32px rgba(20, 16, 40, .22);
  --scrim: rgba(20, 16, 40, .4);
  /* derived tokens, re-declared so they follow this theme wherever it is set */
  --accent-glow: color-mix(in srgb, var(--accent) 25%, transparent);
  --ring: 0 0 0 1px var(--line-2);
  --go: var(--good); --marginal: var(--warn); --nogo: var(--bad); --unknown: var(--muted);
  --stale: var(--serious); --stale-ink: var(--serious-ink);
}

/* Reduced motion: keep state changes, drop the animation */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}