/* ==========================================================================
   Exis tokens. Extracted from the "Operating Theater" v2 design system that
   shipped inside the previous homepage bundle (main @ a6734c7), with rebuild
   changes marked "(rebuild)". Archivo is not self-hosted yet, so the hull
   register falls back to Space Grotesk.
   ========================================================================== */

@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/IBMPlexSans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Serif'; src: url('../fonts/IBMPlexSerif-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* ==========================================================================
   Exis: Color tokens.  "Operating Theater" v2.
   Color is LAW, not accent. Four semantic states borrowed from cockpit CAS +
   emergency triage tags, over an extended protocol-black ground with a real
   neutral ramp for elevation. Governing rule: at most ONE critical element
   per view: red earns meaning through scarcity.
   ========================================================================== */

:root {
  /* ---- Surface / structure (protocol black, extended) ---- */
  --exis-black: #050505;   /* global ground */
  --panel-00: #0a0b0c;     /* base panel */
  --panel-01: #101315;     /* raised panel */
  --panel-02: #171b1e;     /* inset / well */

  /* ---- Neutral ramp (real elevation + hierarchy without accent) ---- */
  --n-20: #2a3034;
  --n-30: #444b50;
  --n-40: #656d72;
  --n-50: #8b9297;
  --n-70: #c9ced2;
  --n-90: #f4f5f6;

  /* ---- Hairlines (light-on-dark alphas) ---- */
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);
  --line-3: rgba(255, 255, 255, 0.30);
  --line-strong: var(--line-2); /* back-compat alias (v1 name) */

  /* ======================================================================
     COLOR LAW: four semantic states. Reference these by MEANING.
     ====================================================================== */
  --critical: #ff0033;     /* WARNING: single most urgent state / primary action. RARE. */
  --critical-ox: #c8102e;  /* oxidized/arterial: for LARGE critical fills (less neon) */
  --caution: #ff8000;      /* CAUTION: in-progress, telemetry, watch, procedural */
  --nominal: #3fd9a4;      /* NOMINAL: the operating-layer signal. (rebuild) Iris mint, was #23d18b */
  --nominal-soft: #8ff0c8; /* (rebuild) lighter tone for secondary pulses */

  /* (rebuild) Brand primary: Iris, chosen 2026-10-28. Logo, primary actions, market signal. */
  --brand: #8a84ff;
  --brand-soft: #b9b5ff;
  --brand-dim: rgba(138, 132, 255, 0.14);
  --advisory: #01ffff;     /* ADVISORY: data, links, secondary telemetry, info */

  /* (v4 r2, 2026-10-29) Secondary palette, built around Iris and mint.
     Jordan: use colour for contrast on key words, actions and nodes; do not overuse.
     All pass 4.5:1 as text on --exis-black. No red. */
  --iris-ink: #0d0b26;     /* text on Iris fills (primary button) */
  --iris-deep: #5f58e6;    /* pressed / hover fill, large shapes only */
  --lilac: #c9c2ff;        /* keyword accent in titles, soft Iris */
  --sky: #86c8ff;          /* data and channel accent, bridges Iris and mint */
  --loam: #e0b07a;         /* warm soil accent, rare: one per view at most */
  --mint-deep: #1f9e74;    /* mint for large fills and node rings */

  /* State washes (bounded fills / chips / glows) */
  --critical-dim: rgba(255, 0, 51, 0.14);
  --caution-dim: rgba(255, 128, 0, 0.14);
  --nominal-dim: rgba(63, 217, 164, 0.12);
  --advisory-dim: rgba(1, 255, 255, 0.12);

  /* ======================================================================
     Semantic aliases: prefer these in component CSS.
     ====================================================================== */
  --bg: var(--exis-black);
  --surface: var(--panel-01);
  --surface-alt: var(--panel-02);
  --surface-base: var(--panel-00);

  --text: var(--n-90);
  --text-muted: var(--n-50);
  --text-dim: var(--n-40);
  --text-strong: #ffffff;

  --accent: var(--critical);          /* back-compat alias → critical */
  --signal: var(--caution);           /* back-compat alias → caution */
  --vl-cool: var(--advisory);         /* back-compat alias → advisory */

  --text-on-accent: #ffffff;
  --status-live: var(--caution);
  --status-active: var(--nominal);    /* "in the green" now uses NOMINAL */
  --exis-positive: var(--nominal);    /* back-compat */

  --vl-accent-alpha: var(--critical-dim);
  --vl-signal-alpha: var(--caution-dim);
  --vl-cool-alpha: var(--advisory-dim);

  /* Ambient ground (rebuild): faint Iris key top-right, faint mint bottom-left. */
  --page-wash:
    radial-gradient(60% 40% at 85% 0%, rgba(138, 132, 255, 0.07), transparent 60%),
    radial-gradient(50% 40% at 8% 100%, rgba(63, 217, 164, 0.05), transparent 60%);
}

