/* ============================================================================
   Factually — Prism shared theme for the content pages
   (about / terms / privacy / contact / learn / *-facts).

   These pages already drive most colours from CSS variables, so this file:
     1. redefines those variable names per scheme (Paper = default), and
     2. flattens the hardcoded dark gradients onto the tokens,
   so every page matches the game and swaps schemes from one place.

   Linked AFTER each page's inline <style> (so token redefs win by source order);
   flatten rules use !important to beat page-specific selector specificity.
   Scheme is synced with the game via localStorage "prism-scheme2" (prism-theme.js).
   Schemes are internal-only for now — switching lives behind the game's ?dev=1 bar.
   ============================================================================ */

/* ---- scheme tokens — :root (no attribute) carries Paper as the no-JS fallback; prism-theme.js
   always sets data-scheme on <html> (default INK, same as the game) ---- */
:root{
  --bg:#f4f1ea; --card:#fbf9f3; --text:#17181d; --muted:#6c6b63; --line:#e2ddd1;
  --gold:#c98a00; --accent:#1a9e73; --over:#1a9e73; --under:#3a6fd0; --good:#1a9e73; --bad:#d63a51;
}
:root[data-scheme="ink"]{
  --bg:#15171c; --card:#1c1f26; --text:#f4f6fa; --muted:#8b93a0; --line:rgba(255,255,255,.12);
  --gold:#ffc24b; --accent:#4bd6a0; --over:#4bd6a0; --under:#79a6ff; --good:#12b981; --bad:#ff5c70;
}
:root[data-scheme="stone"]{
  --bg:#cec8bc; --card:#dcd7cc; --text:#242019; --muted:#6b6454; --line:rgba(0,0,0,.16);
  --gold:#9c6a12; --accent:#1a8f68; --over:#1a8f68; --under:#3a6fd0; --good:#1a8f68; --bad:#c5384c;
}
:root[data-scheme="midnight"]{
  --bg:#1a2130; --card:#232c3e; --text:#eaf0f8; --muted:#9aa6bc; --line:rgba(255,255,255,.12);
  --gold:#ffc24b; --accent:#4bd6a0; --over:#4bd6a0; --under:#79a6ff; --good:#12b981; --bad:#ff5c70;
}

/* ---- flatten the hardcoded dark gradients onto the tokens ---- */
body{background:var(--bg)!important;color:var(--text)}

/* wordmark + headings (were gradient-clipped text).
   Brand = gold F + ink ACTUALLY (the "F, actually" read), matching the game's start screen. */
.brand,header.site .brand{background:none!important;-webkit-text-fill-color:var(--text)!important;color:var(--text)!important}
.brand .f,header.site .brand .f{-webkit-text-fill-color:var(--gold)!important;color:var(--gold)!important}
/* tagline under the brand on every content page (the game's start screen carries its own) */
.brand::after{content:"Know it? Or just think you do.";display:block;margin-top:3px;
  font-size:10.5px;font-weight:600;letter-spacing:.4px;white-space:nowrap;
  color:var(--muted)!important;-webkit-text-fill-color:var(--muted)!important}
h1{background:none!important;-webkit-text-fill-color:var(--text)!important;color:var(--text)!important}
h2{background:none!important;-webkit-text-fill-color:var(--gold)!important;color:var(--gold)!important}
.fact h3,.result h2{color:var(--text)!important}
.pullgame h3{color:var(--gold)!important}

/* body copy / secondary text */
article p,.fact p,.result p{color:var(--text)!important}
.dek,.meta,.closing,.pullgame p,.sub,.alltopics,footer.site .copy{color:var(--muted)!important}

/* cards + numbers */
.fact,.pullgame,.result{background:var(--card)!important;border-color:var(--line)!important}
.fact .num{background:none!important;-webkit-text-fill-color:var(--gold)!important;color:var(--gold)!important}

/* CTA / play buttons (were green/gold gradients) → flat gold */
.playbtn,.cta,a.cta,.play,header.site .play,.pullgame a,.pullgame a.play,.result .play,.result .read{
  background:var(--gold)!important;color:#1a1206!important;box-shadow:none!important}
.soon{background:var(--card)!important;color:var(--muted)!important}

/* button feel — match the game's .btn: same radius everywhere + a real press
   response. The pages had no :active state at all before this, which is the
   "feels different" the game's buttons don't have. */
.playbtn,.cta,a.cta,.play,header.site .play,.pullgame a,.pullgame a.play,.result .play,.result .read{
  border-radius:14px!important;transition:transform .08s}
.playbtn:active,.cta:active,a.cta:active,.play:active,header.site .play:active,
.pullgame a:active,.pullgame a.play:active,.result .play:active,.result .read:active{
  transform:translateY(1px)}

/* wheel hub + pointer (learn.html) — the coloured wheel slices stay as-is */
.hub{background:var(--card)!important;color:var(--gold)!important;box-shadow:0 6px 18px rgba(0,0,0,.25)!important}
.pointer{border-top-color:var(--gold)!important}
