/* ═══════════════════════════════════════════════════════════
   THEME OVERRIDES — accent color variables + sky-* remapping
   This file is separate from app.css so Tailwind rebuilds
   never wipe these overrides.
═══════════════════════════════════════════════════════════ */

/* ── 0. Surface / text / border variables (dark default) ── */
:root {
  --bg-base:     #040609;
  --bg-section:  #09090b;
  --bg-card:     rgba(255,255,255,0.02);
  --bg-card-sm:  rgba(255,255,255,0.015);
  --bg-card-md:  rgba(255,255,255,0.03);
  --bg-chip:     rgba(255,255,255,0.04);
  --text-primary:   #ffffff;
  --text-secondary: #d4d4d8;
  --text-muted:     #a1a1aa;
  --text-faint:     #71717a;
  --border-base:    #27272a;
  --border-subtle:  rgba(39,39,42,0.5);
}
[data-mode="light"] {
  --bg-base:     #f8fafc;
  --bg-section:  #f1f5f9;
  --bg-card:     rgba(0,0,0,0.03);
  --bg-card-sm:  rgba(0,0,0,0.02);
  --bg-card-md:  rgba(0,0,0,0.04);
  --bg-chip:     rgba(0,0,0,0.05);
  --text-primary:   #09090b;
  --text-secondary: #3f3f46;
  --text-muted:     #52525b;
  --text-faint:     #71717a;
  --border-base:    #e4e4e7;
  --border-subtle:  rgba(228,228,231,0.7);
}

/* ── 1. CSS variables per theme ── */
:root {
  --accent-300: #7dd3fc; --accent-400: #38bdf8;
  --accent-500: #0ea5e9; --accent-600: #0284c7;
  --accent-700: #0369a1; --accent-900: #0c4a6e;
  --accent-rgb: 2, 132, 199;
}
[data-theme="emerald"] {
  --accent-300: #6ee7b7; --accent-400: #34d399;
  --accent-500: #10b981; --accent-600: #059669;
  --accent-700: #047857; --accent-900: #064e3b;
  --accent-rgb: 5, 150, 105;
}
[data-theme="violet"] {
  --accent-300: #c4b5fd; --accent-400: #a78bfa;
  --accent-500: #8b5cf6; --accent-600: #7c3aed;
  --accent-700: #6d28d9; --accent-900: #4c1d95;
  --accent-rgb: 124, 58, 237;
}
[data-theme="rose"] {
  --accent-300: #fda4af; --accent-400: #fb7185;
  --accent-500: #f43f5e; --accent-600: #e11d48;
  --accent-700: #be123c; --accent-900: #881337;
  --accent-rgb: 225, 29, 72;
}
[data-theme="amber"] {
  --accent-300: #fcd34d; --accent-400: #fbbf24;
  --accent-500: #f59e0b; --accent-600: #d97706;
  --accent-700: #b45309; --accent-900: #78350f;
  --accent-rgb: 217, 119, 6;
}

