/* wia360.wiaacademy.com — site theme: LIGHT overlay (2026-10-29, family56 bundle D).
   ORIGINAL look = DARK (inline <style> 79–441 of index.html, :root tokens --bg #0a0e1a … --text #e5e7eb; 87 language
   copies /xx/index.html share the same head). Every rule is scoped to html[data-theme="light"], so with nothing saved
   the page renders exactly as before. color-scheme is set by the engine — not here. Load at the END of <head> (after the
   inline <style>; the engine sets <html data-theme> before first paint). Header nav.nav / footer.footer are static HTML in
   the same file. admin.html (own dark radial style, no language button) is out of scope.
   87 % of the page reads the :root tokens, so the token block does most of the work; the hex spots are listed below.

   Light palette                                               contrast (on #f7f8fb / #fff)
   ─ page --bg #f7f8fb   band --bg-alt #eef1f6   card --card #fff   hairline --border #dfe3ec (decorative)
   ─ CONTROL borders (.lang-switch .btn-ghost .price-btn.secondary) #7b879c = 3.6:1
   ─ text --text #0f172a (16.8 / 17.9)   --text-dim #475569 (7.1 / 7.6)
   ─ indigo --primary #4f46e5 (fills; white on it 6.5)   --primary-light #4338ca (as TEXT 8.4; white on it 8.4)
     --primary-deep #4338ca (.cta-nav fill)   --primary-deeper #3730a3 (hover 10.3)
   ─ amber --accent #f59e0b → #b45309 (eyebrow text 5.5)   --gold #fbbf24 → #854d0e (text 6.9)
     the two GOLD FILLS with #000 text (.report-mock-grade, .price-badge) keep a gold fill #fbbf24 + #1a1300 (11:1)
   ─ ok --success #15803d (5.0)   bad --danger #b91c1c (6.5)
   Kept as-is: .report-mock (already a white→#f3f4f6 card, #111 text), the SVG radar inside it, wiabook promo banner
   (loader.js, self-styled), the language modal card (already white; its #d1d5db item borders are a shared component).
   !important: 1 declaration — footer self-audit caption style="color:#94a3b8" (2.6:1 on the light band). */

/* ===== tokens ===== */
html[data-theme="light"] {
  --bg: #f7f8fb;
  --bg-alt: #eef1f6;
  --card: #ffffff;
  --border: #dfe3ec;
  --primary: #4f46e5;
  --primary-light: #4338ca;      /* used as TEXT (.dim-items, .price-list ::before, .faq-q::after, .hero-badge) and in gradients */
  --primary-deep: #4338ca;
  --primary-deeper: #3730a3;
  --accent: #b45309;
  --gold: #854d0e;
  --text: #0f172a;
  --text-dim: #475569;
  --success: #15803d;
  --danger: #b91c1c;
  --shadow: 0 10px 40px rgba(67, 56, 202, .12);
}
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] ::selection { background: rgba(67, 56, 202, .18); }

