/* wia.wiasoom.com — site theme overlay (2026-10-28, family56 bundle C).
   ORIGINAL = DARK. Two page families, all CSS inline in each HTML (no shared stylesheet):
     A) index.html (#0d1117 / #161b22 / text #c9d1d9 / dim #8b949e / head #f0f6fc)
        convert.html · view.html · handbook.html (#09090b / panels #18181b #1c1c1f #0f0f12 / text #fafafa / dim #a1a1aa #71717a)
        — shared shell: .nav > .nav-inner > .nav-logo + .nav-links + .hamburger, .mobile-menu, .nav-dropdown-menu, .footer
     B) guide.html · easy-guide.html — bare <nav>, :root tokens {--gold --bg --bg2 --text --dim --border (--accent)}
   Nothing below touches the original: every rule is scoped to html[data-theme="light"], which the engine
   (wia-site-theme.template.js build) sets on <html> before first paint. Load this file LAST in <head>, i.e. just
   before </head> after each page's own <style>. `color-scheme` is set by the engine, not here.
   !important appears only where an inline style= or a page script writes inline styles (each line says why).

   Light palette (contrast on #f7f8fb / #fff):
     page #f7f8fb · card #fff · card-2 #f1f5f9 (title bars) · text #0f172a (16:1) · text-2 #334155 (10:1)
     muted #475569 (7.5:1) · faint #64748b (4.7:1) · line #e2e8f0 (decorative only) · line-strong #7b879c (3.6:1, inputs/chips)
     gold small text #854d0e (7.5:1) · gold large/bold #b45309 (4.9:1) · gold FILL stays #E5A100 with dark text (9:1)
     blue #005a9e (6.9:1) · blue-2 #1d4ed8 · green #15803d (5.0:1) · purple #6d28d9 (6.6:1) · red #b91c1c (5.9:1)
     code (prose) #f6f8fa + #1f2328 · GitHub-light token colors (#0550ae key · #0a3069 str · #6e7781 comment · #8250df heading)
   Kept dark on purpose (self-contained terminal mock-ups, see NOTES.md): index .example-window (both of them) and the
   inline <pre style="color:#c9d1d9"> / <span style="color:#7ee687|#8b949e"> inside them. Filled gold buttons
   (.btn-primary .nav-cta .convert-btn .cta-bar-btn .btn-soom .action-btn.primary .step-num) keep their original look.
   Not themed: wia-a11y-toolkit panel, wiabook promo-banner loader output (not site CSS). */

/* ===== tokens ===== */
html[data-theme="light"] {
    /* new tokens for family A (hard-coded pages) */
    --wst-bg: #f7f8fb;
    --wst-card: #fff;
    --wst-card-2: #f1f5f9;
    --wst-text: #0f172a;
    --wst-text-2: #334155;
    --wst-muted: #475569;
    --wst-faint: #64748b;
    --wst-line: #e2e8f0;
    --wst-line-strong: #7b879c;
    --wst-gold: #854d0e;
    --wst-gold-lg: #b45309;
    --wst-gold-tint: rgba(229,161,0,0.10);
    --wst-gold-line: rgba(133,77,14,0.35);
    --wst-blue: #005a9e;
    --wst-green: #15803d;
    --wst-purple: #6d28d9;
    --wst-red: #b91c1c;
    --wst-code-bg: #f6f8fa;
    --wst-code-text: #1f2328;
    --wst-shadow: 0 1px 3px rgba(15,23,42,0.06);
    --wst-shadow-lg: 0 12px 32px rgba(15,23,42,0.14);
    /* family B (guide · easy-guide) :root tokens — overridden here with higher specificity */
    --gold: #854d0e;
    --bg: #f7f8fb;
    --bg2: #f1f5f9;
    --text: #0f172a;
    --dim: #475569;
    --border: #cbd5e1;   /* dividers · table cells · mock keyboard keys only (no inputs on these pages) */
    --accent: #005a9e;
}
html[data-theme="light"] body { background: var(--wst-bg); color: var(--wst-text); }
html[data-theme="light"] ::selection { background: rgba(229,161,0,0.28); }
/* convert/view/handbook set :focus-visible outline #E5A100 (1.9:1 on light) */
html[data-theme="light"] :focus-visible { outline-color: var(--wst-gold); }