/* ── 2. Solid sky-* utility overrides ── */
.text-sky-200  { color: var(--accent-300) !important; }
.text-sky-300  { color: var(--accent-300) !important; }
.text-sky-400  { color: var(--accent-400) !important; }
.text-sky-500  { color: var(--accent-500) !important; }
.text-sky-600  { color: var(--accent-600) !important; }
.bg-sky-300    { background-color: var(--accent-300) !important; }
.bg-sky-400    { background-color: var(--accent-400) !important; }
.bg-sky-500    { background-color: var(--accent-500) !important; }
.bg-sky-600    { background-color: var(--accent-600) !important; }
.bg-sky-700    { background-color: var(--accent-700) !important; }
.bg-sky-800, .bg-sky-900, .bg-sky-950 { background-color: var(--accent-900) !important; }
.border-sky-400 { border-color: var(--accent-400) !important; }
.border-sky-500 { border-color: var(--accent-500) !important; }
.border-sky-600 { border-color: var(--accent-600) !important; }
.border-sky-700 { border-color: var(--accent-700) !important; }
.border-l-sky-500 { border-left-color: var(--accent-500) !important; }
.ring-sky-500  { --tw-ring-color: var(--accent-500) !important; }
.ring-sky-600  { --tw-ring-color: var(--accent-600) !important; }
.via-sky-500   { --tw-gradient-stops: var(--tw-gradient-from), var(--accent-500) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-sky-600   { --tw-gradient-stops: var(--tw-gradient-from), var(--accent-600) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.from-sky-500  { --tw-gradient-from: var(--accent-500) !important; }

/* ── 3. Opacity variants — bg ── */
.bg-sky-300\/10,.bg-sky-400\/10,.bg-sky-500\/10,.bg-sky-600\/10 { background-color: rgba(var(--accent-rgb),.10) !important; }
.bg-sky-500\/15,.bg-sky-600\/15 { background-color: rgba(var(--accent-rgb),.15) !important; }
.bg-sky-500\/20,.bg-sky-600\/20 { background-color: rgba(var(--accent-rgb),.20) !important; }
.bg-sky-500\/25,.bg-sky-600\/25 { background-color: rgba(var(--accent-rgb),.25) !important; }
.bg-sky-500\/30,.bg-sky-600\/30 { background-color: rgba(var(--accent-rgb),.30) !important; }
.bg-sky-500\/40,.bg-sky-600\/40 { background-color: rgba(var(--accent-rgb),.40) !important; }
.bg-sky-500\/50,.bg-sky-600\/50 { background-color: rgba(var(--accent-rgb),.50) !important; }
.bg-sky-500\/60,.bg-sky-600\/60 { background-color: rgba(var(--accent-rgb),.60) !important; }
.bg-sky-500\/70,.bg-sky-600\/70 { background-color: rgba(var(--accent-rgb),.70) !important; }
.bg-sky-500\/80,.bg-sky-600\/80 { background-color: rgba(var(--accent-rgb),.80) !important; }
.bg-sky-600\/90 { background-color: rgba(var(--accent-rgb),.90) !important; }
.bg-sky-900\/40 { background-color: rgba(var(--accent-rgb),.12) !important; }
.bg-sky-950\/50 { background-color: rgba(var(--accent-rgb),.08) !important; }

/* ── 4. Opacity variants — border ── */
.border-sky-500\/15,.border-sky-600\/15 { border-color: rgba(var(--accent-rgb),.15) !important; }
.border-sky-500\/18 { border-color: rgba(var(--accent-rgb),.18) !important; }
.border-sky-500\/20,.border-sky-600\/20 { border-color: rgba(var(--accent-rgb),.20) !important; }
.border-sky-500\/25,.border-sky-600\/25 { border-color: rgba(var(--accent-rgb),.25) !important; }
.border-sky-500\/30,.border-sky-600\/30 { border-color: rgba(var(--accent-rgb),.30) !important; }
.border-sky-500\/35 { border-color: rgba(var(--accent-rgb),.35) !important; }
.border-sky-500\/40,.border-sky-600\/40 { border-color: rgba(var(--accent-rgb),.40) !important; }
.border-sky-700\/40 { border-color: rgba(var(--accent-rgb),.30) !important; }
.border-sky-500\/50,.border-sky-600\/50 { border-color: rgba(var(--accent-rgb),.50) !important; }
.border-sky-500\/60 { border-color: rgba(var(--accent-rgb),.60) !important; }

/* ── 5. Opacity variants — text ── */
.text-sky-400\/80 { color: rgba(var(--accent-rgb),.80) !important; }
.text-sky-500\/30 { color: rgba(var(--accent-rgb),.30) !important; }
.text-sky-500\/40 { color: rgba(var(--accent-rgb),.40) !important; }
.text-sky-500\/50 { color: rgba(var(--accent-rgb),.50) !important; }
.text-sky-500\/60 { color: rgba(var(--accent-rgb),.60) !important; }
.text-sky-500\/70 { color: rgba(var(--accent-rgb),.70) !important; }
.text-sky-500\/80 { color: rgba(var(--accent-rgb),.80) !important; }
.text-sky-600\/70 { color: rgba(var(--accent-rgb),.70) !important; }

/* ── 6. Opacity variants — via ── */
.via-sky-500\/18,.via-sky-600\/18 { --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb),.18) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-sky-500\/20,.via-sky-600\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb),.20) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-sky-500\/60 { --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb),.60) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-sky-500\/70 { --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb),.70) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-sky-600\/50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb),.50) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }

/* ── 7. hover: variants ── */
.hover\:bg-sky-600:hover  { background-color: var(--accent-600) !important; }
.hover\:bg-sky-700:hover  { background-color: var(--accent-700) !important; }
.hover\:text-sky-400:hover { color: var(--accent-400) !important; }
.hover\:text-sky-500:hover { color: var(--accent-500) !important; }
.hover\:text-sky-600:hover { color: var(--accent-600) !important; }
.hover\:text-sky-300:hover { color: var(--accent-300) !important; }
.hover\:border-sky-500:hover { border-color: var(--accent-500) !important; }
.hover\:border-sky-600:hover { border-color: var(--accent-600) !important; }
.hover\:bg-sky-500\/10:hover,.hover\:bg-sky-600\/10:hover { background-color: rgba(var(--accent-rgb),.10) !important; }
.hover\:bg-sky-500\/20:hover { background-color: rgba(var(--accent-rgb),.20) !important; }
.hover\:border-sky-500\/10:hover { border-color: rgba(var(--accent-rgb),.10) !important; }
.hover\:border-sky-500\/15:hover { border-color: rgba(var(--accent-rgb),.15) !important; }
.hover\:border-sky-500\/20:hover { border-color: rgba(var(--accent-rgb),.20) !important; }
.hover\:border-sky-500\/25:hover { border-color: rgba(var(--accent-rgb),.25) !important; }
.hover\:border-sky-500\/30:hover { border-color: rgba(var(--accent-rgb),.30) !important; }
.hover\:border-sky-500\/40:hover { border-color: rgba(var(--accent-rgb),.40) !important; }
.hover\:border-sky-500\/50:hover { border-color: rgba(var(--accent-rgb),.50) !important; }
.hover\:border-sky-500\/55:hover { border-color: rgba(var(--accent-rgb),.55) !important; }
.hover\:border-sky-600\/60:hover { border-color: rgba(var(--accent-rgb),.60) !important; }
.focus\:border-sky-500:focus,.focus\:border-sky-600:focus { border-color: var(--accent-500) !important; }
.focus\:ring-sky-500:focus { --tw-ring-color: var(--accent-500) !important; }

/* ── 8. group-hover: variants ── */
.group:hover .group-hover\:bg-sky-600  { background-color: var(--accent-600) !important; }
.group:hover .group-hover\:bg-sky-500\/50 { background-color: rgba(var(--accent-rgb),.50) !important; }
.group:hover .group-hover\:bg-sky-500\/60 { background-color: rgba(var(--accent-rgb),.60) !important; }
.group:hover .group-hover\:bg-sky-600\/20 { background-color: rgba(var(--accent-rgb),.20) !important; }
.group:hover .group-hover\:bg-sky-500\/10 { background-color: rgba(var(--accent-rgb),.10) !important; }
.group:hover .group-hover\:text-sky-200 { color: var(--accent-300) !important; }
.group:hover .group-hover\:text-sky-300 { color: var(--accent-300) !important; }
.group:hover .group-hover\:text-sky-400 { color: var(--accent-400) !important; }
.group:hover .group-hover\:text-sky-400\/80 { color: rgba(var(--accent-rgb),.80) !important; }
.group:hover .group-hover\:text-sky-500 { color: var(--accent-500) !important; }
.group:hover .group-hover\:border-sky-500 { border-color: var(--accent-500) !important; }
.group:hover .group-hover\:border-sky-600 { border-color: var(--accent-600) !important; }
.group:hover .group-hover\:border-sky-500\/15 { border-color: rgba(var(--accent-rgb),.15) !important; }
.group:hover .group-hover\:border-sky-500\/20 { border-color: rgba(var(--accent-rgb),.20) !important; }
.group:hover .group-hover\:ring-sky-500\/40 { --tw-ring-color: rgba(var(--accent-rgb),.40) !important; }
.group:hover .group-hover\:ring-sky-600\/60 { --tw-ring-color: rgba(var(--accent-rgb),.60) !important; }
.group:hover .group-hover\:via-sky-500\/70 { --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb),.70) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.group\/row:hover .group-hover\/row\:text-sky-300 { color: var(--accent-300) !important; }
.group\/row:hover .group-hover\/row\:border-sky-400\/60 { border-color: rgba(var(--accent-rgb),.60) !important; }

/* ── 8b. Ring + from-gradient opacity variants ── */
.ring-sky-500\/50 { --tw-ring-color: rgba(var(--accent-rgb),.50) !important; }
.from-sky-500\/50 { --tw-gradient-from: rgba(var(--accent-rgb),.50) !important; }

