/* kbcia.org — site theme overlay: LIGHT (2026-10-29, family56 bundle D).
   ORIGINAL look = DARK cyber-neon (index.html inline <style> 43~842: body radial #001122→#000011→#0a0a0a, :root 19 tokens
   --cyber-cyan #00ffff --cyber-magenta #ff00ff --cyber-yellow --cyber-blue --neon-green --primary-navy #0a0a0a
   --secondary-blue --accent-cyan --accent-gold --text-white --text-gray --text-light-gray --gradient-main/-accent/-gold
   --blockchain-glow --cyber-glow --cyber-shadow; hex 72 / var(--) 62). Live files untouched. Every rule is scoped to
   html[data-theme="light"], so with nothing saved the page renders exactly as before. Load at the END of <head>
   (index 934 `</head>`; the 87 language copies /<lang>/index.html have the same shell + inline CSS). color-scheme: engine.

   Light palette                                             contrast (on #fff / #f7f8fb)
   ─ page #f7f8fb (soft radial to #eef1f6)   card #fff   band #eef1f6   line #e2e8f0 (decorative)   control border #7b879c
   ─ text #0f172a (17.9 / 16.8)   muted #475569 (7.6 / 7.1)   nav #334155 (10.3)
   ─ cyan #00ffff → #0e7490 (5.3)   magenta #ff00ff → #a21caf (6.6)   yellow #ffff00 → #a16207 (5.9)   blue #0099ff → #1d4ed8 (6.3)
   ─ neon green #39ff14 → #15803d (5.0)   gold #ffd700 → #854d0e (6.9)   brand purple gradient #667eea/#764ba2 → #4338ca/#6b21a8 (text)
   ─ FILLED buttons keep the cyan→magenta gradient but with the dark stops (#0e7490→#a21caf) + white text (5.3 / 6.6)
   ★ --primary-navy is NOT remapped (it is the TEXT colour on .cert-badge and the hover text of the ☰ button) — the body
     background that used it is overridden directly instead.
   Glow/animation: text-shadow glows and the brightness() keyframe are switched off; keyframes that reference tokens
   (badgeGlow, badgePulse, cyberPulse) follow the remapped tokens automatically.
   Footer: the animated rainbow gradient with white text (1.5:1 on the yellow stop) becomes a light band; the rainbow
   survives as a 4px top stripe. */

