/* wiatalk.com — site theme: DARK overlay (2026-10-29, family56 bundle D).
   ORIGINAL look = LIGHT (css/main.css 699 lines, :root tokens — body white / text --gray-900 #111827). main.css is NOT
   changed. Load this file LAST in <head> (after css/main.css; copies /<lang>/index.html must use the ABSOLUTE path
   /css/site-theme.css — the copies' relative "css/main.css" already 404s, see NOTES ④), with the wia-site-theme engine
   setting <html data-theme="light|dark"> before first paint. Every rule below is scoped to html[data-theme="dark"],
   so with nothing saved the page renders exactly as before (0 px difference). color-scheme is set by the engine — not here.

   Pages sharing main.css: index.html + 87 language copies /<lang>/index.html (same markup: nav.navbar · mobile drawer ·
   hero · impact · features · how-it-works · more-features · philosophy · footer). demo/ learn/ ai-connect/ practice/
   wiatalk-gemini/server have NO navbar and their own inline CSS → out of scope (they only follow the cookie).

   Dark palette (ratios measured against page #0b0d12 / card #14161f):
   ┌──────────────────┬──────────┬──────────────────────────────────────────────────────────────────┐
   │ page bg          │ #0b0d12  │ body, hero base                                                  │
   │ band             │ #10121a  │ --gray-50 sections (features, more-features)                     │
   │ card             │ #14161f  │ feature/more cards, drawer, modal card, navbar 92 %              │
   │ card tint        │ #1a2238→#14161f │ replaces --gradient-hero on impact/workflow cards           │
   │ text             │ #e9ecf2  │ 16.4:1 page · 15.2:1 card   (--gray-900)                         │
   │ text-2           │ #b8c0d0  │ 10.6:1 · 9.9:1              (--gray-700: nav links, descriptions)│
   │ text-muted       │ #a3abbd  │  8.4:1 · 7.8:1                                                   │
   │ line             │ #2a2d3d  │ hairline (decorative only — --gray-200)                          │
   │ control border   │ #6b7389  │ 4.1:1 page · 3.8:1 card   (--gray-300: lang button, modal items) │
   │ primary (blue)   │ #7fa8ff  │ 8.3:1 · 7.7:1  (was #2563EB = 3.1:1 on dark)                     │
   │ primary-dark     │ #b4caff  │ 11.9:1 — feature-link hover                                      │
   │ primary-light    │ #93c5fd  │ 10.8:1 — footer link hover                                       │
   │ secondary        │ #34d399  │ 10.1:1 — ✓ list marks                                            │
   │ accent (amber)   │ #fbbf24  │ 11.6:1 — hero 弘益人間                                            │
   │ blue CTA fill    │ #2563EB→#3B82F6 kept (white 5.2:1 / 3.7:1, 18px semibold = large text)      │
   │ green CTA fill   │ #047857→#059669 (white 5.5:1 / 3.8:1; original #10B981 was 2.5:1)           │
   │ philosophy band  │ #1e3a8a→#1e40af (white 10.4:1 / 8.7:1)                                      │
   │ footer           │ #07080c  │ text #b8c0d0 11.0:1, caption #94a3b8 7.8:1                       │
   └──────────────────┴──────────┴──────────────────────────────────────────────────────────────────┘
   !important: NONE. The only inline style in the shell — the language button #wiatalk-lang-btn — is written with
   var(--gray-300)/var(--gray-700)/var(--primary) (also in its onmouseover/onmouseout handlers), so re-defining those
   tokens below recolours it without touching the inline declaration. */

/* ===== tokens (main.css :root) ===== */
html[data-theme="dark"] {
  --primary: #7fa8ff;            /* nav title, nav hover, feature-link, workflow arrow, lang-button hover (inline var) */
  --primary-dark: #b4caff;       /* feature-link:hover */
  --primary-light: #93c5fd;      /* footer link hover */
  --secondary: #34d399;          /* ✓ bullets */
  --secondary-dark: #10b981;
  --secondary-light: #6ee7b7;
  --accent: #fbbf24;             /* hero-philosophy */
  --accent-dark: #f59e0b;
  --accent-light: #fcd34d;
  --gray-50: #10121a;            /* section bands */
  --gray-100: #171a24;
  --gray-200: #2a2d3d;           /* hairlines */
  --gray-300: #6b7389;           /* lang-button border (inline var) ≥ 3.8:1 on card */
  --gray-700: #b8c0d0;           /* secondary text: nav links, descriptions, lang-button text */
  --gray-800: #d6dbe6;           /* impact-label */
  --gray-900: #e9ecf2;           /* body text, titles  (NB: .footer uses it as BACKGROUND → re-pinned below) */
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;
  --info: #93c5fd;
  --gradient-hero: linear-gradient(135deg, #1a2238 0%, #161b2c 50%, #14161f 100%);  /* impact/workflow cards */
  --gradient-secondary: linear-gradient(135deg, #047857 0%, #059669 100%);         /* .btn-secondary, white text ≥ 3.8:1 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, .55);
  --shadow-lg: 0 10px 18px -3px rgba(0, 0, 0, .6);
  --shadow-xl: 0 20px 28px -5px rgba(0, 0, 0, .65);
  /* overlay-only tokens */
  --t-bg: #0b0d12;
  --t-card: #14161f;
  --t-text: #e9ecf2;
  --t-muted: #a3abbd;
  --t-line: #2a2d3d;
  --t-ctrl: #6b7389;
}
html[data-theme="dark"] body { background: var(--t-bg); color: var(--t-text); }
html[data-theme="dark"] ::selection { background: rgba(127, 168, 255, .28); }

/* ===== navbar (fixed, rgba white 95 % + blur) ===== */
html[data-theme="dark"] .navbar {
  background: rgba(11, 13, 18, .92);
  box-shadow: 0 1px 0 var(--t-line), 0 1px 2px rgba(0, 0, 0, .5);
}
/* main.js swaps navbar.style.boxShadow on scroll (inline, rgba black .05/.1) — both are near-invisible on dark, harmless;
   the 1px hairline above is lost while scrolled, which is acceptable (navbar bg vs page bg still differs). */
html[data-theme="dark"] .nav-title { color: var(--primary); }
html[data-theme="dark"] .nav-links a { color: var(--gray-700); }
html[data-theme="dark"] .nav-links a:hover { color: var(--primary); }
html[data-theme="dark"] .nav-links a:focus-visible,
html[data-theme="dark"] .mobile-nav-drawer a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
/* language button: inline style reads var(--gray-300)/var(--gray-700) → tokens above do the work. Add a faint fill so the
   round control reads as a button on the dark bar (background:none inline is transparent, our rule can't beat it — the
   fill below therefore sits on the wrapper-less button via box-shadow inset, which inline style does NOT declare). */
html[data-theme="dark"] #wiatalk-lang-btn { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, .04); }
/* logo wia_logo.png: blue/white glyph on transparent — reads fine on dark, no filter */

/* ===== mobile menu (≤768px) ===== */
html[data-theme="dark"] .mobile-menu-btn span { background: var(--t-text); }
html[data-theme="dark"] .mobile-nav-overlay { background: rgba(0, 0, 0, .65); }
html[data-theme="dark"] .mobile-nav-drawer { background: var(--t-card); border-left: 1px solid var(--t-line); box-shadow: -8px 0 24px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .mobile-nav-drawer a { color: var(--t-text); }
html[data-theme="dark"] .mobile-nav-drawer a:hover { background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .mobile-nav-close { color: var(--t-muted); }
html[data-theme="dark"] .mobile-nav-close:hover { color: var(--t-text); }

/* ===== hero ===== */
html[data-theme="dark"] .hero-background {
  /* light: #EFF6FF→#DBEAFE→#BFDBFE pastel blue; dark: deep navy wash fading into the page. The hue-rotate keyframe keeps running. */
  background: linear-gradient(135deg, #0f1a33 0%, #0d1526 50%, #0b0d12 100%);
}
html[data-theme="dark"] .hero-title { color: var(--primary); }
html[data-theme="dark"] .hero-logo {
  /* gradient-clipped text: #2563EB→#3B82F6 is 3.1–3.7:1 on the dark page; lift to sky tones (10.8:1 / 13:1), 4rem/900 */
  background: linear-gradient(135deg, #93c5fd 0%, #c7dcff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] .hero-subtitle { color: var(--t-text); }
html[data-theme="dark"] .hero-philosophy { color: var(--accent); }
html[data-theme="dark"] .hero-description { color: var(--gray-700); }

/* ===== buttons ===== */
/* .btn-primary keeps --gradient-primary (#2563EB→#3B82F6, white 5.2/3.7:1 — 18px/600 large text) — unchanged on purpose */
html[data-theme="dark"] .btn-primary { box-shadow: 0 4px 14px rgba(37, 99, 235, .35); }
html[data-theme="dark"] .btn-primary:hover { box-shadow: 0 8px 22px rgba(37, 99, 235, .45); }
html[data-theme="dark"] .btn-secondary { box-shadow: 0 4px 14px rgba(5, 150, 105, .35); }   /* fill via --gradient-secondary token */
html[data-theme="dark"] .btn-secondary:hover { box-shadow: 0 8px 22px rgba(5, 150, 105, .45); }
html[data-theme="dark"] .btn:focus-visible { outline: 2px solid #c7dcff; outline-offset: 3px; }

/* ===== impact numbers (white section, gradient-hero cards) ===== */
html[data-theme="dark"] .impact { background: var(--t-bg); }
html[data-theme="dark"] .impact-card { border: 1px solid var(--t-line); }   /* bg via --gradient-hero token */
html[data-theme="dark"] .impact-number {
  background: linear-gradient(135deg, #93c5fd 0%, #c7dcff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-theme="dark"] .impact-label { color: var(--gray-800); }
html[data-theme="dark"] .impact-desc { color: var(--gray-700); }

/* ===== features (gray-50 band, white cards) ===== */
html[data-theme="dark"] .features { background: var(--gray-50); border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line); }
html[data-theme="dark"] .section-title { color: var(--t-text); }
html[data-theme="dark"] .feature-card { background: var(--t-card); border: 1px solid var(--t-line); }
html[data-theme="dark"] .feature-card:hover { border-color: #3a3f55; }
html[data-theme="dark"] .feature-title { color: var(--t-text); }
html[data-theme="dark"] .feature-desc,
html[data-theme="dark"] .feature-list li { color: var(--gray-700); }
html[data-theme="dark"] .feature-list li::before { color: var(--secondary); }
html[data-theme="dark"] .feature-link { color: var(--primary); }
html[data-theme="dark"] .feature-link:hover { color: var(--primary-dark); }

/* ===== how it works (white section, gradient-hero steps) ===== */
html[data-theme="dark"] .how-it-works { background: var(--t-bg); }
html[data-theme="dark"] .workflow-step { border: 1px solid var(--t-line); }   /* bg via --gradient-hero token */
html[data-theme="dark"] .workflow-step h3 { color: var(--t-text); }
html[data-theme="dark"] .workflow-step p { color: var(--gray-700); }
html[data-theme="dark"] .workflow-arrow { color: var(--primary); }

/* ===== more features (gray-50 band, white cards) ===== */
html[data-theme="dark"] .more-features { background: var(--gray-50); border-top: 1px solid var(--t-line); }
html[data-theme="dark"] .more-card { background: var(--t-card); border: 1px solid var(--t-line); }
html[data-theme="dark"] .more-card:hover { border-color: #3a3f55; }
html[data-theme="dark"] .more-card h3 { color: var(--t-text); }
html[data-theme="dark"] .more-card p { color: var(--gray-700); }

/* ===== philosophy (blue gradient band, white text — already dark-ish; deepen so it separates from the page) ===== */
html[data-theme="dark"] .philosophy {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .philosophy-link { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); }
html[data-theme="dark"] .philosophy-link:hover { background: rgba(255, 255, 255, .24); }
html[data-theme="dark"] .philosophy-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ===== footer — main.css uses background:var(--gray-900) / color:var(--gray-300); both tokens were re-mapped above
   (gray-900 → near-white, gray-300 → control border), so the footer is re-pinned explicitly ===== */
html[data-theme="dark"] .footer { background: #07080c; color: var(--gray-700); border-top: 1px solid var(--t-line); }
html[data-theme="dark"] .footer-section h3,
html[data-theme="dark"] .footer-section h4 { color: var(--t-text); }
html[data-theme="dark"] .footer-section ul li a { color: var(--gray-700); }
html[data-theme="dark"] .footer-section ul li a:hover { color: var(--primary-light); }
html[data-theme="dark"] .footer-section ul li a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
html[data-theme="dark"] .footer-bottom { border-top-color: var(--t-line); }
/* self-audit caption: inline style="color:#94a3b8" = 7.8:1 on #07080c — left as is (no !important needed) */

/* ===== promo banner (wiabook loader.js inserts <aside> before <footer>; self-styled #1f1b24 card, white caption —
   already dark; only soften its outer edge) ===== */
html[data-theme="dark"] .wia-promo-banner,
html[data-theme="dark"] aside[class*="promo"] { border-color: var(--t-line); }

/* ===== family-pin box (wia-lang-bridge.js appends a fixed box styled inline: rgba(9,9,11,.82) + gold links) —
   already dark, nothing to override ===== */

/* ===== language modal (components/language-modal/language-modal.js injects #wiaNavLangModal + a white card) =====
   Overlay is rgba(0,0,0,.95) already. The card is re-coloured so it matches the dark page; the header keeps its
   purple gradient with white text (8.1:1 on #764ba2 end… #667eea start is 3.9:1 but the title is 1.8rem/700 = large). */
html[data-theme="dark"] .wia-nav-modal-content { background: var(--t-card); border: 1px solid var(--t-line); box-shadow: 0 24px 60px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .wia-nav-modal-tabs { background: #10121a; border-bottom-color: var(--t-line); }
html[data-theme="dark"] .wia-nav-modal-tab { background: var(--t-card); border-color: var(--t-ctrl); color: var(--t-text); }
html[data-theme="dark"] .wia-nav-modal-tab:hover { background: #1c2030; }
html[data-theme="dark"] .wia-nav-modal-tab.active { background: linear-gradient(135deg, #4f5fd8, #6b3fa0); color: #fff; border-color: #8c9cff; }
html[data-theme="dark"] .wia-nav-modal-body { background: var(--t-card); }
/* search input: source sets border 2px #e5e7eb !important (can't be re-coloured without !important — a light 2px line on
   a dark field is still ≥ 3:1, so it is left); background/colour are not !important in the source → set here */
html[data-theme="dark"] .wia-nav-lang-search { background: var(--t-bg); color: var(--t-text); }
html[data-theme="dark"] .wia-nav-lang-search::placeholder { color: var(--t-muted); }
html[data-theme="dark"] .wia-nav-lang-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(127, 168, 255, .25); }
html[data-theme="dark"] .wia-nav-lang-count { background: rgba(127, 168, 255, .12); color: var(--primary); }
html[data-theme="dark"] .wia-nav-lang-item { background: var(--t-bg); border-color: var(--t-ctrl); color: var(--t-text); }
html[data-theme="dark"] .wia-nav-lang-item:hover { background: rgba(127, 168, 255, .16); border-color: var(--primary); }
html[data-theme="dark"] .wia-nav-lang-item.selected { background: rgba(127, 168, 255, .20); border-color: var(--primary); }
html[data-theme="dark"] .wia-nav-lang-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
html[data-theme="dark"] .wia-nav-modal-footer { background: #10121a; border-top-color: var(--t-line); color: var(--t-muted); }
html[data-theme="dark"] .wia-nav-modal-footer a { color: var(--primary); }
/* #lmApology has inline color:#888 (5.0:1 on #10121a) — passes, left alone */

/* ===== responsive: nothing colour-related changes at ≤768 / ≤480 in main.css except the drawer (covered above) ===== */

/* ===== controls: focus rings + misc (added 2026-10-29 on completion) ===== */
html[data-theme="dark"] #wiatalk-lang-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
html[data-theme="dark"] .mobile-menu-btn:focus-visible,
html[data-theme="dark"] .mobile-nav-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
html[data-theme="dark"] hr { border-color: var(--t-line); }
/* a11y badge image (footer, png with its own light frame) — a framed badge on dark is normal; no filter */
/* fade-in-up elements get inline opacity/transform from main.js IntersectionObserver — layout only, nothing to re-colour */