/* ── 9. @apply-compiled selectors (hardcoded by Tailwind build) ── */
.card-dark:hover  { border-color: rgba(var(--accent-rgb),.40) !important; }
.nav-link-item:hover, .nav-link-item.active { color: var(--accent-500) !important; }
.dropdown-item:hover { border-left-color: var(--accent-600) !important; }
.section-label  { color: var(--accent-500) !important; }
.section-title span { color: var(--accent-600) !important; }
.btn-primary    { background-color: var(--accent-600) !important; }
.btn-primary:hover { background-color: var(--accent-700) !important; }
.btn-outline-blue { border-color: var(--accent-600) !important; color: var(--accent-400) !important; }
.btn-outline-blue:hover { background-color: var(--accent-600) !important; color: #fff !important; }

/* ── 10. Hardcoded rgba glows ── */
.masters-card.masters-card-active .masters-oval {
  border-color: rgba(var(--accent-rgb), .6) !important;
  box-shadow: 0 0 40px rgba(var(--accent-rgb), .25), 0 20px 60px rgba(0,0,0,.6) !important;
}
.team-thumb-active {
  border-color: var(--accent-600) !important;
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), .35) !important;
}
.section-glow-tl { background: radial-gradient(ellipse at top left, rgba(var(--accent-rgb),.12) 0%, transparent 60%) !important; }
.section-glow-br { background: radial-gradient(ellipse at bottom right, rgba(var(--accent-rgb),.10) 0%, transparent 60%) !important; }

/* ── 11. Scrollbar ── */
::-webkit-scrollbar-thumb { background: var(--accent-500) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-400) !important; }

/* ── 12. Preloader + particles ── */
#preloader .spinner-ring { border-top-color: var(--accent-600) !important; }
.particle     { background: var(--accent-400) !important; box-shadow: 0 0 4px var(--accent-400) !important; }
.particle-lg  { background: var(--accent-300) !important; box-shadow: 0 0 8px var(--accent-300), 0 0 16px rgba(var(--accent-rgb),.31) !important; }

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES  [data-mode="light"]
═══════════════════════════════════════════════════════════ */

/* ── L0. Base page background ── */
[data-mode="light"] html,
[data-mode="light"] body { background-color: var(--bg-base) !important; color: var(--text-primary) !important; }

/* ── L1. Preloader ── */
[data-mode="light"] #preloader { background: var(--bg-base) !important; }
[data-mode="light"] #preloader p { color: #52525b; }

