/* Light theme — full coverage (Track C complete)
   Overrides dark navy/gold glass system for data-theme="light"
   Contrast-audit: gold darkened for AA on white; glass switched to light */
:root {
  --light-bg: #F8F7F3;
  --light-surface: #FFFFFF;
  --light-ink: #0F1A2E;
  --light-muted: #5A6B84;
  --light-border: rgba(15,26,46,0.10);
  --light-border-strong: rgba(15,26,46,0.16);
  --light-gold-contrast: #8C6A14; /* 4.62:1 on #FFFFFF — AA pass; replaces #C99A2E on light */
  --light-gold: #9A7A16;
}

/* Core token remap */
html[data-theme="light"]{
  --navy-deep: #F8F7F3;
  --navy-command: #FFFFFF;
  --navy-panel: #FFFFFF;
  --navy-overlay: rgba(248,247,243,0.72);
  --white: #0F1A2E;
  --silver: #3E4F6A;
  --silver-dim: #6B7A90;
  --border-gold: rgba(15,26,46,0.10);
  --line-gold: rgba(15,26,46,0.10);
  --gold-muted: rgba(140,106,20,0.18);
  /* glass variables — light */
  --glass-bg: rgba(255,255,255,0.72);
  --glass-bg-strong: rgba(255,255,255,0.86);
  --glass-bg-nav: rgba(255,255,255,0.72);
  --glass-border: rgba(15,26,46,0.08);
  --glass-border-gold: rgba(15,26,46,0.10);
  --glass-highlight: rgba(255,255,255,0.92);
  --glass-inner: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(15,26,46,0.06);
  --glass-shadow: 0 8px 32px rgba(15,26,46,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
  --glass-shadow-lg: 0 16px 48px rgba(15,26,46,0.12), 0 1px 0 rgba(255,255,255,0.92) inset;
  --glass-blur: blur(22px) saturate(1.25);
  --glass-blur-strong: blur(28px) saturate(1.35);
  --glass-nav-clear: rgba(255,255,255,0.64);
  --glass-clear: rgba(255,255,255,0.72);
  --glass-clear-strong: rgba(255,255,255,0.86);
}

/* Page base */
html[data-theme="light"] body{
  background: var(--light-bg) !important;
  color: var(--light-ink) !important;
}
html[data-theme="light"] .page-wrap{ background: var(--light-bg); }

/* Gold contrast fix — AA on white */
html[data-theme="light"] .gold{ color: var(--light-gold-contrast) !important; }
html[data-theme="light"] .gold-h{ color: var(--light-gold) !important; }
html[data-theme="light"] .eyebrow{ color: var(--light-gold-contrast) !important; }
html[data-theme="light"] .pillar{ color: var(--light-gold-contrast) !important; border-color: rgba(140,106,20,0.22) !important; background: rgba(140,106,20,0.08) !important; }
html[data-theme="light"] .year{ color: var(--light-gold-contrast) !important; }
html[data-theme="light"] .rule{ background: var(--light-gold-contrast) !important; }

/* Sections */
html[data-theme="light"] .section.dark,
html[data-theme="light"] .section.deep{
  background: var(--light-surface) !important;
  border-bottom: 1px solid var(--light-border);
}
html[data-theme="light"] .section.dark{
  background: radial-gradient(120% 100% at 50% 0%, rgba(140,106,20,0.04), transparent 60%), #FFFFFF !important;
}
html[data-theme="light"] .section.deep{
  background: radial-gradient(120% 100% at 50% 0%, rgba(15,26,46,0.02), transparent 60%), #F8F7F3 !important;
}

/* Cards — glass on light */
html[data-theme="light"] .card.glass-card{
  background: rgba(255,255,255,0.86) !important;
  border-color: rgba(15,26,46,0.08) !important;
  box-shadow: 0 8px 32px rgba(15,26,46,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
html[data-theme="light"] .card.glass-card.ghost{
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  border: 1px solid var(--light-border) !important;
}
html[data-theme="light"] .card.glass-card .fine{ color: var(--light-muted) !important; text-shadow: none !important; }
html[data-theme="light"] .card.glass-card p{ text-shadow: none !important; }
html[data-theme="light"] .lede{ color: #334155 !important; }
html[data-theme="light"] .fine{ color: #64748B !important; }
html[data-theme="light"] .quote{ color: var(--light-ink) !important; }
html[data-theme="light"] .quote::before{ color: var(--light-gold-contrast) !important; }
html[data-theme="light"] .disclaimer{
  background: rgba(15,26,46,0.04) !important;
  border-left-color: var(--light-gold-contrast) !important;
  color: var(--light-muted) !important;
}

/* Navbar — pill glass on light */
html[data-theme="light"] .navbar.glass-nav{
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(15,26,46,0.08) !important;
  box-shadow: 0 8px 32px rgba(15,26,46,0.10), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
}
html[data-theme="light"] .navbar.glass-nav::after{
  background: linear-gradient(90deg, transparent, rgba(140,106,20,0.22) 30%, rgba(140,106,20,0.22) 70%, transparent) !important;
}
html[data-theme="light"] .navbar.glass-nav.scrolled{
  background: rgba(255,255,255,0.84) !important;
}
html[data-theme="light"] .navbar.glass-nav.at-top{
  background: rgba(255,255,255,0.62) !important;
}
html[data-theme="light"] .nav-links a{
  color: var(--light-ink) !important;
  border-color: transparent !important;
}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active{
  background: rgba(15,26,46,0.06) !important;
  border-color: rgba(15,26,46,0.10) !important;
  color: var(--light-ink) !important;
}
html[data-theme="light"] .nav-links a.active{
  background: rgba(140,106,20,0.10) !important;
  border-color: rgba(140,106,20,0.20) !important;
  color: var(--light-gold-contrast) !important;
}
html[data-theme="light"] .brand span{ color: var(--light-ink) !important; text-shadow: none !important; }
html[data-theme="light"] .navbar .brand img{
  filter: brightness(0.98) contrast(1.06) drop-shadow(0 1px 6px rgba(15,26,46,0.08)) !important;
}

/* Hero */
html[data-theme="light"] .hero-media.glass-hero{
  background: rgba(255,255,255,0.64) !important;
  border-color: rgba(15,26,46,0.06) !important;
  box-shadow: 0 12px 40px rgba(15,26,46,0.10), inset 0 1px 0 rgba(255,255,255,0.92) !important;
}
html[data-theme="light"] .hero-media::after{
  background: radial-gradient(80% 60% at 50% 40%, transparent 60%, rgba(248,247,243,0.22) 100%) !important;
}
html[data-theme="light"] .navy-overlay{
  background: linear-gradient(90deg, rgba(248,247,243,0.72) 0%, rgba(248,247,243,0.22) 55%, transparent 100%) !important;
}
html[data-theme="light"] .cover-left{ background: var(--light-bg) !important; }
html[data-theme="light"] .cover-left .brand{
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15,26,46,0.08) !important;
  backdrop-filter: blur(12px) !important;
}

/* Buttons — light glass */
html[data-theme="light"] button,
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .contact-strip a,
html[data-theme="light"] .menu-toggle{
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15,26,46,0.10) !important;
  color: var(--light-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 16px rgba(15,26,46,0.08) !important;
}
html[data-theme="light"] button:hover,
html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] .contact-strip a:hover{
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(140,106,20,0.22) !important;
}
html[data-theme="light"] .btn-gold{
  background: linear-gradient(180deg, #C99A2E, #B4871F) !important;
  color: #FFFFFF !important;
  border-color: rgba(140,106,20,0.32) !important;
  box-shadow: 0 4px 16px rgba(140,106,20,0.24), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
html[data-theme="light"] #langBar{
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15,26,46,0.08) !important;
}
html[data-theme="light"] #langBar button[aria-pressed="true"]{
  background: rgba(140,106,20,0.14) !important;
  border-color: rgba(140,106,20,0.22) !important;
  color: var(--light-gold-contrast) !important;
}
html[data-theme="light"] #themeToggle{
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15,26,46,0.08) !important;
  color: var(--light-ink) !important;
}

