/* 2BIT design tokens (DESIGN_SPEC §2, §7). The only file allowed to hold
   raw colour values; everything else reads these custom properties.

   Hooks other stylesheets rely on:
     body[data-view="floor|launch|cabinets|scores"]  sets --house / --house-lo / --house-wash
     :root[data-calm="1"]  or  prefers-reduced-motion  sets --d-route, --rise, --loop-state
       (use `animation-play-state: var(--loop-state)` on bulbs and blinkers,
        `translateY(var(--rise))` in entrance keyframes)                          */

:root{
  color-scheme: dark;

  /* backgrounds: ultraviolet, never neutral black */
  --bg-void:#07051a;     /* canvas clear, play-overlay scrim base */
  --bg-page:#0c0a22;     /* body */
  --bg-card:#14112e;     /* cards, panel, header (opaque, no blur anywhere) */
  --bg-raise:#1c1842;    /* inner tiles, inputs, hovered rows */
  --bg-screen:#040310;   /* CRT glass behind any game canvas, LED boards */

  /* lines */
  --line-1:#28234f;      /* 1px default card border */
  --line-2:#3b3478;      /* hover, input border, dividers */

  /* text */
  --tx-1:#f1eeff;
  --tx-2:#b9b3e0;
  --tx-3:#958fc2;        /* meta, placeholders; weakest text allowed */
  --tx-ink:#1a0524;      /* text on ANY bright fill; white on fills is banned */

  /* signal hues (UI only, never cabinet colours) */
  --hot:#ff3d9a;   --hot-hi:#ff7dbb;  --hot-lo:#b81f68;  --hot-wash:#ff3d9a1f;   /* action */
  --sel:#2ee6ff;   --sel-lo:#149fb5;  --sel-wash:#2ee6ff1a;                      /* selection, focus */
  --coin:#ffe14d;  --coin-lo:#c29a12; --coin-wash:#ffe14d1a;                     /* money values only */

  /* semantic */
  --up:#3dff8b;  --down:#ff5c6c;  --warn:#ffa63d;
  --live:#5cf2b0;        /* only rendered when DATA_MODE==='live' */
  --demo:#f4ead2;        /* RESERVED: the demo sticker fill. Used nowhere else. */
  --ticket:#e6ecff;      /* thermal paper for the printed score ticket only */

  /* categorical cabinet/game palette (no overlap with signal hues or --demo) */
  --c1:#ff6b57; /* coral  */  --c2:#b6f23c; /* lime   */
  --c3:#a98bff; /* violet */  --c4:#5a9bff; /* blue   */
  --c5:#3ddbb0; /* mint   */  --c6:#ffb07a; /* apricot*/
  --c7:#e07bff; /* orchid */  --c8:#9fb4d9; /* steel  */
  --chrome:#f1eeff;      /* T4 trim (T4 does NOT use coin-yellow) */

  /* house light: one dominant hue per view */
  --house:var(--hot);
  /* body[data-view="cabinets"]{--house:var(--sel)}  body[data-view="scores"]{--house:var(--coin)} */

  /* radii: chunky, no capsules */
  --r-1:4px; --r-2:8px; --r-3:12px; --r-stage:20px; --r-round:999px; /* round = dots + arcade buttons only */

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

  /* shadows */
  --sh-press:0 4px 0 0 var(--hot-lo);
  --sh-press-n:0 4px 0 0 #0a0820;
  --sh-card:0 2px 0 0 #0a0820, 0 18px 40px -22px #000000cc;
  --sh-float:0 24px 60px -18px #040214e6;
  --sh-ticket:0 2px 0 #b9c2e6, 0 10px 24px -12px #000000b3;

  /* glow recipes: STATIC. Painted on a ::after layer; only its opacity animates. */
  --glow-hot:0 0 0 1px #ff3d9a8c, 0 0 18px -2px #ff3d9a8c, 0 0 48px -8px #ff3d9a59;
  --glow-sel:0 0 0 1px #2ee6ff8c, 0 0 18px -2px #2ee6ff80, 0 0 48px -8px #2ee6ff4d;
  --glow-coin:0 0 0 1px #ffe14d80, 0 0 16px -2px #ffe14d73;
  --tglow-hot:0 0 6px #ff3d9abf, 0 0 22px #ff3d9a73;   /* text-shadow: h1 accent word only */
  --tglow-coin:0 0 6px #ffe14d99;                      /* a score while it is increasing */
  --focus:0 0 0 2px var(--bg-page), 0 0 0 4px var(--sel);

  /* layout */
  --header-h:64px; --tabbar-h:60px; --panel-w:404px; --page-max:1520px;
  --marquee-h:152px; --ticker-h:48px;

  /* motion (§7) */
  --e-out:cubic-bezier(.16,.84,.3,1);    /* entrances, panel, sheet */
  --e-inout:cubic-bezier(.65,0,.35,1);   /* roller sign, route fades */
  --e-press:cubic-bezier(.3,0,.5,1);     /* button down */
  --e-step:steps(6,end);                 /* bulbs, blinkers, printer */
  --d-1:90ms; --d-2:160ms; --d-3:320ms; --d-4:520ms; --d-live:1600ms;

  /* ---- shell additions (not in the spec block, derived from it) ---- */

  /* the house light's pressed edge and wash, switched together with --house */
  --house-lo:var(--hot-lo);
  --house-wash:var(--hot-wash);

  /* type families (§3) */
  --f-pix:'Jersey 20', 'Chakra Petch', system-ui, sans-serif;
  --f-ui:'Chakra Petch', system-ui, 'Segoe UI', sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* the dark plastic under every pressed edge (same value as --sh-press-n) */
  --shelf:#0a0820;
  --scrim:#07051aeb;                     /* --bg-void at 92%: modal and play scrims */
  --sh-screen:inset 0 0 0 1px #000000, inset 0 0 22px 0 #000000b3;   /* CRT glass, painted on .screen::after */
  --scanlines:repeating-linear-gradient(to bottom, #00000000 0 2px, #00000047 2px 3px);   /* real screens only */

  /* calm hooks: entrances drop their rise, loops hold their first frame */
  --d-route:var(--d-3);
  --rise:6px;
  --loop-state:running;

  /* stacking (§8 "Bottom stacking" plus the layers above it) */
  --z-header:30; --z-tabbar:40; --z-launchbar:45; --z-sheet:50; --z-play:60;
  --z-modal:70; --z-pop:75; --z-toast:80;

  /* select chevron in --tx-2 */
  --ico-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4h8L6 9z' fill='%23b9b3e0'/%3E%3C/svg%3E");
}

/* one house light per view: pink on Floor and Launch (the default) */
body[data-view="cabinets"]{ --house:var(--sel);  --house-lo:var(--sel-lo);  --house-wash:var(--sel-wash); }
body[data-view="scores"]{   --house:var(--coin); --house-lo:var(--coin-lo); --house-wash:var(--coin-wash); }

@media (max-width: 899px){
  :root{ --header-h:56px; }
}

/* Calm floor: the footer toggle and the OS setting flip the same hooks.
   Per-component overrides live next to each component. */
:root[data-calm="1"]{ --d-route:120ms; --rise:0px; --loop-state:paused; }
@media (prefers-reduced-motion: reduce){
  :root{ --d-route:120ms; --rise:0px; --loop-state:paused; }
}