/* ============================================================
   LINE CONTROL — design tokens
   Machine-panel palette: deep slate, brushed steel,
   safety-yellow reserved for the blocking state,
   signal green/red for pass/fail. One source of truth for
   both targets (web/ simulation and console/ operator build).
   ============================================================ */

@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- surfaces: deep slate ------------------------------- */
  --slate-950: #0b1014;
  --slate-900: #111820;
  --slate-850: #161f28;
  --slate-800: #1c2731;
  --slate-700: #26333f;

  /* --- brushed steel: text, bezels, seams ------------------ */
  --steel-300: #d8e0e6;
  --steel-400: #b9c4cc;
  --steel-500: #93a1ab;
  --steel-600: #6b7883;
  --steel-700: #48545e;
  --seam: #2b3641;                       /* 1px panel joints */
  --bezel: linear-gradient(180deg, #39434d, #222b33 45%, #2b353f);

  /* --- signals --------------------------------------------- */
  --safety: #f2b705;                     /* blocking state ONLY */
  --safety-dim: #8a6a03;
  --go: #2fbf71;
  --go-dim: #1a5c3c;
  --stop: #e5484d;
  --stop-dim: #6e2326;
  --warn: #e8963c;                       /* WARN checks — distinct from safety */
  --info: #5aa9e6;
  --hazard: repeating-linear-gradient(-45deg,
      var(--safety) 0 10px, var(--slate-950) 10px 20px);

  /* --- glows ------------------------------------------------ */
  --glow-safety: 0 0 0 1px rgba(242, 183, 5, .55), 0 0 18px 2px rgba(242, 183, 5, .28);
  --glow-go:     0 0 0 1px rgba(47, 191, 113, .5), 0 0 14px 1px rgba(47, 191, 113, .25);
  --glow-stop:   0 0 0 1px rgba(229, 72, 77, .55), 0 0 14px 1px rgba(229, 72, 77, .3);

  /* --- type -------------------------------------------------- */
  --font-label: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- spacing ----------------------------------------------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* --- radii / edges ----------------------------------------- */
  --r-1: 3px;
  --r-2: 6px;

  /* --- motion: every duration on the page comes from here ---- */
  --t-1: 120ms;
  --t-2: 240ms;
  --t-3: 480ms;
  --t-4: 900ms;
  --ease-engage: cubic-bezier(.2, .7, .25, 1);
}

/* Reduced motion: zero every duration; state changes still land,
   instantly. The sequencer also collapses its stagger delays. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-1: 0ms; --t-2: 0ms; --t-3: 0ms; --t-4: 0ms; }
}

/* Keyboard focus: high-visibility ring on slate. */
:focus-visible {
  outline: 2px solid var(--safety);
  outline-offset: 2px;
}

::selection {
  background: var(--steel-700);
  color: var(--steel-300);
}