/* Roadmap / chart */
html[data-theme="light"] #roadmap3d{
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(15,26,46,0.08) !important;
  box-shadow: 0 8px 32px rgba(15,26,46,0.08) !important;
}
html[data-theme="light"] .chart.glass-chart{
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15,26,46,0.08) !important;
}
html[data-theme="light"] .bar{
  box-shadow: 0 4px 16px rgba(140,106,20,0.18), inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

/* Timeline */
html[data-theme="light"] .timeline{ border-left-color: rgba(15,26,46,0.10) !important; }
html[data-theme="light"] .timeline article::before{
  background: var(--light-gold-contrast) !important;
  box-shadow: 0 0 0 4px rgba(140,106,20,0.14) !important;
}

/* Hub / leadership / footer */
html[data-theme="light"] .hub-card.glass-card img{ filter: saturate(1.02) contrast(1.02) !important; }
html[data-theme="light"] .leader img{
  border-color: rgba(15,26,46,0.08) !important;
  outline-color: rgba(140,106,20,0.14) !important;
}
html[data-theme="light"] .footer.glass-footer{
  background: rgba(255,255,255,0.84) !important;
  border-top: 1px solid var(--light-border) !important;
  color: var(--light-muted) !important;
  backdrop-filter: blur(18px) !important;
}
html[data-theme="light"] .footer a{ color: var(--light-muted) !important; }
html[data-theme="light"] .footer a:hover{ color: var(--light-gold-contrast) !important; }

/* Image treatment on light — remove dark warming */
html[data-theme="light"] img{ filter: contrast(1.02) saturate(1.02) brightness(1.01) !important; }
html[data-theme="light"] .hero-media img,
html[data-theme="light"] .hub-card img{
  filter: contrast(1.03) saturate(1.02) brightness(1.02) !important;
}

/* Stats */
html[data-theme="light"] .stat.glass-stat{
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(15,26,46,0.08) !important;
}
html[data-theme="light"] .stat b{ color: var(--light-ink) !important; }
html[data-theme="light"] .stat span{ color: var(--light-gold-contrast) !important; }

/* Cover split imagery overlay lighten */
html[data-theme="light"] #divisions > div:first-of-type + div{ background: rgba(248,247,243,0.62) !important; }

/* ===== David review fixes (2026-08-25) ===== */
/* P1-02: light-theme focus ring passes 3:1 UI contrast (#8C6A14 on #FFFFFF = 5.02:1, computed 5.016:1) */
html[data-theme="light"] .nav-links a:focus-visible,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] .menu-toggle:focus-visible,
html[data-theme="light"] #langBar button:focus-visible{
  outline: 2px solid var(--light-gold-contrast, #8C6A14) !important;
  outline-offset: 2px;
}

