/* THE TUNNEL — design tokens.
   Aesthetic: night-shift aero lab. Deep blue-graphite panels, ice-blue accent
   (the test-section glow), smoke-white flow, signal colors for measured
   quantities. Canvas renderers read these tokens via getComputedStyle —
   CSS is the single source of color truth. */

:root {
  /* Surfaces */
  --bg: #0b0f15;
  --bg-panel: #121824;
  --bg-raised: #1a2230;
  --bg-inset: #070a0f;
  --hairline: #26303f;
  --hairline-soft: #1d2531;

  /* Ink */
  --ink: #e2e8f2;
  --ink-dim: #98a4b6;
  --ink-faint: #5d6878;

  /* Brand */
  --ice: #6cc4ff;
  --ice-soft: #6cc4ff2b;
  --ice-glow: #6cc4ff59;
  --steel: #8fa3c0;

  /* Signals (colorblind-spaced) */
  --sig-flow: #dfe9f5;      /* smoke / freestream */
  --sig-lift: #5fd4a2;      /* lift, good */
  --sig-drag: #e8695f;      /* drag, bad, separation */
  --sig-pressure: #b58ce0;  /* pressure taps */
  --sig-theory: #e8b25f;    /* analytic overlay curves */
  --sig-probe: #6fb7e8;     /* probes / instruments */

  /* Semantics */
  --good: #5fd4a2;
  --warn: #e8b25f;
  --bad: #e8695f;
  --locked: #4c5561;

  /* Provenance tags */
  --tag-measured: #5fd4a2;
  --tag-modeled: #e8b25f;
  --tag-illustrated: #b58ce0;

  /* Type */
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: Consolas, "Cascadia Mono", ui-monospace, monospace;

  /* Metrics */
  --fs: 1;              /* UI font scale — set from Settings (Nuke pattern) */
  --radius: 8px;
  --radius-sm: 5px;
  --header-h: 48px;
  --status-h: 26px;
  --lesson-w: 380px;
  --controls-w: 304px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  /* 16px base matches the Nuke reference app's default (12 pt body text).
     Every stylesheet size is rem-based, so scaling the root via --fs scales
     the whole UI proportionally; canvas-drawn instrument text is exempt. */
  font-size: calc(16px * var(--fs));
  line-height: 1.45;
}

::selection { background: var(--ice-soft); }

:focus-visible { outline: 2px solid var(--ice); outline-offset: 1px; }

button, input, select { font-family: inherit; font-size: inherit; color: inherit; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: var(--ice); }

/* Thin scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The hidden attribute always wins, even over display rules on components. */
[hidden] { display: none !important; }