/* CLOSED LOOP — "Amber Bench" design tokens.
   Warm precision-instrument lab: graphite panels, phosphor-amber accents. */

:root {
  /* Surfaces */
  --bg: #141216;
  --bg-panel: #1e1a20;
  --bg-raised: #262028;
  --bg-inset: #100e12;
  --hairline: #332d38;
  --hairline-soft: #2a252e;

  /* Ink */
  --ink: #e8e2da;
  --ink-dim: #a89e94;
  --ink-faint: #6e6560;

  /* Brand */
  --amber: #f5a742;
  --amber-soft: #f5a74233;
  --amber-glow: #f5a74266;
  --copper: #c47a52;

  /* Signals (colorblind-spaced) */
  --sig-sp: #f5a742;      /* setpoint — amber, dashed */
  --sig-pv: #5fd4a2;      /* process value — mint */
  --sig-u: #b58ce0;       /* control output — violet */
  --sig-dist: #e8695f;    /* disturbance — coral */
  --sig-p: #6fb7e8;       /* P term */
  --sig-i: #e8b25f;       /* I term */
  --sig-d: #d975c9;       /* D term */

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

  /* 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: 26px;
  --lesson-w: 380px;
  --controls-w: 304px;
}

* { box-sizing: border-box; }

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

::selection { background: var(--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; }

/* 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(--amber); outline-offset: 1px; }

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