/* ===== tokens ===== */
html[data-theme="light"] {
  --cyber-cyan: #0e7490;
  --cyber-magenta: #a21caf;
  --cyber-yellow: #a16207;
  --cyber-blue: #1d4ed8;
  --neon-green: #15803d;
  --secondary-blue: #eef1f6;
  --accent-cyan: #0e7490;
  --accent-gold: #854d0e;
  --text-white: #0f172a;
  --text-gray: #475569;
  --text-light-gray: #334155;
  --gradient-main: linear-gradient(135deg, #4338ca 0%, #6b21a8 100%);
  --gradient-accent: linear-gradient(135deg, #0e7490 0%, #a21caf 100%);
  --gradient-gold: linear-gradient(135deg, #b45309 0%, #854d0e 100%);
  --blockchain-glow: 0 0 10px rgba(14, 116, 144, .35);
  --cyber-glow: 0 0 0;            /* `box-shadow: var(--cyber-glow) var(--cyber-cyan)` → 0 0 0 #0e7490 = hairline, no glow */
  --cyber-shadow: 0 10px 30px;
}
html[data-theme="light"] body {
  background: radial-gradient(circle at center, #ffffff 0%, #f5f6fa 55%, #eef1f6 100%);
  color: #0f172a;
}
html[data-theme="light"] ::selection { background: rgba(14, 116, 144, .18); }

/* ===== fixed grid background + pulsing nodes ===== */
html[data-theme="light"] .blockchain-bg { opacity: .07; }
html[data-theme="light"] .node { box-shadow: 0 0 10px rgba(14, 116, 144, .35); }

/* ===== navbar (fixed, rgba(0,0,0,.8) + blur, cyan line) — static <nav class="navbar"> line 948 ===== */
html[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .08);
}
html[data-theme="light"] .logo { text-shadow: none; animation: none; }     /* gradient text follows --gradient-accent (#0e7490→#a21caf) */
html[data-theme="light"] .nav-item a { color: #334155; }
html[data-theme="light"] .nav-item a:hover { color: #0e7490; text-shadow: none; }
html[data-theme="light"] .nav-item a::after { box-shadow: none; }
html[data-theme="light"] .nav-item a:focus-visible { outline: 2px solid #0e7490; outline-offset: 3px; }
@media (max-width: 768px) {
  html[data-theme="light"] .nav-menu { background: rgba(255, 255, 255, .98); border-left: 2px solid #0e7490; box-shadow: -8px 0 30px rgba(15, 23, 42, .12); }
  html[data-theme="light"] .nav-item a { border-bottom-color: #e2e8f0; }
  html[data-theme="light"] .mobile-menu-toggle { border-color: #0e7490; color: #0e7490; background: #fff; }
  html[data-theme="light"] .mobile-menu-toggle:hover { background: #0e7490; color: #fff; box-shadow: none; }
}
/* kbcia-sr.js skip link (white on #0a0a2e) is fine on light too; its focus ring #00ffff is 1.3:1 on white → darken */
html[data-theme="light"] .kb-skip:focus { outline-color: #0e7490; border: 1px solid #0e7490; }

/* ===== hero ===== */
html[data-theme="light"] .hero-badge {
  background: linear-gradient(45deg, rgba(14, 116, 144, .08), rgba(162, 28, 175, .08));
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
  animation: fadeInUp 1s ease-out;          /* drop badgeGlow (hard-coded rgba(255,0,255,.5) shadow pulse) */
}
/* title: 4-stop neon gradient text + textGlow keyframe (text-shadow + brightness) → dark stops, keep only the slow colour drift */
html[data-theme="light"] .hero-title {
  background: linear-gradient(45deg, #0e7490, #a21caf, #a16207, #15803d);
  -webkit-background-clip: text; background-clip: text;
  background-size: 400% 400%;
  animation: cyberGradient 3s ease-in-out infinite;
  text-shadow: none;
  filter: none;
}
html[data-theme="light"] .hero-slogan { text-shadow: none; }
html[data-theme="light"] .cta-primary { box-shadow: 0 6px 18px rgba(14, 116, 144, .25); }   /* white on #0e7490/#a21caf 5.3/6.6 */
html[data-theme="light"] .cta-secondary { box-shadow: none; background: #fff; }
html[data-theme="light"] .cta-btn:hover { box-shadow: 0 12px 28px rgba(162, 28, 175, .22); }
html[data-theme="light"] .cta-btn:focus-visible { outline: 2px solid #0f172a; outline-offset: 3px; }

/* ===== services ===== */
html[data-theme="light"] .services { background: #eef1f6; }
html[data-theme="light"] .service-card,
html[data-theme="light"] .cert-card {
  background: #fff;
  border-color: #cbd5e1;                               /* card edge; hover edge #0e7490 below is 5.3:1 */
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
html[data-theme="light"] .service-card::before,
html[data-theme="light"] .cert-card::before { background: linear-gradient(90deg, transparent, rgba(14, 116, 144, .08), rgba(162, 28, 175, .05), transparent); }
html[data-theme="light"] .service-card:hover,
html[data-theme="light"] .cert-card:hover { background: #fff; border-color: #0e7490; box-shadow: 0 16px 36px rgba(14, 116, 144, .16); }

/* ===== certification ===== */
html[data-theme="light"] .certification { background: linear-gradient(135deg, rgba(67, 56, 202, .06) 0%, rgba(107, 33, 168, .06) 100%); }
/* badge: gradient fill now #0e7490→#a21caf, so the text must be white (page rule: color:var(--primary-navy) = near-black) */
html[data-theme="light"] .cert-badge { color: #fff; }
html[data-theme="light"] .cert-btn { box-shadow: 0 2px 8px rgba(14, 116, 144, .2); }
html[data-theme="light"] .cert-btn:hover { box-shadow: 0 10px 25px rgba(162, 28, 175, .25); }
html[data-theme="light"] .cert-btn:focus-visible { outline: 2px solid #0f172a; outline-offset: 3px; }

/* ===== about / stats ===== */
html[data-theme="light"] .about { background: #eef1f6; }
html[data-theme="light"] .stat-item { background: #fff; border-color: #cbd5e1; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); }

/* ===== footer (animated rainbow + white text → light band + rainbow stripe) ===== */
html[data-theme="light"] .footer {
  background-image: none;
  background-color: #eef1f6;
  animation: none;
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd, #01a3a4, #ff6b6b) 1;
}
html[data-theme="light"] .footer-logo,
html[data-theme="light"] .footer-section h3 { color: #0f172a; text-shadow: none; }
html[data-theme="light"] .footer-section p,
html[data-theme="light"] .footer-section a { color: #334155; }
html[data-theme="light"] .footer-section a:hover { color: #0e7490; text-shadow: none; text-decoration: underline; }
html[data-theme="light"] .footer-bottom { border-top-color: #cbd5e1; color: #475569; }
/* family-sites overlay (index 1306~1313: inline dark glass box + white text) stays a dark modal on purpose — readable as is */

/* ===== language modal (/components/language-modal/language-modal.js — same copy as wisdom/cert; white card already) ===== */
html[data-theme="light"] #wiaNavLangModal { background: rgba(15, 23, 42, .55); }
html[data-theme="light"] .wia-nav-modal-tab { border-color: #7b879c; }
html[data-theme="light"] .wia-nav-modal-tab.active { border-color: #667eea; }
html[data-theme="light"] .wia-nav-lang-search { border-color: #7b879c !important; }   /* kit rule is border:… !important */
html[data-theme="light"] .wia-nav-lang-item { border-color: #7b879c; }
html[data-theme="light"] .wia-nav-lang-item:hover,
html[data-theme="light"] .wia-nav-lang-item.selected { border-color: #4338ca; }
html[data-theme="light"] .wia-nav-modal-footer,
html[data-theme="light"] .wia-nav-modal-footer div[style*="color:#888"] { color: #475569 !important; }   /* inline #888 = 3.5:1 */
html[data-theme="light"] .wia-nav-modal-footer a { color: #4338ca; }
/* promo banner (wiabook.com/site-kit/promo-banner/loader.js) draws its own dark card — self-contained, left as is */

/* ===== focus ring for the two header buttons the engine will add (desktop: appended to .nav-menu, phone: before ☰) ===== */
html[data-theme="light"] .navbar button:focus-visible { outline: 2px solid #0e7490; outline-offset: 2px; }