/* ╔══════════════════════════════════════════════════════════════════╗
   ║  WK TOTO V2 — LICHT-THEMA (dyslexie-vriendelijk)                    ║
   ║  Donker = standaard (de :root-waarden per pagina). Licht = deze     ║
   ║  override op html[data-theme="light"]. Alle pagina's delen dezelfde ║
   ║  variabele-namen, dus deze ene set thema't de hele app.             ║
   ║  Warme off-white (geen fel wit), warm-donkere tekst (geen hard      ║
   ║  zwart), rustig comfortabel contrast. Oranje accent behouden.       ║
   ╚══════════════════════════════════════════════════════════════════╝ */
html[data-theme="light"]{
  /* oppervlakken: warme crème, kaarten licht verheven (geen glaring wit) */
  --bg:#f3ece0; --bg2:#e9dfce; --panel:#fcf8f0; --panel2:#f5ecdd;
  --slot:#ece3d2;
  /* accenten: oranje behouden; --o2 dieper zodat prominente oranje TEKST op crème leest,
     maar helder genoeg dat donkere tekst op de avatar/knop-gradient (o2→or) blijft kloppen */
  --or:#ff6a00; --o2:#d2560a; --o3:#e04600;
  --rd:#c81e1e; --gr:#1f9d6b; --bl:#003fa3;
  /* tekst: warm donkerbruin, geen hard zwart; muted-schaal donker i.p.v. licht */
  --tx:#2c2216;
  --mus:rgba(44,34,22,.78); --mu:rgba(44,34,22,.62); --mu2:rgba(44,34,22,.42); --mu3:rgba(44,34,22,.16);
  /* randen: --brd2 was lichte (witte) rand → op licht onzichtbaar, nu donkere tint */
  --brd:rgba(210,86,10,.28); --brd2:rgba(44,34,22,.14); --sur:rgba(255,106,0,.07);
  /* medailles: donkerder zodat ze op crème leesbaar zijn */
  --gold:#b07d1a; --silver:#7c818c; --bronze:#9c6233;
  /* schaduw: zachter en warmer op licht */
  --shadow:0 6px 20px rgba(60,40,15,.14);
}

/* ── Donkere-oppervlak literals die NIET via var() lopen (gedeelde classes) ── */
/* bottom-tabbar (mobiel) / top-bar (desktop): stond hard op rgba(20,12,4,.94) */
html[data-theme="light"] .nav{ background:rgba(252,248,240,.92); }
/* bonus: sticky voortgangsbalk stond op rgba(20,12,4,.92) */
html[data-theme="light"] .prog{ background:rgba(252,248,240,.92); }