/* ==========================================================================
   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);

  /* --- Theme channels -----------------------------------------------------
     Bare RGB triplets for the translucent overlays the components mix with
     an alpha of their own (`rgb(var(--fg-rgb) / 0.03)`): the hairlines and
     hover washes, the accent wash, and the panel fills. They flip with the
     theme where a literal white or near-black could not. */
  --fg-rgb: 255 255 255;
  --accent-rgb: 0 242 254;
  --panel-rgb: 15 19 29;
  --panel-2-rgb: 38 42 53;
  --panel-3-rgb: 23 27 38;
  --header-rgb: 10 14 24;

  /* Canvas charts read these (lib/chart.js palette). */
  --chart-grid: rgba(255, 255, 255, 0.05);
  --chart-grid-strong: rgba(255, 255, 255, 0.09);
  --chart-tip-bg: rgba(10, 14, 24, 0.92);
  --chart-cell-label: rgba(255, 255, 255, 0.82);

  color-scheme: dark;

  /* --- 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 — :root[data-theme="light"], set by js/lib/theme.js (the
   operator's choice, or the OS preference under "system").

   Only colour moves: type, spacing and motion stay as above. Surfaces turn
   to cool paper, the neon accents darken until they read on white (cyan
   #0891b2, emerald #059669, amber #d97706, crimson #dc2626), and depth comes
   from soft shadows instead of illuminated strokes.
   ========================================================================== */
:root[data-theme="light"] {
  --bg: #f4f6fa;
  --surface: #f4f6fa;
  --surface-dim: #e8ecf2;
  --surface-bright: #ffffff;
  --surface-lowest: #ffffff;
  --surface-low: #f8fafc;
  --surface-container: #ffffff;
  --surface-high: #eef1f6;
  --surface-highest: #e3e8ef;
  --surface-variant: #e3e8ef;

  --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: #22d3ee;
  --primary-fixed-dim: #0891b2;
  --surface-tint: #0891b2;

  --secondary: #059669;
  --secondary-container: #10b981;
  --on-secondary: #ffffff;
  --on-secondary-container: #064e3b;
  --secondary-fixed: #34d399;

  --tertiary: #9a3412;
  --tertiary-container: #fed7aa;
  --tertiary-dim: #d97706;
  --on-tertiary-container: #7c2d12;

  --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.12);
  --tint-live: rgb(8 145 178 / 0.12);
  --tint-warn: rgb(217 119 6 / 0.14);
  --tint-crit: rgb(220 38 38 / 0.12);
  --tint-info: rgb(2 132 199 / 0.12);

  --glass-1: rgb(255 255 255 / 0.86);
  --glass-2: rgb(248 250 252 / 0.92);
  --glass-3: rgb(255 255 255 / 0.97);
  --stroke: rgb(15 23 42 / 0.09);
  --stroke-strong: rgb(15 23 42 / 0.16);
  --stroke-bevel: rgb(15 23 42 / 0.12);

  --elev-1: 0 1px 3px rgb(15 23 42 / 0.08);
  --elev-2: 0 4px 12px rgb(15 23 42 / 0.10);
  --elev-3: 0 8px 28px -4px rgb(15 23 42 / 0.18);

  --glow-live: 0 0 10px rgb(8 145 178 / 0.22);
  --glow-ok: 0 0 10px rgb(5 150 105 / 0.2);
  --glow-warn: 0 0 10px rgb(217 119 6 / 0.22);
  --glow-crit: 0 0 10px rgb(220 38 38 / 0.25);

  --fg-rgb: 15 23 42;
  --accent-rgb: 8 145 178;
  --panel-rgb: 255 255 255;
  --panel-2-rgb: 241 245 249;
  --panel-3-rgb: 255 255 255;
  --header-rgb: 255 255 255;

  --chart-grid: rgba(15, 23, 42, 0.06);
  --chart-grid-strong: rgba(15, 23, 42, 0.12);
  --chart-tip-bg: rgba(255, 255, 255, 0.96);
  --chart-cell-label: rgba(15, 23, 42, 0.85);

  color-scheme: light;
}

/* 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;
  }
}