/* Forge tokens: one look for every SquadForge page (docs/design/SQUADFORGE-DESIGN-V2.md §1.3–1.7).
   Loaded by index, go, cast, watch and every play/*.html (via play/games.css).
   Pages map their own variable names onto these; new CSS uses these directly. */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Backstage: app shell, phones, menus */
  --f-bg: #0b0b12;
  --f-surface: #15151f;
  --f-surface-2: #1d1d2a;
  --f-line: rgba(255, 255, 255, 0.08);
  --f-line-strong: rgba(255, 255, 255, 0.14);
  --f-ink: #f4f4f8;
  --f-ink-2: #a3a3b8;
  --f-ink-3: #6b6b80; /* placeholders and disabled only, never body text */
  --f-brand: #7c5cff;
  --f-brand-hi: #9a82ff;
  --f-brand-lo: #6342f0;
  --f-brand-tint: rgba(124, 92, 255, 0.16);
  --f-good: #22d3a6;
  --f-warn: #ffd166;
  --f-bad: #ff4d6d;
  --f-live: #ff2d55; /* ON AIR only, never errors */
  --f-twitch: #9146ff; /* Twitch-branded buttons only */

  /* Show: the stage, TV, the Twitch picture */
  --s-bg: #070b16;
  --s-board-top: #1e4f96;
  --s-board-bot: #0f2648;
  --s-tile: #16345f;
  --s-tile-edge: rgba(158, 197, 255, 0.35);
  --s-gold: #f5c16c;
  --s-ink: #ffffff;

  /* Teams: always colour + shape + word */
  --team-circle: #f5c16c;
  --team-square: #7eb6ff;

  /* Type */
  --f-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-12: 12px;
  --t-14: 14px;
  --t-16: 16px;
  --t-18: 18px;
  --t-22: 22px;
  --t-28: 28px;
  --t-36: 36px;

  /* Shape, space, depth */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --e1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 12px rgba(0, 0, 0, 0.35);
  --e2: 0 12px 32px rgba(0, 0, 0, 0.5);
  --glow-brand: 0 8px 24px rgba(124, 92, 255, 0.35);
  --touch: 48px;

  /* Motion */
  --m-fast: 120ms;
  --m-base: 200ms;
  --m-slow: 320ms;
  --m-show: 700ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Numbers that count or tick never wiggle */
.tnum,
[class*="score"],
[class*="timer"],
[class*="bank"],
[id*="score"],
[id*="timer"] {
  font-variant-numeric: tabular-nums;
}

/* One focus ring for keyboards and TV remotes */
:focus-visible {
  outline: 3px solid var(--f-brand-hi);
  outline-offset: 2px;
}

/* One reduced-motion rule for every page: movement becomes a short fade, nothing loops */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }
}