/* ==========================================================================
   TOKENS - "Editorial night" identity (terracotta on warm black, Syne + Cormorant).  Names are a CONTRACT (do not rename/remove; add freely).
   Idea: a TV studio at night. Deep stage-blue, marquee gold, warm paper-white type, saturated team colours.
   ========================================================================== */
:root {
  color-scheme: dark;

  /* ---- stage surfaces (blue-black, never pure black) ---- */
  --bg: #0f0e0e;            /* backstage */
  --bg-raised: #151414;
  --surface: #1a1919;       /* panels */
  --surface-2: #222020;     /* raised / inputs */
  --surface-3: #2a2827;     /* hover / selected */
  --line: rgba(224, 222, 219, .10);        /* warm hairline */
  --line-strong: rgba(224, 222, 219, .22);

  /* ---- type colours (warm paper, not grey) ---- */
  --text: #e0dedb;
  --text-2: #b9b5af;
  --muted: #8d8a86;

  /* ---- brand: marquee gold is THE action colour ---- */
  --accent: #cd5c45;
  --accent-hover: #e0795f;
  --accent-soft: rgba(205, 92, 69, .14);
  --accent-text: #e0795f;
  --on-accent: #0f0e0e;                     /* text on gold */
  --accent-deep: #8f3f2e;                   /* buzzer edge */
  --gold: #cd5c45;  --gold-soft: rgba(205, 92, 69, .14);  --gold-text: #e0795f;

  /* ---- semantic ---- */
  --ok: #5fa77a;    --ok-soft: rgba(95, 167, 122, .14);   --ok-deep: #3f7a55;
  --bad: #d4614e;   --bad-soft: rgba(212, 97, 78, .15);  --bad-deep: #8f3f2e;
  --warn: #c9953f;  --warn-soft: rgba(201, 149, 63, .15);
  --danger-solid: #d93b52;  --danger-solid-hover: #ec5469;

  /* ---- teams (saturated, each with a deep edge for buzzer-style buttons) ---- */
  --team-1: #cd5c45;  --team-2: #4a7fd4;  --team-3: #5fa77a;  --team-4: #9a6af0;
  --team-5: #d98a4a;  --team-6: #4aaab0;  --team-7: #c76aa8;  --team-8: #9bb84a;

  /* ---- type ---- */
  --font-display: "Syne", "Cairo", ui-sans-serif, system-ui, sans-serif;   /* capitals, buttons, labels, tabs, numbers (weights capped at 500) */
  --font-serif: "Cormorant Garamond", "Cairo", Georgia, "Times New Roman", serif;   /* titles, names, questions */
  --font: "Cormorant Garamond", "Cairo", Georgia, "Times New Roman", serif;  /* body */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: .72rem; --fs-sm: .8rem; --fs-base: 1.12rem; --fs-md: 1.25rem; --fs-lg: 1.3rem;
  --fs-xl: 1.75rem; --fs-2xl: 2.5rem; --fs-3xl: clamp(2.75rem, 7vw, 5.5rem); --fs-hero: clamp(3.5rem, 11vw, 9rem);
  --lh: 1.55; --lh-tight: 1.05;
  --stretch-display: 100%;     /* font-stretch for display text: condensed, poster-like */

  /* ---- space (4px scale) ---- */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;

  /* ---- shape: deliberately varied, not one radius for everything ---- */
  --r-sm: 0px;  --r-md: 2px;  --r-lg: 2px;  --r-xl: 4px;  --r-pill: 999px;

  /* ---- depth ---- */
  --shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 32px rgba(0,0,0,.45);
  --shadow-3: 0 1px 0 rgba(255,255,255,.06) inset, 0 28px 70px rgba(0,0,0,.55);
  --shadow-glow: 0 0 0 1px rgba(205, 92, 69,.35), 0 0 36px rgba(205, 92, 69,.28);
  --buzzer-h: 0px;                           /* height of the pressable edge */
  --grad-accent: var(--accent);
  --grad-stage: radial-gradient(120% 70% at 50% -10%, rgba(205, 92, 69,.14) 0%, rgba(205, 92, 69,0) 55%), radial-gradient(90% 60% at 100% 0%, rgba(205, 92, 69,.06) 0%, rgba(205, 92, 69,0) 60%);
  --glow-bg: var(--grad-stage);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .8  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* ---- motion + focus + layout ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms;
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px #e8917c;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px #e8917c;
  --content-w: 1320px; --header-h: 64px; --touch: 44px;

  /* ---- legacy aliases (old markup / inline styles) ---- */
  --panel: var(--surface); --panel2: var(--surface-2); --accent2: var(--accent-hover);
}
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } }