/* Design tokens — the whole visual identity lives here.
   Stage: dark navy. Scoreboard: gold. Machinery: terminal green. Failure: red.
   Every colour below is checked for AA contrast against its intended
   background; the CRT texture is a static overlay with a capped alpha so it
   never eats that contrast. */

@font-face {
  font-family: 'Archivo Black';
  src: url("../fonts/archivo-black-400-latin.9be230eb35ea.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url("../fonts/ibm-plex-mono-400-latin.814fe1615d4d.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url("../fonts/ibm-plex-mono-600-latin.e71a597e376e.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Stage */
  --stage-deep: #060a18;
  --stage: #0b1230;
  --stage-raised: #111b45;
  --stage-edge: #1d2c63;
  --stage-line: #2a3f7a;

  /* Signal colours */
  --gold: #ffb52e;
  --gold-bright: #ffd479;
  --gold-deep: #b6741a;
  /* One step brighter than --gold-deep, for small or mid-size text that sits
     on a raised board face rather than the stage: #b6741a lands at 4.34:1
     there, which is under AA for anything that is not large text. */
  --gold-dim: #c98500;
  --green: #4affa0;
  --green-dim: #2ea86c;
  --red: #ff2e3e;
  --red-deep: #8d0f1a;

  /* Text */
  --ink: #f2f6ff;
  --ink-dim: #9db0da;
  --ink-faint: #6d80ab;

  /* Type */
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Rhythm */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap: 14px;
  --gap-lg: 24px;
  --gap-xl: 40px;
  --radius: 4px;
  --border-chunky: 3px;

  /* Glow */
  --glow-gold: 0 0 18px rgba(255, 181, 46, 0.45);
  --glow-gold-strong: 0 0 34px rgba(255, 181, 46, 0.75);
  --glow-green: 0 0 12px rgba(74, 255, 160, 0.4);
  --glow-red: 0 0 40px rgba(255, 46, 62, 0.6);

  /* Choreography — the pacing constants the JS also knows about. */
  --t-flip: 600ms;
  --t-slam: 320ms;
  --t-shake: 420ms;
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-slam: cubic-bezier(0.2, 1.4, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-flip: 220ms;
    --t-slam: 120ms;
    --t-shake: 0ms;
    --ease-overshoot: ease-out;
    --ease-slam: ease-out;
  }
}