/* ============================================================
   FACT ROYALE — DESIGN TOKENS
   The single source of visual truth for every page.

   RULES OF USE
     1. Pages never hardcode a colour, size, duration or curve.
        If a value is not in here, it does not belong in a page.
     2. Add tokens here, not overrides there. An override in one page
        is how a platform ends up looking like five platforms.
     3. Semantic names beat literal ones. Use --fg-muted, not --grey-4,
        so a palette change is one edit rather than a search.

   THIS FILE HOLDS VALUES AND NOTHING ELSE.

   It used to also carry base styles and components -- .btn, .chip, .panel,
   .eyebrow. That was fine while only studio.html loaded it, and became a
   collision the moment the player-facing redesign needed its own .btn and
   .chip with different treatments: two owners for one class name, which is
   the bug this project keeps paying for.

   Split 2026-10-21:
     tokens.css   values. Everyone loads this.
     studio.css   base + components for the internal tools.
     app.css      components for the player-facing site.

   The old note here said style.css kept duplicate copies "during the
   migration". That migration never happened, and no longer needs to:
   style.css is loaded by exactly three pages, all of which the redesign
   replaces, so it is deleted rather than migrated.
   ============================================================ */

:root {
  /* ---- surfaces, dark to light ----------------------------- */
  --bg:            #07070f;   /* page */
  --surface:       #0d0d1a;   /* card on page */
  --surface-2:     #12121f;   /* card on card */
  --surface-3:     #1a1a2b;   /* input, well, pressed state */
  --surface-glass: rgba(18,18,31,0.72);

  /* ---- ink ------------------------------------------------- */
  --fg:            #f2f2fa;
  --fg-muted:      rgba(242,242,250,0.52);
  --fg-subtle:     rgba(242,242,250,0.30);
  --fg-faint:      rgba(242,242,250,0.14);

  /* ---- the brand: gold on near-black ----------------------- */
  --gold:          #d4af37;
  --gold-bright:   #f0c040;
  --gold-deep:     #9a7c22;
  --gold-wash:     rgba(212,175,55,0.10);
  --gold-glow:     rgba(212,175,55,0.22);
  --gold-line:     rgba(212,175,55,0.20);

  --royal:         #5b2a86;   /* the banner purple */

  /* Ink and press state for a gold surface. These travel together with
     --gold, so they live beside it rather than as literals in app.css. */
  --gold-press:    #c2991f;   /* bottom of the primary button gradient */
  --on-gold:       #0a0a12;   /* text on any gold fill */
  --royal-bright:  #8b52c4;
  --royal-wash:    rgba(91,42,134,0.16);

  /* ---- state ----------------------------------------------- */
  --ok:            #34d399;
  --ok-wash:       rgba(52,211,153,0.09);
  --warn:          #f0a92a;
  --warn-wash:     rgba(240,169,42,0.10);
  --bad:           #f87171;
  --bad-wash:      rgba(248,113,113,0.09);

  /* Readable ink for a tinted correct/wrong surface. Plain --fg is too
     bright on these and the state colour itself is too dim. */
  --ok-ink:        #d7fff1;
  --bad-ink:       #ffdcdc;
  --ok-line:       rgba(52,211,153,0.42);
  --bad-line:      rgba(248,113,113,0.38);
  --info:          #4d9de0;
  --info-wash:     rgba(77,157,224,0.09);

  /* ---- review states. These are load-bearing, not decorative:
         the studio colours every question by exactly these. ---- */
  --st-unreviewed: var(--fg-subtle);
  --st-verified:   var(--ok);
  --st-flagged:    var(--warn);
  --st-rejected:   var(--bad);
  --st-retired:    var(--fg-faint);

  /* ---- the five categories --------------------------------- */
  --cat-history:   #e8a020;
  --cat-sports:    #4d9de0;
  --cat-music:     #9b72cf;   /* was --cat-pop. The category is Music/Movies;
                                 'Pop Culture' is a retired name and keeping it
                                 here is how 'Pop Culture' vs 'Music/Movies'
                                 drifted apart and crashed two admin panels. */
  --cat-geography: #1fb5c8;
  --cat-science:   #3dbe7a;
  --cat-default:   #64748b;   /* anything unmapped */

  /* ---- source tiers ---------------------------------------- */
  --tier-primary:   var(--ok);
  --tier-reference: var(--info);
  --tier-secondary: var(--warn);
  --tier-canonical: var(--gold);

  /* ---- lines ----------------------------------------------- */
  --line:          rgba(255,255,255,0.07);
  --line-strong:   rgba(255,255,255,0.13);
  --line-gold:     var(--gold-line);

  /* ---- type ------------------------------------------------ */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* Modular scale, 1.25. Never invent a size between these. */
  --t-xs:   0.72rem;
  --t-sm:   0.82rem;
  --t-base: 0.94rem;
  --t-md:   1.10rem;
  --t-lg:   1.40rem;
  --t-xl:   1.80rem;
  --t-2xl:  2.40rem;
  --t-3xl:  3.20rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.62;

  --tracking-caps: 0.14em;

  /* ---- space. 4px base, no arbitrary values. --------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;

  /* ---- shape ----------------------------------------------- */
  --r-sm:   8px;
  --r:     14px;
  --r-lg:  20px;
  --r-pill: 999px;

  /* ---- depth ----------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-3: 0 18px 48px rgba(0,0,0,0.55);
  --shadow-gold: 0 0 0 1px var(--gold-line), 0 8px 30px var(--gold-glow);

  /* ---- motion.
         One ramp for entrances, one for exits, one for physical
         things that should feel weighted. Pages pick from these. --- */
  --ease-out:  cubic-bezier(0.22, 0.7, 0.3, 1);
  --ease-in:   cubic-bezier(0.6, 0, 0.85, 0.3);
  --ease-body: cubic-bezier(0.5, 0, 0.35, 1);   /* trebuchets, counterweights */
  --ease-snap: cubic-bezier(0.2, 1.4, 0.4, 1);  /* small confident pops */

  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 800ms;

  /* ---- the scene ------------------------------------------
     The castle backdrop's three bands, lightest at the horizon. Kept here
     because the hero, the results screen and the holding page all draw it
     and must agree. */
  --scene-sky:   #090916;
  --scene-mid:   #111120;
  --scene-low:   #15151f;

  --page-width: 1180px;
}