/* ── L2. Navbar — fully white, solid ── */
[data-mode="light"] #main-navbar {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 12px rgba(0,0,0,0.08) !important;
}
[data-mode="light"] #main-navbar.scrolled {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.10) !important;
}
[data-mode="light"] .nav-link-item { color: #3f3f46 !important; }
[data-mode="light"] .nav-link-item:hover,
[data-mode="light"] .nav-link-item.active { color: var(--accent-600) !important; }
[data-mode="light"] #main-navbar .text-zinc-300 { color: #3f3f46 !important; }
[data-mode="light"] #main-navbar .text-zinc-400 { color: #52525b !important; }

/* ── L3. Dropdown menus ── */
[data-mode="light"] .bg-zinc-900.border.border-zinc-800 {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
}
[data-mode="light"] .dropdown-item { color: #52525b !important; }
[data-mode="light"] .dropdown-item:hover { background-color: #f4f4f5 !important; color: #09090b !important; }

/* ── L4. Tailwind bg overrides ── */
[data-mode="light"] .bg-black         { background-color: var(--bg-base) !important; }
[data-mode="light"] .bg-zinc-950      { background-color: var(--bg-section) !important; }
[data-mode="light"] .bg-zinc-900      { background-color: #ffffff !important; }
[data-mode="light"] .bg-zinc-900\/40  { background-color: rgba(255,255,255,0.85) !important; }
[data-mode="light"] .bg-zinc-900\/50  { background-color: rgba(255,255,255,0.95) !important; }
[data-mode="light"] .bg-zinc-900\/60  { background-color: rgba(255,255,255,0.97) !important; }
[data-mode="light"] .bg-zinc-900\/80  { background-color: rgba(255,255,255,0.98) !important; }
[data-mode="light"] .bg-zinc-950\/95  { background-color: rgba(248,250,252,0.97) !important; }
[data-mode="light"] .bg-zinc-800      { background-color: #f4f4f5 !important; }
[data-mode="light"] .bg-zinc-800\/50  { background-color: rgba(244,244,245,0.6) !important; }
[data-mode="light"] .bg-zinc-800\/80  { background-color: rgba(244,244,245,0.9) !important; }
[data-mode="light"] .bg-zinc-800\/40  { background-color: rgba(244,244,245,0.5) !important; }
[data-mode="light"] .bg-zinc-950\/85  { background-color: rgba(244,244,245,0.85) !important; }

/* ── L5. Tailwind text overrides ── */
[data-mode="light"] .text-white   { color: #09090b !important; }
[data-mode="light"] .text-zinc-100 { color: #18181b !important; }
[data-mode="light"] .text-zinc-200 { color: #27272a !important; }
[data-mode="light"] .text-zinc-300 { color: #3f3f46 !important; }
[data-mode="light"] .text-zinc-400 { color: #52525b !important; }
[data-mode="light"] .text-zinc-500 { color: #71717a !important; }
[data-mode="light"] .text-zinc-600 { color: #71717a !important; }

/* ── L5b. Restore white text on colored backgrounds ── */
[data-mode="light"] .bg-sky-600 .text-white,
[data-mode="light"] .bg-sky-600.text-white,
[data-mode="light"] .bg-sky-500 .text-white,
[data-mode="light"] .bg-sky-500.text-white,
[data-mode="light"] .bg-sky-700 .text-white,
[data-mode="light"] .bg-sky-700.text-white  { color: #ffffff !important; }
/* Counters section (bg-sky-600) — ensure text stays white */
[data-mode="light"] #counterSection .text-white,
[data-mode="light"] #counterSection .text-sky-200 { color: #ffffff !important; }
/* Dynamic MarkupString headings containing white text in light-bg sections */
[data-mode="light"] .section-headline-white { color: #09090b !important; }
[data-mode="light"] .section-headline-white span { color: var(--accent-600) !important; }

/* ── L6. Tailwind border overrides ── */
[data-mode="light"] .border-zinc-900 { border-color: #f4f4f5 !important; }
[data-mode="light"] .border-zinc-800 { border-color: #e4e4e7 !important; }
[data-mode="light"] .border-zinc-800\/50 { border-color: rgba(228,228,231,0.6) !important; }
[data-mode="light"] .border-zinc-800\/60 { border-color: rgba(228,228,231,0.6) !important; }
[data-mode="light"] .border-zinc-800\/70 { border-color: rgba(228,228,231,0.7) !important; }
[data-mode="light"] .border-zinc-700 { border-color: #d4d4d8 !important; }
[data-mode="light"] .border-zinc-700\/60 { border-color: rgba(212,212,216,0.6) !important; }
[data-mode="light"] .hover\:border-zinc-700:hover { border-color: rgba(var(--accent-rgb),0.4) !important; }
/* Ring offset for image rings sitting on dark card bg */
[data-mode="light"] .ring-offset-zinc-900 { --tw-ring-offset-color: #ffffff !important; }
/* Sticky tab bars with bg-zinc-950/95 */
[data-mode="light"] .sticky.bg-zinc-950\/95 { box-shadow: 0 1px 0 #e4e4e7 !important; }
[data-mode="light"] .border-white\/\[0\.04\] { border-color: rgba(0,0,0,0.06) !important; }
[data-mode="light"] .border-white\/\[0\.05\] { border-color: rgba(0,0,0,0.07) !important; }
[data-mode="light"] .border-white\/\[0\.06\] { border-color: rgba(0,0,0,0.08) !important; }
[data-mode="light"] .border-white\/\[0\.07\] { border-color: rgba(0,0,0,0.09) !important; }
[data-mode="light"] .border-white\/\[0\.08\] { border-color: rgba(0,0,0,0.10) !important; }
[data-mode="light"] .border-white\/\[0\.10\] { border-color: rgba(0,0,0,0.12) !important; }

/* ── L7. Opacity text overrides ── */
[data-mode="light"] .text-white\/\[0\.06\] { color: rgba(0,0,0,0.10) !important; }
[data-mode="light"] .text-white\/\[0\.04\] { color: rgba(0,0,0,0.08) !important; }

/* ── L8. Card-dark ── */
[data-mode="light"] .card-dark {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
}
[data-mode="light"] .card-dark:hover { border-color: rgba(var(--accent-rgb),.45) !important; }

/* ── L9. Shadow overrides ── */
[data-mode="light"] .shadow-black\/70 { --tw-shadow-color: rgba(0,0,0,0.15) !important; }

/* ── L-hover. Hover bg/text overrides (dark components used inside light mode) ── */
[data-mode="light"] .hover\:bg-zinc-900:hover { background-color: #ebebec !important; }
[data-mode="light"] .hover\:bg-zinc-800:hover { background-color: #f4f4f5 !important; }
[data-mode="light"] .hover\:text-white:hover   { color: #09090b !important; }

/* ── L10. Mobile menu ── */
[data-mode="light"] .border-t.border-zinc-800 { border-color: #e4e4e7 !important; }
[data-mode="light"] #main-navbar .text-zinc-300.hover\:text-white { color: #3f3f46 !important; }
[data-mode="light"] #main-navbar button svg { stroke: #3f3f46; }

/* ── L11. Section dividers and watermark text ── */
[data-mode="light"] .opacity-\[0\.02\] { opacity: 0.04 !important; }
[data-mode="light"] .opacity-\[0\.03\] { opacity: 0 !important; }

/* ── L12. Scrollbar ── */
[data-mode="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }

/* ── L13. Section glow (softer on light) ── */
[data-mode="light"] .section-glow-tl { background: radial-gradient(ellipse at top left, rgba(var(--accent-rgb),.08) 0%, transparent 60%) !important; }
[data-mode="light"] .section-glow-br { background: radial-gradient(ellipse at bottom right, rgba(var(--accent-rgb),.06) 0%, transparent 60%) !important; }

/* ── L14. @apply-compiled white text (section-title, btn-primary) ── */
[data-mode="light"] .section-title      { color: #09090b !important; }
[data-mode="light"] .section-title span { color: var(--accent-600) !important; }
/* btn-primary stays white-on-accent */
[data-mode="light"] .btn-primary        { color: #ffffff !important; }
[data-mode="light"] .btn-primary:hover  { color: #ffffff !important; }
/* hover:text-white on the mode toggle button should work in both modes */
[data-mode="light"] #main-navbar .hover\:text-white:hover { color: #09090b !important; }

/* ── L15a. Card info panels with hardcoded dark inline backgrounds ── */
[data-mode="light"] .founder-info-panel {
  background: #ffffff !important;
  border-color: #e4e4e7 !important;
}
[data-mode="light"] .member-info-panel {
  background: #ffffff !important;
  border-color: #e4e4e7 !important;
}
/* Masters portrait card — glass info overlay (sits over photo, lightened) */
[data-mode="light"] .master-info-panel {
  background: rgba(248,250,252,0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top-color: rgba(0,0,0,0.08) !important;
}
/* Initials placeholder areas — swap dark navy for light blue-gray */
[data-mode="light"] .img-placeholder {
  background: linear-gradient(160deg, #dde6f4 0%, #e8eef8 60%, #edf2fb 100%) !important;
}
[data-mode="light"] .img-placeholder span {
  color: rgba(0,0,0,0.15) !important;
}

/* ── L15. Always-dark hero sections (bg-image + dark overlays — must stay dark) ── */
[data-mode="light"] #bannerSection,
[data-mode="light"] .hero-dark-section {
  background-color: #09090b !important;
}
/* Cancel the bg-zinc-* light overrides inside dark hero sections */
[data-mode="light"] #bannerSection .bg-zinc-950,
[data-mode="light"] .hero-dark-section .bg-zinc-950 { background-color: transparent !important; }
[data-mode="light"] #bannerSection .bg-zinc-900,
[data-mode="light"] .hero-dark-section .bg-zinc-900 { background-color: transparent !important; }
[data-mode="light"] #bannerSection .bg-black,
[data-mode="light"] .hero-dark-section .bg-black    { background-color: transparent !important; }
/* Keep text white inside dark hero sections */
[data-mode="light"] #bannerSection .text-white,
[data-mode="light"] .hero-dark-section .text-white  { color: #ffffff !important; }
[data-mode="light"] #bannerSection .text-zinc-400,
[data-mode="light"] .hero-dark-section .text-zinc-400 { color: #a1a1aa !important; }
[data-mode="light"] #bannerSection .text-zinc-600,
[data-mode="light"] .hero-dark-section .text-zinc-600 { color: #71717a !important; }
[data-mode="light"] #bannerSection .section-title,
[data-mode="light"] .hero-dark-section .section-title { color: #ffffff !important; }
[data-mode="light"] #bannerSection .section-label,
[data-mode="light"] .hero-dark-section .section-label { color: var(--accent-500) !important; }
[data-mode="light"] #bannerSection .border-zinc-800,
[data-mode="light"] .hero-dark-section .border-zinc-800 { border-color: #27272a !important; }

/* ── L16. btn-outline in light mode ── */
[data-mode="light"] .btn-outline {
  border-color: #09090b !important;
  color: #09090b !important;
}
[data-mode="light"] .btn-outline:hover {
  background-color: #09090b !important;
  color: #ffffff !important;
}