/* ============================================================================
   PlayAlong design tokens — v2 "Buzzer / Orange" (BL-904 round 3, 2026-08-02)
   SOURCE OF TRUTH for the interface rebuild. Deployed as
   assets/css/pa-tokens_<ver>.css and linked by buildEpisode (pageManagement.mjs)
   and buildChannel (q4.mjs) BEFORE the theme sheet, so every var(--pa-*) resolves.
   Validate any edit with:
     node scripts/validate-tokens.mjs
     node scripts/palette-cvd-check.mjs
   Doc + migration map: docs/plans/DESIGN-TOKENS-2026-07-29.md
   Palette history + review mechanism: docs/redesign/PALETTES-2026-08-02.md

   WHY THIS PALETTE (Keith, 2026-08-02): the v1 palette read as AI-generated. It
   carried BOTH well-known defaults at once — the ubiquitous warm cream light
   surface (--pa-bone #f2ede3 ≈ #F4F1EA) and a near-black ground under a single
   warm amber accent (--pa-ink #101722 + --pa-gold #f5b942). v2 moves off both:
     ground   #0b1633  staging cobalt (saturated, not near-black)
     card     #f7f9fc  studio near-white (cool, not cream)
     emphasis #ff6a00  signal orange
   Orange won the cross-genre grid because it reads identically on horror,
   western, romance, live/news and mid-game surfaces — it is scoreboard/broadcast
   coded and belongs to no film genre, which magenta (the round-1 pick) did not.

   The v1 palette is retained as a review control at
   frontend/css/palettes/pa-palette-legacy.css → ?_palette=legacy on dev.
   ==========================================================================*/
:root {
  /* ---- Neutral surfaces (dark world) ---- */
  --pa-ink:      #0b1633;  /* page ground — staging cobalt */
  --pa-velvet:   #142146;
  --pa-card:     #1d2f60;
  --pa-rail:     #16244c;
  --pa-line:     #2b3f79;
  --pa-bone:     #f7f9fc;  /* THE light surface: studio card, cool bright */
  --pa-white:    #ffffff;

  /* ---- Text on dark ---- */
  --pa-text-hi:  #eef3ff;
  --pa-text-dim: #a5b4d6;
  --pa-text-faint:#92a1c4;

  /* ---- Text on light (bone/white) ---- */
  --pa-ink-text: #171b2a;

  /* ---- Brand + primary accent ---- */
  --pa-gold:        #ff6a00;  /* THE accent: signal orange — CTA bg, rail stats, chips */
  --pa-on-gold:     #2c0e00;
  --pa-red:         #ff5c4a;
  --pa-red-button:  #c81f3d;
  --pa-focus:       #ff6a00;

  /* ---- Semantic ---- */
  --pa-positive:       #2fd07a;
  --pa-positive-light: #12703f;
  --pa-live:           #2fd07a;
  --pa-danger-light:   #ab1f2f;

  /* ---- Widget-type accent family ---- */
  --pa-acc-trivia-dark:  #ff7183;   --pa-acc-trivia-light:  #700200;
  --pa-acc-info-dark:    #63fd8f;   --pa-acc-info-light:    #247b49;
  --pa-acc-poll-dark:    #7fb3e1;   --pa-acc-poll-light:    #2d67b4;
  --pa-acc-guess-dark:   #ab6dfd;   --pa-acc-guess-light:   #36049a;
  --pa-acc-upload-dark:  #9bf8e5;   --pa-acc-upload-light:  #115f5f;
  --pa-acc-record-dark:  #fc9a2c;   --pa-acc-record-light:  #a05c08;

  /* ---- Typography (identical across all candidates — this round isolates colour) ---- */
  --pa-font-ui:      Poppins, "Segoe UI", system-ui, -apple-system, sans-serif;
  --pa-font-display: "Arial Black", "Segoe UI Black", "Arial Bold", sans-serif;
  --pa-fs-2xs: 11px;
  --pa-fs-xs:  12px;
  --pa-fs-sm:  13.5px;
  --pa-fs-md:  15px;
  --pa-fs-lg:  17px;
  --pa-fs-xl:  20px;
  --pa-fs-2xl: 26px;
  --pa-fs-hero: clamp(56px, 18vw, 88px);
  --pa-lh-tight: 1.15;
  --pa-lh-std:   1.3;
  --pa-lh-loose: 1.45;
  --pa-ls-caps:  .14em;

  /* ---- Spacing (4px base) ---- */
  --pa-sp-1: 4px;
  --pa-sp-2: 8px;
  --pa-sp-3: 12px;
  --pa-sp-4: 16px;
  --pa-sp-5: 24px;
  --pa-sp-6: 32px;

  /* ---- Radii ---- */
  --pa-r-card: 14px;
  --pa-r-ctl:  10px;
  --pa-r-pill: 999px;
  --pa-r-sheet: 18px;

  /* ---- Elevation (cobalt-tinted — black shadows go muddy on a coloured ground) ---- */
  --pa-elev-1: 0 2px 8px rgba(2,8,26,.46);
  --pa-elev-2: 0 10px 26px rgba(2,8,26,.68);
  --pa-elev-3: 0 30px 80px rgba(2,8,26,.70);

  /* ---- Motion ---- */
  --pa-t-fast: 140ms;
  --pa-t-std:  280ms;
  --pa-ease:   cubic-bezier(.2, .7, .3, 1);
  --pa-t-chase: 800ms;

  /* ---- Z-layers ---- */
  --pa-z-stage:       1;
  --pa-z-region:      5;
  --pa-z-rail:        10;
  --pa-z-strip:       15;
  --pa-z-scrim:       35;
  --pa-z-sheet:       40;
  --pa-z-celebrate:   50;
  --pa-z-modal:       60;

  /* ---- Layout constants ---- */
  --pa-rail-h: 56px;
  --pa-stage-band-h: 92px;
  --pa-touch-min: 44px;
}

.pa-num  { font-variant-numeric: tabular-nums; }
.pa-disp { font-family: var(--pa-font-display); letter-spacing: .01em; }
.pa-caps { text-transform: uppercase; letter-spacing: var(--pa-ls-caps); }

@media (prefers-reduced-motion: reduce) {
  :root { --pa-t-fast: 0ms; --pa-t-std: 0ms; --pa-t-chase: 0ms; }
}