/* P2-01: browser UI syncs with theme */
html{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

/* Skip-link (P1-02 / WCAG 2.4.1) - visually hidden until focused */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold, #C99A2E);
  color: #041225;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 0 0 12px 0;
}
html[dir="rtl"] .skip-link{ left: auto; right: -9999px; border-radius: 0 0 0 12px; }
html[dir="rtl"] .skip-link:focus{ left: auto; right: 0; }
html[data-theme="light"] .skip-link{ background: var(--light-gold-contrast, #8C6A14); color: #FFFFFF; }
.skip-link:focus{ left: 0; }

/* P2-02: forced-colors (Windows High Contrast) supplement */
@media (forced-colors: active){
  .rule, .navbar, .card.glass-card, .glass-hero{ border: 1px solid CanvasText; }
  .skip-link:focus{ forced-color-adjust: none; }
  .nav-links a.active{ forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* Cover brand box: dynamic sizing + wrap safety (any language, any width) */
.cover-left .brand{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 100%;
}
.cover-left .brand span{
  white-space: normal !important;
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  letter-spacing: 0.14em;
}
/* Hero title stays fluid inside its column - never forces column wider */
.hero-title{
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: clamp(2.2rem, 4.8vw, var(--h1, 4.5rem));
}
@media (max-width:620px){
  .hero-title{
    font-size:clamp(2.35rem,11vw,3.15rem);
    line-height:0.98
  }
}
/* Cover columns: keep hero from squeezing below readable width */
@media (max-width:1100px){
  .cover-split{ grid-template-columns: minmax(0, 48%) minmax(0, 52%); }
}