/* ==========================================================================
   Cybernetic Telemetry Interface — design tokens
   Ported from the Stitch design system of the same name.

   These are the same values the Stitch export fed to Tailwind, written as
   custom properties instead. The console loads no CSS framework: a runtime
   JIT compiler is a strange thing to ship to a dashboard that must stay
   responsive while decoding thousands of samples a second.
   ========================================================================== */

:root {
  /* --- Surfaces: Tier 0 canvas up through Tier 3 modal glass ------------- */
  --bg: #0f131d;
  --surface: #0f131d;
  --surface-dim: #0f131d;
  --surface-bright: #353944;
  --surface-lowest: #0a0e18;
  --surface-low: #171b26;
  --surface-container: #1c1f2a;
  --surface-high: #262a35;
  --surface-highest: #313540;
  --surface-variant: #313540;

  /* --- Foreground -------------------------------------------------------- */
  --on-surface: #dfe2f1;
  --on-surface-variant: #b9cacb;
  --outline: #849495;
  --outline-variant: #3a494b;
  --inverse-surface: #dfe2f1;
  --inverse-on-surface: #2c303b;

  /* --- Accents ----------------------------------------------------------- */
  --primary: #e0fdff;
  --primary-container: #00f2fe;
  --on-primary: #00373a;
  --on-primary-container: #006a70;
  --primary-fixed: #6ff6ff;
  --primary-fixed-dim: #00dce6;
  --surface-tint: #00dce6;

  --secondary: #4edea3;
  --secondary-container: #00a572;
  --on-secondary: #003824;
  --on-secondary-container: #00311f;
  --secondary-fixed: #6ffbbe;

  --tertiary: #fff5ee;
  --tertiary-container: #ffd3a1;
  --tertiary-dim: #ffb95f;
  --on-tertiary-container: #875400;

  --error: #ffb4ab;
  --error-container: #93000a;
  --on-error: #690005;
  --on-error-container: #ffdad6;

  /* --- Signal palette ----------------------------------------------------
     Calibrated neon for state, per the system's "luminescent signalling"
     tenet: emerald nominal, cyan active stream, amber deviation, crimson
     fault. Kept separate from the surface ramp so a state colour never
     drifts when the chrome is retuned. */
  --signal-ok: #4edea3;
  --signal-live: #00f2fe;
  --signal-warn: #ffb95f;
  --signal-crit: #ef4444;
  --signal-crit-text: #ffb4ab;
  --signal-info: #7dd3fc;
  --signal-idle: #849495;

  /* Translucent fills for chips and badges tinted by severity. */
  --tint-ok: rgb(78 222 163 / 0.12);
  --tint-live: rgb(0 242 254 / 0.12);
  --tint-warn: rgb(255 185 95 / 0.12);
  --tint-crit: rgb(239 68 68 / 0.14);
  --tint-info: rgb(125 211 252 / 0.12);

  /* --- Glass & elevation -------------------------------------------------
     Depth comes from translucent layering and illuminated strokes, never
     from heavy drop shadows. */
  --glass-1: rgb(23 27 38 / 0.78);
  --glass-2: rgb(38 42 53 / 0.85);
  --glass-3: rgb(15 19 29 / 0.95);
  --stroke: rgb(255 255 255 / 0.08);
  --stroke-strong: rgb(255 255 255 / 0.15);
  --stroke-bevel: rgb(255 255 255 / 0.18);
  --blur-1: 12px;
  --blur-2: 16px;
  --blur-3: 20px;

  --elev-1: 0 1px 8px rgb(0 0 0 / 0.28);
  --elev-2: 0 4px 16px rgb(0 0 0 / 0.38);
  --elev-3: 0 8px 32px -4px rgb(0 0 0 / 0.6), 0 0 16px -2px rgb(0 242 254 / 0.15);

  /* Alert luminescence: a container in a bad state carries an outer glow. */
  --glow-live: 0 0 14px rgb(0 242 254 / 0.35);
  --glow-ok: 0 0 12px rgb(78 222 163 / 0.3);
  --glow-warn: 0 0 12px rgb(255 185 95 / 0.3);
  --glow-crit: 0 0 12px rgb(239 68 68 / 0.35);

  /* --- Washes & strokes the components use directly ----------------------
     Named here rather than written inline, so the light theme can retune
     them in one place. */
  --hairline: rgb(255 255 255 / 0.03);
  --zebra: rgb(255 255 255 / 0.012);
  --wash: rgb(255 255 255 / 0.03);
  --row-hover: rgb(0 242 254 / 0.05);
  --row-selected: rgb(0 242 254 / 0.08);
  --stroke-live: rgb(0 242 254 / 0.25);
  --stroke-ok: rgb(78 222 163 / 0.35);
  --stroke-warn: rgb(255 185 95 / 0.42);
  --stroke-crit: rgb(239 68 68 / 0.45);
  --field-bg: rgb(15 19 29 / 0.8);
  --field-stroke: rgb(255 255 255 / 0.12);
  --btn-bg: rgb(38 42 53 / 0.6);
  --bar-bg: rgb(23 27 38 / 0.8);
  --chrome-bg: rgb(10 14 24 / 0.85);
  --scrim: rgb(5 8 14 / 0.6);
  --scrim-strong: rgb(5 8 14 / 0.85);
  --shimmer: rgb(255 255 255 / 0.10);
  --ambient-a: rgb(0 242 254 / 0.10);
  --ambient-b: rgb(78 222 163 / 0.09);
  --ambient-c: rgb(0 242 254 / 0.05);

  /* Canvas: charts read these through getComputedStyle. */
  --chart-grid: rgb(255 255 255 / 0.05);
  --chart-grid-strong: rgb(255 255 255 / 0.09);
  --chart-tip: rgb(10 14 24 / 0.94);
  --chart-node: rgb(15 19 29 / 0.95);

  /* --- Typography --------------------------------------------------------
     Three families with real fallbacks, so a blocked font request degrades
     to the right *kind* of type rather than to Times. */
  --font-headline: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Geist", "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-headline-xl: 40px;   --lh-headline-xl: 48px;
  --fs-headline-lg: 32px;   --lh-headline-lg: 40px;
  --fs-headline-md: 22px;   --lh-headline-md: 28px;
  --fs-headline-sm: 18px;   --lh-headline-sm: 24px;
  --fs-body-lg: 16px;       --lh-body-lg: 24px;
  --fs-body-md: 14px;       --lh-body-md: 20px;
  --fs-body-sm: 12px;       --lh-body-sm: 16px;
  --fs-label-md: 12px;      --lh-label-md: 16px;
  --fs-label-sm: 10px;      --lh-label-sm: 12px;
  --fs-metric: 28px;        --lh-metric: 32px;
  --fs-metric-inline: 14px; --lh-metric-inline: 18px;
  --fs-code: 12px;          --lh-code: 18px;

  /* --- Spacing: strict 4/8px rhythm -------------------------------------- */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 20px;
  --sp-xl: 32px;
  --gutter: 16px;
  --margin: 24px;

  /* --- Radius ------------------------------------------------------------ */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-full: 999px;

  /* --- Structure --------------------------------------------------------- */
  --sidebar-w: 256px;
  --header-h: 64px;
  --row-h: 32px;          /* high-density table row */

  /* --- Motion ------------------------------------------------------------
     Short and flat: an operations console should feel instant, and a long
     ease on a value that updates every second reads as lag. */
  --t-fast: 100ms;
  --t-base: 160ms;
  --t-slow: 260ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Light theme — the default.

   The dark values above stay the reference palette; `data-theme="dark"` on
   <html> keeps them. Everything else gets this ramp. The neon signals are
   pulled down to darker shades of the same hues, because #00f2fe on white is
   unreadable as text — the state colours mean the same thing in both themes.
   ========================================================================== */
:root:not([data-theme="dark"]) {
  color-scheme: light;

  --bg: #f4f6fa;
  --surface: #f4f6fa;
  --surface-dim: #eceff5;
  --surface-bright: #ffffff;
  --surface-lowest: #ffffff;
  --surface-low: #eef1f6;
  --surface-container: #ffffff;
  --surface-high: #e6eaf1;
  --surface-highest: #dbe1ea;
  --surface-variant: #e1e6ee;

  --on-surface: #0f172a;
  --on-surface-variant: #475569;
  --outline: #64748b;
  --outline-variant: #cbd5e1;
  --inverse-surface: #1e293b;
  --inverse-on-surface: #f1f5f9;

  --primary: #0e7490;
  --primary-container: #0891b2;
  --on-primary: #ffffff;
  --on-primary-container: #ffffff;
  --primary-fixed: #0891b2;
  --primary-fixed-dim: #0e7490;
  --surface-tint: #0891b2;

  --secondary: #059669;
  --secondary-container: #047857;
  --on-secondary: #ffffff;
  --on-secondary-container: #ffffff;
  --secondary-fixed: #10b981;

  --tertiary: #78350f;
  --tertiary-container: #fde68a;
  --tertiary-dim: #d97706;
  --on-tertiary-container: #78350f;

  --error: #b91c1c;
  --error-container: #fee2e2;
  --on-error: #ffffff;
  --on-error-container: #7f1d1d;

  --signal-ok: #059669;
  --signal-live: #0891b2;
  --signal-warn: #d97706;
  --signal-crit: #dc2626;
  --signal-crit-text: #b91c1c;
  --signal-info: #0284c7;
  --signal-idle: #64748b;

  --tint-ok: rgb(5 150 105 / 0.10);
  --tint-live: rgb(8 145 178 / 0.10);
  --tint-warn: rgb(217 119 6 / 0.12);
  --tint-crit: rgb(220 38 38 / 0.10);
  --tint-info: rgb(2 132 199 / 0.10);

  --glass-1: rgb(255 255 255 / 0.86);
  --glass-2: rgb(255 255 255 / 0.92);
  --glass-3: rgb(255 255 255 / 0.97);
  --stroke: rgb(15 23 42 / 0.09);
  --stroke-strong: rgb(15 23 42 / 0.15);
  --stroke-bevel: rgb(15 23 42 / 0.10);

  --elev-1: 0 1px 3px rgb(15 23 42 / 0.06);
  --elev-2: 0 4px 12px rgb(15 23 42 / 0.08);
  --elev-3: 0 12px 32px -6px rgb(15 23 42 / 0.18);

  --glow-live: 0 0 0 3px rgb(8 145 178 / 0.15);
  --glow-ok: 0 0 0 3px rgb(5 150 105 / 0.14);
  --glow-warn: 0 0 0 3px rgb(217 119 6 / 0.16);
  --glow-crit: 0 0 0 3px rgb(220 38 38 / 0.16);

  --hairline: rgb(15 23 42 / 0.06);
  --zebra: rgb(15 23 42 / 0.018);
  --wash: rgb(15 23 42 / 0.035);
  --row-hover: rgb(8 145 178 / 0.06);
  --row-selected: rgb(8 145 178 / 0.11);
  --stroke-live: rgb(8 145 178 / 0.35);
  --stroke-ok: rgb(5 150 105 / 0.40);
  --stroke-warn: rgb(217 119 6 / 0.45);
  --stroke-crit: rgb(220 38 38 / 0.45);
  --field-bg: #ffffff;
  --field-stroke: rgb(15 23 42 / 0.16);
  --btn-bg: #ffffff;
  --bar-bg: rgb(255 255 255 / 0.86);
  --chrome-bg: rgb(255 255 255 / 0.88);
  --scrim: rgb(15 23 42 / 0.35);
  --scrim-strong: rgb(15 23 42 / 0.55);
  --shimmer: rgb(15 23 42 / 0.06);
  --ambient-a: rgb(8 145 178 / 0.06);
  --ambient-b: rgb(5 150 105 / 0.05);
  --ambient-c: rgb(8 145 178 / 0.03);

  --chart-grid: rgb(15 23 42 / 0.06);
  --chart-grid-strong: rgb(15 23 42 / 0.11);
  --chart-tip: rgb(255 255 255 / 0.96);
  --chart-node: rgb(255 255 255 / 0.96);
}

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

/* Operators who ask for reduced motion get a still console: the pulses and
   sweeps are decorative, and the data is in the numbers either way. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}