/* THE CONTROL ROOM — "Night Shift" design tokens.
   Dark control-room industrial: cool graphite panels, annunciator amber/red,
   indicator green, phosphor digital readouts. Canvas renderers read these
   tokens via getComputedStyle, so DOM and canvas share one source of truth. */

:root {
  /* Surfaces */
  --bg: #0b0d0f;
  --bg-panel: #14171a;
  --bg-raised: #1b1f24;
  --bg-inset: #060809;
  --hairline: #2a3138;
  --hairline-soft: #21262c;

  /* Ink */
  --ink: #d7dde1;
  --ink-dim: #93a0a8;
  --ink-faint: #5c676e;

  /* Brand */
  --phosphor: #35e07d;         /* indicator green / digital readouts */
  --phosphor-soft: #35e07d2e;
  --phosphor-glow: #35e07d66;
  --annun-amber: #ffb020;      /* annunciator alert */
  --annun-amber-soft: #ffb02033;
  --annun-red: #ff4a3d;        /* trip / danger */
  --annun-red-soft: #ff4a3d33;
  --steel: #7f97a8;            /* cool structural accent */

  /* Signals (colorblind-spaced; chart channels) */
  --sig-power: #35e07d;        /* neutron power — phosphor green */
  --sig-period: #52c7e8;       /* reactor period / SUR — cyan */
  --sig-tavg: #f0a35e;         /* T_avg — warm orange */
  --sig-thot: #e86a5a;         /* T_hot — hot coral */
  --sig-tcold: #6fa8e8;        /* T_cold — cool blue */
  --sig-press: #c9a6f0;        /* pressure — lavender */
  --sig-level: #8fd0b0;        /* levels — sage */
  --sig-rods: #b58ce0;         /* rod reactivity — violet */
  --sig-boron: #6fb7e8;        /* boron reactivity — blue */
  --sig-doppler: #f0c060;      /* fuel temp reactivity — gold */
  --sig-mod: #5fd4c4;          /* moderator reactivity — teal */
  --sig-void: #e880b8;         /* void reactivity — pink */
  --sig-xenon: #9d7ce8;        /* xenon — purple */
  --sig-sm: #c78f5f;           /* samarium — sienna */
  --sig-scen: #e8695f;         /* scenario insertion — coral */
  --sig-dnbr: #f0e05e;         /* DNBR — yellow */

  /* Semantics */
  --good: #35e07d;
  --warn: #ffb020;
  --bad: #ff4a3d;
  --locked: #4a545c;

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

  /* Metrics */
  --radius: 8px;
  --radius-sm: 5px;
  --header-h: 48px;
  --status-h: 28px;
  --lesson-w: 390px;
  --controls-w: 316px;
  --annun-h: 132px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: calc(16px * var(--fs, 1));
  line-height: 1.5;
}

::selection { background: var(--annun-amber-soft); }

button { font-family: inherit; }
code { font-family: var(--mono); font-size: 0.9em; background: var(--bg-inset); padding: 0 4px; border-radius: 3px; }

.num { font-variant-numeric: tabular-nums; }

/* Phosphor digital readout — the signature look of the panels. */
.readout {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--phosphor);
  background: var(--bg-inset);
  border: 1px solid var(--hairline-soft);
  border-radius: 3px;
  padding: 1px 6px;
  text-shadow: 0 0 6px var(--phosphor-glow);
}
.readout.warn { color: var(--annun-amber); text-shadow: 0 0 6px var(--annun-amber-soft); }
.readout.bad  { color: var(--annun-red);  text-shadow: 0 0 6px var(--annun-red-soft); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 5px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Focus visibility */
:focus-visible { outline: 2px solid var(--annun-amber); outline-offset: 1px; }

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