/* ==========================================================================
   Exis: Typography tokens.  "Operating Theater" v2.
   The working trio is preserved. v2 adds ONE thing: a HULL display register
   (oversized numerals + short words as graphic elements) for the single loud
   moment per view.
     (brand-v2) IBM Plex Sans 600: display headings. Plex Sans 400 to 600: body.
     IBM Plex Mono: labels and coordinates. Plex Serif italic: rare accents.
     The lines below describe the earlier v2 system.
     Space Grotesk: display headings (tight tracking)
     Archivo Black : HULL register: massive numerals / one-word impact  (NEW)
     Archivo Narrow: condensed alt for hull tension                     (NEW, optional)
     JetBrains Mono: utility / labels / metrics / coordinate tags
     Inter         : body copy
   ========================================================================== */

:root {
  /* --- Families --- */
  --font-display: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* (brand-v2) Plex replaces Space Grotesk */
  --font-accent: 'IBM Plex Serif', Georgia, serif;  /* (brand-v2) italic accents and pull quotes only */
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Weights --- */
  --fw-body: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-display: 600; /* (brand-v2) Plex Sans tops out at 600 here */
  --fw-hull: 900;

  /* --- Display / heading sizes --- */
  --fs-h1: clamp(2.4rem, 7vw, 6rem);
  --fs-h2: clamp(1.5rem, 3.4vw, 2.6rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.5rem);
  --fs-h4: 1.02rem;
  --fs-lead: 1.08rem;
  --fs-body: 1rem;
  --fs-small: 0.9rem;

  /* --- Hull register (oversized numeral / impact) --- */
  --fs-hull: clamp(3.4rem, 14vw, 12rem);
  --fs-hull-mock: clamp(2.6rem, 9vw, 6rem);

  /* --- Mono / label sizes --- */
  --fs-label: 0.72rem;
  --fs-coord: 0.7rem; /* (rebuild) was 0.62rem; raised for legibility */
  --fs-metric: clamp(1.1rem, 2vw, 1.5rem);
  --fs-button: 0.74rem;

  /* --- Line heights --- */
  --lh-display: 1.02;
  --lh-hull: 0.86;
  --lh-body: 1.6;
  --lh-tight: 1.15;

  /* --- Letter spacing --- */
  --ls-h1: -0.022em;
  --ls-h2: -0.025em;
  --ls-hull: -0.045em;
  --ls-label: 0.10em;
  --ls-coord: 0.14em;
  --ls-button: 0.10em;

  /* Hard directional shadow used by the hull register (never soft blur) */
  --hull-shadow: 6px 8px 0 rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   Exis: Spacing, layout & motion tokens.  "Operating Theater" v2.
   Motion feels like an instrument, not a toy: a needle settling, a counter
   ticking, a radar sweeping. Never bouncy or organic. Everything is guarded
   by prefers-reduced-motion in the components.
   (Radii live in effects.css alongside the material spec.)
   ========================================================================== */

:root {
  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.7rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 2rem;
  --space-8: 2.5rem;

  /* --- Layout --- */
  --content-max: 1160px;
  --content-width: min(1160px, 92vw);
  --grid-cols: 12;
  --grid-unit: 64px;

  /* --- Mechanical motion --- */
  /* Snap: state changes settle into a hard detent (slight overshoot) */
  --ease-snap: cubic-bezier(0.16, 1.2, 0.3, 1);
  /* Linear: continuous instruments (radar sweep, tape) */
  --ease-linear: linear;
  /* Settle: needle overshoot + damp */
  --ease-settle: cubic-bezier(0.16, 1.2, 0.3, 1);

  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --dur-sweep: 3600ms;
  --dur-reveal: 600ms;
}

/* ==========================================================================
   Exis: Material & light, elevation, grit.  "Operating Theater" v2.
   Graphic realism = surfaces that feel LIT and PHYSICAL: a single dominant
   light (upper-right, consistent everywhere), hard directional shadow, one
   clean specular edge. Grit reads as the evidence of a working machine, never
   a broken one: monochrome, below the readability threshold, surfaces only.
   Glitch / distress / tearing are BANNED.
   ========================================================================== */

:root {
  /* --- Single dominant light: upper-right, used everywhere --- */
  --keylight: radial-gradient(120% 90% at 88% -10%, rgba(255, 255, 255, 0.07), transparent 55%);
  --specular: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);

  /* --- Shadows --- */
  /* Panel: deep directional drop + faint inset ring */
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  --shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 40px 80px -34px rgba(0, 0, 0, 0.85);
  --shadow-modal: 0 40px 80px -30px rgba(0, 0, 0, 0.85);
  /* Hull register: HARD directional cast, no blur */
  --shadow-hull: 6px 8px 0 rgba(0, 0, 0, 0.55);

  /* --- Surface fills --- */
  --fill-panel: linear-gradient(180deg, var(--panel-01), var(--panel-00));
  --fill-hud: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  --fill-card: linear-gradient(180deg, var(--panel-01), var(--panel-00));
  --fill-inset: var(--panel-02);
  --fill-inset-hover: #1c2125;

  /* --- Accent gradients (color-law aware) --- */
  --grad-critical: linear-gradient(135deg, var(--critical), var(--critical-ox));
  --grad-accent: linear-gradient(135deg, var(--critical), var(--critical-ox)); /* alias */
  --grad-progress: linear-gradient(90deg, var(--caution), var(--critical));    /* gauge fill */
  --grad-temp: linear-gradient(90deg, var(--advisory), var(--caution) 60%, var(--critical)); /* tyre-temp tape */
  --grad-chip-crit: linear-gradient(135deg, rgba(255, 0, 51, 0.22), rgba(255, 0, 51, 0.06));
  --grad-chip-warn: linear-gradient(135deg, rgba(255, 128, 0, 0.2), rgba(255, 128, 0, 0.06));
  --grad-chip-nominal: linear-gradient(135deg, rgba(63, 217, 164, 0.2), rgba(63, 217, 164, 0.06));
  --grad-chip-cool: linear-gradient(135deg, rgba(1, 255, 255, 0.2), rgba(1, 255, 255, 0.06));
  /* back-compat aliases */
  --grad-chip-hot: var(--grad-chip-crit);

  /* --- Backdrop blur (sticky rails + modal overlays) --- */
  --blur-hud: blur(10px) saturate(160%);
  --blur-modal: blur(12px) saturate(150%);

  /* --- Radii --- */
  --radius: 12px;
  --radius-lg: 16px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  /* --- Approved grit vocabulary (monochrome, capped opacity) --- */
  /* Sensor noise: the page ground; also usable on surfaces */
  --grit-sensor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  /* Halftone dots: bounded decal fills only */
  --grit-halftone: radial-gradient(circle at center, var(--n-90) 1.1px, transparent 1.3px);
  --grit-halftone-size: 8px 8px;
  /* Technical hatch: surfaces */
  --grit-hatch: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 7px);

  /* Grit opacity ceiling: never cross into "unpolished" */
  --grit-opacity: 0.05;
  --grit-opacity-max: 0.10;
}