/* ===== header nav.nav (fixed, blurred) ===== */
html[data-theme="light"] .nav { background: rgba(255, 255, 255, .88); border-bottom-color: var(--border); box-shadow: 0 1px 12px rgba(15, 23, 42, .06); }
/* .logo-text gradient --primary-light→--gold = #4338ca→#854d0e via tokens; 22px/900 */
html[data-theme="light"] .logo-icon { box-shadow: 0 2px 10px rgba(67, 56, 202, .25); }
/* .nav-links a: --text-dim (7.1:1), hover --text — tokens */
html[data-theme="light"] .lang-switch { background: #fff; border-color: #7b879c; color: var(--text); }
html[data-theme="light"] .lang-switch:hover { background: #eef2ff; border-color: var(--primary-light); color: var(--primary-light); }
/* #langCountBadge inline color:var(--text-dim) follows the token. .cta-nav: --primary-deep fill + #fff (8.4:1), hover --primary-deeper */

/* ===== hero ===== */
html[data-theme="light"] .hero {
  background: radial-gradient(ellipse at top, rgba(79, 70, 229, .12), transparent 70%),
              radial-gradient(ellipse at bottom right, rgba(180, 83, 9, .08), transparent 60%);
}
html[data-theme="light"] .hero::before { background-image: radial-gradient(circle, rgba(67, 56, 202, .10) 1px, transparent 1px); }
html[data-theme="light"] .hero-badge { background: rgba(67, 56, 202, .08); border-color: rgba(67, 56, 202, .30); }
/* h1 gradient was #fff→--primary-light→--gold: white would vanish on a light page */
html[data-theme="light"] .hero h1 { background-image: linear-gradient(135deg, #0f172a 0%, #4338ca 50%, #854d0e 100%); }
html[data-theme="light"] .hero-stat { background: rgba(255, 255, 255, .72); box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
/* .hero-stat-num gradient --primary-light→--gold (clamp 24–36px/900) — tokens */
html[data-theme="light"] .btn-primary { box-shadow: 0 8px 24px rgba(67, 56, 202, .25); }
html[data-theme="light"] .btn-primary:hover { box-shadow: 0 12px 32px rgba(67, 56, 202, .32); }
html[data-theme="light"] .btn-ghost { background: #fff; border-color: #7b879c; }
html[data-theme="light"] .btn-ghost:hover { background: var(--bg-alt); border-color: var(--primary-light); }
html[data-theme="light"] .btn-primary:focus-visible,
html[data-theme="light"] .btn-ghost:focus-visible,
html[data-theme="light"] .cta-nav:focus-visible,
html[data-theme="light"] .price-btn:focus-visible,
html[data-theme="light"] .lang-switch:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }

/* ===== sections ===== */
/* .section-head h2 inherits --text; .eyebrow --accent (#b45309, 13px/700 = 5.5:1); .dims/.report/.faq bands --bg-alt */
html[data-theme="light"] .dim-card { box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
html[data-theme="light"] .dim-card:hover { box-shadow: 0 10px 30px rgba(67, 56, 202, .12); }
/* .dim-letter: gradient at opacity .15 — decorative, tokens */
html[data-theme="light"] .compare-table { box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
html[data-theme="light"] .compare-row.head { background: rgba(67, 56, 202, .08); }
html[data-theme="light"] .compare-row .wia { background: rgba(67, 56, 202, .05); }
/* .compare-row.head .wia: --gold text #854d0e (6.9:1) */

/* report preview: .report-mock is already a white card (#fff→#f3f4f6, color #111, #555 rows, #ddd dashes) — kept;
   only its glow and the surrounding list */
html[data-theme="light"] .report-mock { box-shadow: 0 30px 80px rgba(67, 56, 202, .14); border: 1px solid var(--border); }
html[data-theme="light"] .report-mock-grade { background: #fbbf24; color: #1a1300; }   /* was var(--gold)+#000 — #000 on #854d0e would be 3.3:1 */
/* .report-features li border --border; ::before --success; strong --gold — tokens */

/* pricing */
html[data-theme="light"] .price-card { box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
html[data-theme="light"] .price-card.featured { background: linear-gradient(180deg, rgba(67, 56, 202, .06), var(--card)); }
html[data-theme="light"] .price-badge { background: #fbbf24; color: #1a1300; }         /* same reason as .report-mock-grade */
/* .price-btn: --primary fill + #fff (6.5:1), hover --primary-light (8.4:1) — tokens */
html[data-theme="light"] .price-btn.secondary { background: #fff; border-color: #7b879c; }
html[data-theme="light"] .price-btn.secondary:hover { background: var(--bg-alt); color: var(--text); border-color: var(--primary-light); }

/* faq */
html[data-theme="light"] .faq-item { box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
/* .faq-q::after '+' --primary-light; .faq-a --text-dim — tokens */

/* final CTA: h2 gradient was #fff→--gold */
html[data-theme="light"] .final { background: radial-gradient(ellipse at center, rgba(79, 70, 229, .12), transparent 70%); }
html[data-theme="light"] .final h2 { background-image: linear-gradient(135deg, #0f172a, #854d0e); }

/* ===== footer (--bg-alt band, --text-dim text, --border top — tokens) ===== */
html[data-theme="light"] .footer-links a:hover { color: var(--primary-light); }
/* self-audit caption: inline style="color:#94a3b8" is 2.6:1 on #eef1f6 → inline, !important */
html[data-theme="light"] .footer [style*="color:#94a3b8"] { color: var(--text-dim) !important; }

/* ===== floating CTA / promo banner / language modal overlay ===== */
html[data-theme="light"] .floating-cta { box-shadow: 0 10px 30px rgba(67, 56, 202, .28); }
html[data-theme="light"] .wia-promo-banner-region { border-top: 1px solid var(--border); }
/* #wiaNavLangModal (assets/language-modal.js): white card already; the black overlay is slightly lighter on a light page */
html[data-theme="light"] #wiaNavLangModal { background: rgba(15, 23, 42, .72); }