/* ===================================================================
   FAMILY A — shared shell (index · convert · view · handbook)
   =================================================================== */
/* index.html lines 1200-1211: a scroll handler writes nav.style.background / borderBottomColor inline → !important */
html[data-theme="light"] .nav {
    background: rgba(255,255,255,0.88) !important;
    border-bottom-color: var(--wst-line) !important;
    box-shadow: 0 1px 0 rgba(15,23,42,0.04);
}
html[data-theme="light"] .nav-logo { color: var(--wst-text); }
html[data-theme="light"] .nav-logo span { color: var(--wst-muted); }
/* .w-mark (gold gradient box, dark "W") stays — 9:1 */
html[data-theme="light"] .nav-links a { color: var(--wst-text-2); }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active { color: var(--wst-gold); }
html[data-theme="light"] .nav-links .nav-cta,
html[data-theme="light"] .nav-links .nav-cta:hover { color: #0d1117; }   /* filled gold pill keeps dark text */
html[data-theme="light"] .nav-dd-btn { color: inherit; }
html[data-theme="light"] .nav-dropdown-menu {
    background: var(--wst-card);
    border-color: var(--wst-line);
    box-shadow: var(--wst-shadow-lg);
}
html[data-theme="light"] .nav-dropdown-menu a { color: var(--wst-text-2); }
html[data-theme="light"] .nav-dropdown-menu a:hover { background: var(--wst-gold-tint); color: var(--wst-gold); }
html[data-theme="light"] .hamburger span { background: var(--wst-text); }
html[data-theme="light"] .mobile-menu { background: rgba(255,255,255,0.98); }
html[data-theme="light"] .mobile-menu a { color: var(--wst-text); border-bottom-color: var(--wst-line); }
html[data-theme="light"] .mobile-menu a:hover { color: var(--wst-gold); }
html[data-theme="light"] .mobile-menu a.nav-cta { color: #0d1117; }
/* "Easy Guide" links in the dropdown and the mobile menu carry style="color:#E5A100" (1.9:1 on white) → !important.
   The same attribute selector also covers index inline gold text (section-desc strong, stat-detail spans, code.mono,
   eco-link EN/KO, market-text) — none of those sit inside the dark example windows. */
html[data-theme="light"] [style*="color:#E5A100"] { color: var(--wst-gold) !important; }
html[data-theme="light"] [style*="color:#58a6ff"] { color: var(--wst-blue) !important; }   /* index feature code.mono ×4 */

/* footer (index: grid · convert/view/handbook: one line) */
html[data-theme="light"] .footer { background: #f1f4f8; border-top-color: var(--wst-line); }
html[data-theme="light"] .footer-text { color: var(--wst-muted); }
html[data-theme="light"] .footer-text a { color: var(--wst-gold); }

/* ===================================================================
   INDEX
   =================================================================== */
/* hero */
html[data-theme="light"] .hero-ext { color: var(--wst-gold-lg); text-shadow: 0 0 60px rgba(229,161,0,0.25); }
html[data-theme="light"] .hero h1 { color: var(--wst-text); }
html[data-theme="light"] .hero-sub { color: var(--wst-muted); }
html[data-theme="light"] .hero-sub strong { color: var(--wst-text); }
html[data-theme="light"] .hero-compat { color: var(--wst-blue); }
html[data-theme="light"] .btn-secondary { color: var(--wst-text); border-color: var(--wst-line-strong); background: var(--wst-card); }
html[data-theme="light"] .btn-secondary:hover { border-color: var(--wst-gold); color: var(--wst-gold); }
html[data-theme="light"] .hero-meta { color: var(--wst-faint); }
html[data-theme="light"] .hero-meta .gold,
html[data-theme="light"] .page-hero h1 .gold,
html[data-theme="light"] .book-meta h1 .gold { color: var(--wst-gold-lg); }

/* section helpers */
html[data-theme="light"] .section-label { color: var(--wst-gold); }
html[data-theme="light"] .section-label::before { background: var(--wst-gold); }
html[data-theme="light"] .section-title { color: var(--wst-text); }
html[data-theme="light"] .section-desc { color: var(--wst-muted); }
/* the alternating darker bands */
html[data-theme="light"] .ba-section,
html[data-theme="light"] .example-section { background: #eef1f6; }

/* venn diagram */
html[data-theme="light"] .vc-1 { background: rgba(0,90,158,0.08); border-color: rgba(0,90,158,0.45); color: var(--wst-blue); }
html[data-theme="light"] .vc-2 { background: rgba(21,128,61,0.08); border-color: rgba(21,128,61,0.45); color: var(--wst-green); }
html[data-theme="light"] .vc-3 { background: rgba(109,40,217,0.08); border-color: rgba(109,40,217,0.4); color: var(--wst-purple); }
html[data-theme="light"] .vc-4 { background: rgba(229,161,0,0.14); border-color: rgba(133,77,14,0.5); color: var(--wst-gold); }
html[data-theme="light"] .venn-center { background: rgba(229,161,0,0.22); border-color: var(--wst-gold-lg); color: var(--wst-gold); }

/* before / after */
html[data-theme="light"] .ba-card { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .ba-card-header { border-bottom-color: var(--wst-line); }
html[data-theme="light"] .ba-before .ba-card-header { color: var(--wst-red); background: rgba(185,28,28,0.06); }
html[data-theme="light"] .ba-after .ba-card-header { color: var(--wst-green); background: rgba(21,128,61,0.07); }
html[data-theme="light"] .ba-step { border-bottom-color: var(--wst-line); }
html[data-theme="light"] .ba-num { color: var(--wst-faint); }
html[data-theme="light"] .ba-before .ba-step-text { color: var(--wst-muted); }
html[data-theme="light"] .ba-after .ba-step-text { color: var(--wst-text); }
html[data-theme="light"] .ba-check { color: var(--wst-green); }

/* stats · features · use cases · ecosystem cards */
html[data-theme="light"] .stat-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .usecase-card,
html[data-theme="light"] .eco-card { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .feature-card:hover,
html[data-theme="light"] .usecase-card:hover,
html[data-theme="light"] .eco-card:hover { border-color: rgba(133,77,14,0.45); }
html[data-theme="light"] .feature-card:hover { box-shadow: var(--wst-shadow-lg); }
html[data-theme="light"] .stat-number { color: var(--wst-gold-lg); }
html[data-theme="light"] .stat-label,
html[data-theme="light"] .feature-card h3,
html[data-theme="light"] .usecase-card h3,
html[data-theme="light"] .eco-card h3 { color: var(--wst-text); }
html[data-theme="light"] .stat-detail,
html[data-theme="light"] .feature-card p,
html[data-theme="light"] .usecase-card p,
html[data-theme="light"] .eco-card p { color: var(--wst-muted); }
html[data-theme="light"] .fi-exec { color: var(--wst-blue); background: rgba(0,90,158,0.10); }
html[data-theme="light"] .fi-verify { color: var(--wst-green); background: rgba(21,128,61,0.10); }
html[data-theme="light"] .fi-ai { color: var(--wst-purple); background: rgba(109,40,217,0.10); }
html[data-theme="light"] .fi-safety { color: var(--wst-red); background: rgba(185,28,28,0.08); }
html[data-theme="light"] .fi-monitor { color: var(--wst-gold); background: rgba(229,161,0,0.14); }
html[data-theme="light"] .fi-comply { color: #1d4ed8; background: rgba(29,78,216,0.10); }
html[data-theme="light"] .eco-link { color: var(--wst-gold); }
/* 4 library eco-cards have style="border-color:rgba(229,161,0,0.3)" — a faint gold edge on white, left as is (decorative) */

/* live example windows (#examples, #ros-example) — KEPT DARK as terminal mock-ups.
   All highlight colors, the inline <pre style="color:#c9d1d9"> and the inline #7ee687/#8b949e comment spans live inside
   these two boxes, so nothing in here needs !important. Only the edge is adjusted so the dark box sits on the light band. */
html[data-theme="light"] .example-window { border-color: #1f2937; box-shadow: 0 16px 40px rgba(15,23,42,0.22); }

/* comparison table */
html[data-theme="light"] .comparison-wrap { border-color: var(--wst-line); background: var(--wst-card); }
html[data-theme="light"] .comparison-table thead { background: var(--wst-card-2); }
html[data-theme="light"] .comparison-table th { color: var(--wst-muted); border-bottom-color: var(--wst-line); }
html[data-theme="light"] .comparison-table th.hl-col { color: var(--wst-gold); }
html[data-theme="light"] .comparison-table td { color: var(--wst-muted); border-bottom-color: var(--wst-line); }
html[data-theme="light"] .comparison-table td:first-child { color: var(--wst-text); }
html[data-theme="light"] .comparison-table tbody tr { background: var(--wst-card); }
html[data-theme="light"] .comparison-table tbody tr:nth-child(even) { background: #f8fafc; }
html[data-theme="light"] .comparison-table tbody tr:hover { background: rgba(229,161,0,0.08); }
html[data-theme="light"] .tbl-yes { color: var(--wst-green); }
html[data-theme="light"] .tbl-no { color: var(--wst-faint); }
html[data-theme="light"] .tbl-partial { color: var(--wst-gold); }
/* .col-wia keeps its own !important gold tint (rgba .05) — reads as a faint highlight on white, fine */

/* market */
html[data-theme="light"] .market-section { background: linear-gradient(180deg, rgba(229,161,0,0.08) 0%, transparent 100%); }
html[data-theme="light"] .market-value { background-image: linear-gradient(135deg, #b45309, #d97706, #b45309); }
html[data-theme="light"] .market-text { color: var(--wst-muted); }

/* index footer grid */
html[data-theme="light"] .footer-brand .footer-name { color: var(--wst-text); }
html[data-theme="light"] .footer-brand p { color: var(--wst-muted); }
html[data-theme="light"] .footer-col h4 { color: var(--wst-muted); }
html[data-theme="light"] .footer-col a { color: var(--wst-muted); }
html[data-theme="light"] .footer-col a:hover { color: var(--wst-gold); }
html[data-theme="light"] .footer-bottom { color: var(--wst-faint); border-top-color: var(--wst-line); }
/* KakaoTalk link in .footer-bottom has style="color:#8b949e" (3.3:1 on #f1f4f8) → !important */
html[data-theme="light"] .footer-bottom a[style*="color:#8b949e"] { color: var(--wst-muted) !important; }

/* ===================================================================
   CONVERT · VIEW · HANDBOOK — shared bits
   =================================================================== */
html[data-theme="light"] .page-hero h1 { color: var(--wst-text); }
html[data-theme="light"] .page-hero p { color: var(--wst-muted); }

/* drop zone (convert: inside the input panel · view: standalone) */
html[data-theme="light"] .drop-zone { border-color: var(--wst-line-strong); background: var(--wst-card); }
html[data-theme="light"] .drop-zone:hover,
html[data-theme="light"] .drop-zone.drag-over { border-color: var(--wst-gold-lg); background: rgba(229,161,0,0.06); }
html[data-theme="light"] .drop-zone.drag-over { box-shadow: 0 0 0 4px rgba(229,161,0,0.18); }
html[data-theme="light"] .drop-zone-text { color: var(--wst-text-2); }
html[data-theme="light"] .drop-zone-hint { color: var(--wst-faint); }
html[data-theme="light"] .drop-zone-or { color: var(--wst-faint); }
html[data-theme="light"] .drop-zone-or::before,
html[data-theme="light"] .drop-zone-or::after { background: var(--wst-line); }

/* gold info bars: convert .file-info · view/handbook .fm-bar */
html[data-theme="light"] .file-info,
html[data-theme="light"] .fm-bar { background: var(--wst-gold-tint); border-color: var(--wst-gold-line); }
html[data-theme="light"] .file-info-name,
html[data-theme="light"] .fm-bar-item strong { color: var(--wst-gold); }
html[data-theme="light"] .file-info-size,
html[data-theme="light"] .fm-bar-item { color: var(--wst-muted); }
html[data-theme="light"] .fm-bar-sep { color: #94a3b8; }
html[data-theme="light"] .file-info-clear,
html[data-theme="light"] .fm-bar-close { color: var(--wst-muted); }
html[data-theme="light"] .file-info-clear:hover,
html[data-theme="light"] .fm-bar-close:hover { color: var(--wst-red); }

/* ===================================================================
   CONVERT — input / output panels
   =================================================================== */
html[data-theme="light"] .security-badge { color: var(--wst-green); background: rgba(21,128,61,0.08); border-color: rgba(21,128,61,0.35); }
html[data-theme="light"] .panel { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .panel-header { background: #f8fafc; border-bottom-color: var(--wst-line); }
html[data-theme="light"] .panel-title { color: var(--wst-text); }
html[data-theme="light"] .panel-title .dot-input { background: var(--wst-blue); }
html[data-theme="light"] .panel-title .dot-output { background: var(--wst-gold-lg); }
/* text inputs — border ≥ #7b879c (3:1) */
html[data-theme="light"] .paste-area,
html[data-theme="light"] .format-select,
html[data-theme="light"] .extra-input { background: var(--wst-card); border-color: var(--wst-line-strong); color: var(--wst-text); }
html[data-theme="light"] .paste-area:focus,
html[data-theme="light"] .format-select:focus,
html[data-theme="light"] .extra-input:focus { border-color: var(--wst-gold-lg); box-shadow: 0 0 0 3px rgba(229,161,0,0.22); }
html[data-theme="light"] .paste-area::placeholder { color: var(--wst-faint); }
html[data-theme="light"] .format-label { color: var(--wst-muted); }
html[data-theme="light"] .format-detected { color: var(--wst-gold); background: rgba(229,161,0,0.14); }
/* .convert-btn (gold gradient, dark text) stays */
html[data-theme="light"] .action-btn { background: var(--wst-card-2); color: var(--wst-text); border-color: var(--wst-line-strong); }
html[data-theme="light"] .action-btn:hover { background: var(--wst-line); border-color: #64748b; }
html[data-theme="light"] .action-btn.primary { background: #E5A100; color: #09090b; border-color: #E5A100; }
html[data-theme="light"] .action-btn.primary:hover { background: #f0b429; }
/* output — prose code block policy: light #f6f8fa + GitHub-light token colors */
html[data-theme="light"] .output-pre { background: var(--wst-code-bg); border-color: var(--wst-line-strong); color: var(--wst-code-text); }
html[data-theme="light"] .output-pre .fm-key { color: #0550ae; }
html[data-theme="light"] .output-pre .fm-str { color: #0a3069; }
html[data-theme="light"] .output-pre .fm-comment { color: #6e7781; }
html[data-theme="light"] .output-pre .fm-heading { color: #8250df; }
html[data-theme="light"] .output-pre .fm-gold { color: var(--wst-gold); }
html[data-theme="light"] .output-pre .fm-green { color: #116329; }
html[data-theme="light"] .empty-state { color: var(--wst-faint); }
html[data-theme="light"] .formats-title { color: var(--wst-muted); }
html[data-theme="light"] .format-tag { background: var(--wst-card); border-color: var(--wst-line-strong); color: var(--wst-text-2); }
html[data-theme="light"] .format-tag:hover { border-color: var(--wst-gold); color: var(--wst-gold); }
html[data-theme="light"] .toast { background: var(--wst-card); border-color: var(--wst-gold-lg); color: var(--wst-gold); box-shadow: var(--wst-shadow-lg); }

/* ===================================================================
   VIEW · HANDBOOK — viewer + rendered .wia content
   =================================================================== */
html[data-theme="light"] .viewer { background: var(--wst-card); border-color: var(--wst-line); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .viewer-titlebar { background: #f8fafc; border-bottom-color: var(--wst-line); }
html[data-theme="light"] .viewer-filename { color: var(--wst-muted); }
html[data-theme="light"] .loading { color: var(--wst-muted); }
html[data-theme="light"] .wia-content h1,
html[data-theme="light"] .wia-content h2,
html[data-theme="light"] .wia-content h3 { color: var(--wst-text); }
html[data-theme="light"] .wia-content h1 { border-bottom-color: var(--wst-line); }
html[data-theme="light"] .wia-content h2 { color: #1e293b; }
html[data-theme="light"] .wia-content h3 { color: var(--wst-text-2); }
html[data-theme="light"] .wia-content p,
html[data-theme="light"] .wia-content ul,
html[data-theme="light"] .wia-content ol { color: var(--wst-text-2); }
html[data-theme="light"] .wia-content strong { color: var(--wst-text); }
html[data-theme="light"] .wia-content em { color: var(--wst-muted); }
html[data-theme="light"] .wia-content a { color: var(--wst-blue); }
html[data-theme="light"] .wia-content blockquote { border-left-color: var(--wst-gold-lg); background: var(--wst-gold-tint); color: var(--wst-text-2); }
/* inline `code` is produced by the renderer (view.html 471 · handbook.html 316) with an inline dark chip → !important */
html[data-theme="light"] .wia-content code[style*="background:#27272a"] { background: #eef2f7 !important; color: var(--wst-gold) !important; }
/* code blocks — light policy */
html[data-theme="light"] .wia-block { background: var(--wst-code-bg); border-color: #d0d7de; }
html[data-theme="light"] .wia-block-header { background: #eef2f7; border-bottom-color: #d0d7de; }
html[data-theme="light"] .wia-block-lang { color: var(--wst-muted); background: rgba(15,23,42,0.06); }
html[data-theme="light"] .wia-block-lang.is-run { color: var(--wst-gold); background: rgba(229,161,0,0.14); }
html[data-theme="light"] .wia-block-lang.is-verify { color: var(--wst-green); background: rgba(21,128,61,0.10); }
html[data-theme="light"] .wia-block-lang.is-ai { color: var(--wst-purple); background: rgba(109,40,217,0.10); }
html[data-theme="light"] .wia-block-lang.is-display { color: #1d4ed8; background: rgba(29,78,216,0.10); }
html[data-theme="light"] .wia-block-code { color: var(--wst-code-text); }
html[data-theme="light"] .run-btn-disabled { color: var(--wst-muted); background: var(--wst-line); }
html[data-theme="light"] .verify-note { color: var(--wst-faint); border-top-color: #d0d7de; }
/* view bottom CTA bar */
html[data-theme="light"] .cta-bar { background: rgba(255,255,255,0.95); border-top-color: var(--wst-gold-line); box-shadow: 0 -4px 16px rgba(15,23,42,0.08); }
html[data-theme="light"] .cta-bar-text { color: var(--wst-text-2); }
html[data-theme="light"] .cta-bar-text strong { color: var(--wst-text); }
/* .cta-bar-btn (gold gradient) stays */

/* handbook book hero */
html[data-theme="light"] .book-cover { box-shadow: 0 20px 50px rgba(15,23,42,0.25), 0 0 0 1px rgba(15,23,42,0.08); }
html[data-theme="light"] .book-meta h1 { color: var(--wst-text); }
html[data-theme="light"] .book-tagline { color: var(--wst-text-2); }
html[data-theme="light"] .book-author { color: var(--wst-muted); }
html[data-theme="light"] .book-badge { color: var(--wst-text-2); background: var(--wst-card); border-color: var(--wst-line-strong); }
html[data-theme="light"] .book-badge.gold { color: var(--wst-gold); border-color: var(--wst-gold-line); background: var(--wst-gold-tint); }
html[data-theme="light"] .lang-toggle { border-color: var(--wst-line-strong); background: var(--wst-card); }
html[data-theme="light"] .lang-toggle button { color: var(--wst-text-2); }
html[data-theme="light"] .lang-toggle button:hover { background: var(--wst-card-2); }
html[data-theme="light"] .lang-toggle button.active { background: #E5A100; color: #09090b; }
html[data-theme="light"] .btn-dl { background: var(--wst-card); border-color: var(--wst-line-strong); color: var(--wst-text); }
html[data-theme="light"] .btn-dl:hover { border-color: var(--wst-gold); color: var(--wst-gold); }
/* .btn-soom (gold gradient) stays */

/* ===================================================================
   FAMILY B — guide.html · easy-guide.html (tokens above do most of it)
   =================================================================== */
/* Both pages wrap all content in body > .container (guide 117-616 · easy-guide 83-~965) and use a class-less <nav>/<footer>;
   bare element rules are scoped to that so they cannot reach family A (index .example-window <pre> must stay dark). */
html[data-theme="light"] nav:not(.nav) { background: rgba(255,255,255,0.95); border-bottom-color: var(--wst-line); box-shadow: 0 1px 0 rgba(15,23,42,0.04); }
/* nav a / nav .logo / nav a:hover follow --dim / --gold; .nav-dropdown-menu is covered in the shared shell block above */
html[data-theme="light"] body > .container > .hero { border-bottom-color: var(--wst-line); }
html[data-theme="light"] body > .container h2 { border-bottom-color: rgba(133,77,14,0.25); }   /* guide h2 has a 2px border; easy-guide h2 none → no effect */
html[data-theme="light"] body > .container > section { border-bottom-color: var(--wst-line); }
/* code — prose policy (light). inline `code` bg/color already follow --bg2/--gold; <pre> gets the GitHub code surface */
html[data-theme="light"] body > .container pre { background: var(--wst-code-bg); border-color: #d0d7de; color: var(--wst-code-text); }
/* guide callouts · tables · examples · TOC */
html[data-theme="light"] .callout { background: var(--wst-gold-tint); }
html[data-theme="light"] .callout.warning { background: rgba(185,28,28,0.06); border-left-color: var(--wst-red); }
html[data-theme="light"] .warning .callout-title { color: var(--wst-red); }
html[data-theme="light"] body > .container th { background: var(--wst-card-2); }
html[data-theme="light"] body > .container td { color: var(--wst-text); }
html[data-theme="light"] .example { border-color: var(--wst-gold-lg); }   /* guide only (index uses .example-window/.example-body) */
html[data-theme="light"] .example-title { background: rgba(229,161,0,0.16); }
html[data-theme="light"] .toc { background: var(--wst-card); box-shadow: var(--wst-shadow); }
/* easy-guide boxes · compare · steps · Q&A */
html[data-theme="light"] .box { background: var(--wst-card); box-shadow: var(--wst-shadow); }
html[data-theme="light"] .box-gold { border-color: var(--wst-gold-line); background: #fffaeb; }
html[data-theme="light"] .compare-left { background: rgba(185,28,28,0.06); border-color: rgba(185,28,28,0.28); }
html[data-theme="light"] .compare-right { background: rgba(21,128,61,0.07); border-color: rgba(21,128,61,0.32); }
/* --gold became #854d0e for text, but the numbered step disc is a FILL with #000 text → keep the original gold fill */
html[data-theme="light"] .step-num { background: #E5A100; color: #000; }
html[data-theme="light"] .qa-a { border-left-color: #94a3b8; }
/* modals (keyboard-modal · dash-modal): overlay rgba(0,0,0,.8) inline — fine on light; the inner box uses var(--bg2)/var(--gold)
   so it turns light by itself. The mock "sh" tab (style="background:#2a4a2a" + white 70%) stays: ≈6:1 on its own green. */
/* inline PASS/FAIL colors (easy-guide ×19, guide ×2): #4ade80 is 1.9:1 and #f87171 2.6:1 on white → !important */
html[data-theme="light"] [style*="color:#4ade80"] { color: var(--wst-green) !important; }
html[data-theme="light"] [style*="color:#f87171"] { color: var(--wst-red) !important; }
/* footer (bare <footer>) — already follows --dim/--gold; restated so it does not depend on token inheritance order */
html[data-theme="light"] footer:not(.footer) { color: var(--wst-muted); }
html[data-theme="light"] footer:not(.footer) a { color: var(--wst-gold); }