/* Smooth transition for theme switching */
[data-theme] *,
[data-theme] *::before,
[data-theme] *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== LIGHT MODE OVERRIDES ===== */

/* Body */
[data-theme="light"] body {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

/* Main text colors */
[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] td,
[data-theme="light"] span,
[data-theme="light"] div {
    color: inherit;
}

/* Headings */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
    color: #0f172a !important;
}

/* Guide page purple headings */
[data-theme="light"] h1[style*="color: #c084fc"],
[data-theme="light"] h1[style*="color:#c084fc"] {
    color: #7c3aed !important;
}
[data-theme="light"] h2[style*="color: #a78bfa"],
[data-theme="light"] h2[style*="color:#a78bfa"] {
    color: #6d28d9 !important;
}

/* Tailwind text-white overrides for structural elements */
[data-theme="light"] .text-white {
    color: #0f172a !important;
}
[data-theme="light"] .text-slate-400,
[data-theme="light"] .text-slate-300 {
    color: #475569 !important;
}
[data-theme="light"] .text-slate-500 {
    color: #64748b !important;
}
[data-theme="light"] .text-slate-200 {
    color: #334155 !important;
}

/* Glass card → light surface */
[data-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Generic card-like elements with dark translucent backgrounds */
[data-theme="light"] [style*="background: rgba(30, 41, 59"],
[data-theme="light"] [style*="background:rgba(30,41,59"],
[data-theme="light"] [style*="background: rgba(15, 23, 42"],
[data-theme="light"] [style*="background:rgba(15,23,42"] {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Promo card gradient */
[data-theme="light"] #guides-promo a[style*="background:linear-gradient"],
[data-theme="light"] #guides-promo a[style*="background: linear-gradient"] {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.9), rgba(238, 242, 255, 0.9)) !important;
    border-color: #c7d2fe !important;
}

/* Nav and header backgrounds */
[data-theme="light"] header[class*="glass-card"],
[data-theme="light"] nav .glass-card,
[data-theme="light"] header.glass-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #e2e8f0 !important;
    backdrop-filter: blur(16px) !important;
}
[data-theme="light"] header[class*="border-white"] {
    border-color: #e2e8f0 !important;
}

/* Accent colors - darken slightly for light bg contrast */
[data-theme="light"] .accent-indigo,
[data-theme="light"] .text-indigo-400 {
    color: #4f46e5 !important;
}
[data-theme="light"] .text-gradient {
    background: linear-gradient(to right, #4f46e5, #7c3aed) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Links */
[data-theme="light"] a[class*="hover:text-indigo"] {
    color: #334155;
}
[data-theme="light"] a[style*="color: #818cf8"],
[data-theme="light"] a[style*="color:#818cf8"] {
    color: #4f46e5 !important;
}
[data-theme="light"] a[style*="color: #93c5fd"],
[data-theme="light"] a[style*="color:#93c5fd"] {
    color: #2563eb !important;
}

/* Borders */
[data-theme="light"] [class*="border-slate-700"],
[data-theme="light"] [class*="border-slate-800"],
[data-theme="light"] [class*="border-slate-900"] {
    border-color: #e2e8f0 !important;
}
[data-theme="light"] [class*="border-white\\/10"],
[data-theme="light"] [class*="border-white/10"] {
    border-color: #e2e8f0 !important;
}
[data-theme="light"] [style*="border-bottom: 1px solid #334155"],
[data-theme="light"] [style*="border-bottom:1px solid #334155"] {
    border-color: #cbd5e1 !important;
}
[data-theme="light"] [style*="border: 1px solid #334155"],
[data-theme="light"] [style*="border:1px solid #334155"] {
    border-color: #cbd5e1 !important;
}

/* Dividers */
[data-theme="light"] [class*="divide-slate-800"] > * + * {
    border-color: #e2e8f0 !important;
}

/* Footer */
[data-theme="light"] footer {
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    background-color: transparent !important;
}

/* Disclaimer */
[data-theme="light"] #universal-disclaimer {
    color: #94a3b8 !important;
}

/* Inputs (if any remain) */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}

/* Badges on guide pages */
[data-theme="light"] [style*="background-color: #1e293b"],
[data-theme="light"] [style*="background-color:#1e293b"] {
    background-color: #f1f5f9 !important;
    color: #6d28d9 !important;
}

/* Table styling */
[data-theme="light"] table {
    color: #334155 !important;
}
[data-theme="light"] th {
    color: #0f172a !important;
}
[data-theme="light"] .text-red-400 {
    color: #dc2626 !important;
}
[data-theme="light"] .text-green-400 {
    color: #16a34a !important;
}

/* Hub page cards (generated by seo_inject.py) */
[data-theme="light"] .card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .card:hover {
    border-color: #a5b4fc !important;
    background: #f8fafc !important;
}
[data-theme="light"] .card h2 {
    color: #0f172a !important;
}
[data-theme="light"] .card p {
    color: #475569 !important;
}
[data-theme="light"] .read-link {
    color: #4f46e5 !important;
}

/* Hub page header/hero */
[data-theme="light"] .header {
    border-color: #e2e8f0 !important;
    background-color: #ffffff !important;
}
[data-theme="light"] .logo {
    color: #0f172a !important;
}
[data-theme="light"] .back-link {
    color: #64748b !important;
}
[data-theme="light"] .hero p {
    color: #475569 !important;
}

/* Site directory (injected by seo_inject.py) */
[data-theme="light"] #static-seo-links {
    border-color: #e2e8f0 !important;
}
[data-theme="light"] #static-seo-links details {
    color: #64748b !important;
}
[data-theme="light"] #static-seo-links a {
    color: #475569 !important;
}

/* Indigo gradient buttons */
[data-theme="light"] .indigo-gradient,
[data-theme="light"] .bg-indigo-accent {
    background-color: #4f46e5 !important;
}

/* Theme toggle button itself */
#theme-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(12px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
#theme-toggle:hover {
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
    border-color: rgba(129, 140, 248, 0.4);
}
[data-theme="light"] #theme-toggle {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
[data-theme="light"] #theme-toggle:hover {
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.2) !important;
    border-color: #a5b4fc !important;
}

/* ===== GUIDE PAGE OVERRIDES ===== */

/* Section content blocks */
[data-theme="light"] section {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0;
}

/* Table of contents box */
[data-theme="light"] .toc-box {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0;
}
[data-theme="light"] .toc-box h3 {
    color: #0f172a !important;
}
[data-theme="light"] .toc-box a {
    color: #2563eb !important;
}

/* Badges (read time, difficulty) */
[data-theme="light"] .badge {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #6d28d9 !important;
}

/* Guide body links */
[data-theme="light"] a {
    color: #2563eb;
}
[data-theme="light"] a:hover {
    color: #1d4ed8;
}

/* FAQ questions */
[data-theme="light"] .faq-question {
    color: #6d28d9 !important;
}

/* Next guide button — keep purple bg, adjust text */
[data-theme="light"] .next-guide-btn {
    background-color: #7c3aed !important;
    color: #ffffff !important;
}
[data-theme="light"] .next-guide-btn:hover {
    background-color: #6d28d9 !important;
}

/* Recommended supplies / product cards (inline bg:#1e293b and bg:#0f172a) */
[data-theme="light"] [style*="background:#1e293b"],
[data-theme="light"] [style*="background: #1e293b"],
[data-theme="light"] [style*="background-color:#1e293b"],
[data-theme="light"] [style*="background-color: #1e293b"] {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] [style*="background:#0f172a"],
[data-theme="light"] [style*="background: #0f172a"] {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* Inline text set to light colors for dark bg */
[data-theme="light"] [style*="color:#e2e8f0"],
[data-theme="light"] [style*="color: #e2e8f0"] {
    color: #1e293b !important;
}
[data-theme="light"] [style*="color:#94a3b8"],
[data-theme="light"] [style*="color: #94a3b8"] {
    color: #64748b !important;
}
[data-theme="light"] [style*="color:#64748b"],
[data-theme="light"] [style*="color: #64748b"] {
    color: #475569 !important;
}
[data-theme="light"] [style*="color:#a78bfa"],
[data-theme="light"] [style*="color: #a78bfa"] {
    color: #6d28d9 !important;
}

/* Inline border-top / border-bottom with dark colors */
[data-theme="light"] [style*="border-top:1px solid #1e293b"],
[data-theme="light"] [style*="border-top: 1px solid #1e293b"] {
    border-top-color: #e2e8f0 !important;
}
[data-theme="light"] [style*="border:1px solid #334155"],
[data-theme="light"] [style*="border: 1px solid #334155"] {
    border-color: #e2e8f0 !important;
}

/* Guide header link (back to domain) */
[data-theme="light"] header a {
    color: #2563eb !important;
}

/* Disclosure text at header */
[data-theme="light"] [style*="color:#64748b"] {
    color: #94a3b8 !important;
}

/* Strong/bold within guide text */
[data-theme="light"] strong {
    color: #0f172a;
}

/* Container background (inherits from body, but be explicit) */
[data-theme="light"] .container {
    background-color: transparent !important;
}

/* Guide page variant class names (.toc vs .toc-box, .content-section vs section) */
[data-theme="light"] .toc {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0;
}
[data-theme="light"] .toc h3 {
    color: #0f172a !important;
}
[data-theme="light"] .toc a {
    color: #2563eb !important;
}
[data-theme="light"] .content-section {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0;
}

/* Guide page variant: .pill (same as .badge) */
[data-theme="light"] .pill {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #6d28d9 !important;
}

/* Guide page variant: #toc (same as .toc-box / .toc) */
[data-theme="light"] #toc {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0;
}
[data-theme="light"] #toc h3 {
    color: #0f172a !important;
}
[data-theme="light"] #toc a {
    color: #2563eb !important;
}

/* Guide page variant: .section-box (same as .content-section / section) */
[data-theme="light"] .section-box {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0;
}

/* Remaining guide page dark-background variants (comprehensive scan) */
[data-theme="light"] .faq-section,
[data-theme="light"] .content-card,
[data-theme="light"] .jump-box,
[data-theme="light"] .pill-badge,
[data-theme="light"] .section,
[data-theme="light"] .section-block,
[data-theme="light"] .section-card,
[data-theme="light"] .section-container,
[data-theme="light"] .section-content,
[data-theme="light"] .toc-container,
[data-theme="light"] .faq-item {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0;
}

/* Inline code blocks */
[data-theme="light"] code {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Nav bars with dark inline/arbitrary backgrounds */
[data-theme="light"] nav[class*="bg-[#020617]"],
[data-theme="light"] nav[class*="bg-[#0f172a]"] {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #e2e8f0 !important;
}

/* Hero gradient overlays (dark-to-dark becomes light-to-light) */
[data-theme="light"] [class*="bg-gradient"][class*="from-[#020617]"],
[data-theme="light"] [class*="bg-gradient"][class*="to-[#020617]"],
[data-theme="light"] [class*="bg-gradient"][class*="from-[#0f172a]"],
[data-theme="light"] [class*="bg-gradient"][class*="to-[#0f172a]"] {
    background: linear-gradient(to bottom, rgba(248,250,252,0.5), #f8fafc) !important;
}

/* Keep text white ONLY inside hero sections with background images */
[data-theme="light"] section[class*="relative"] .text-white,
[data-theme="light"] [id="hero"] .text-white,
[data-theme="light"] header[id="hero"] .text-white {
    color: #0f172a !important;
}

/* Pre/code blocks */
[data-theme="light"] pre {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0;
    color: #1e293b !important;
}

/* === HERO & BUTTON TEXT: keep white on dark/image backgrounds === */

/* Hero sections with background images keep white text */
[data-theme="light"] [style*="background-image"] .text-white,
[data-theme="light"] [style*="background-image"] h1,
[data-theme="light"] [style*="background-image"] h2,
[data-theme="light"] .bg-cover .text-white,
[data-theme="light"] .bg-cover h1,
[data-theme="light"] .bg-cover h2 {
    color: #ffffff !important;
}
[data-theme="light"] [style*="background-image"] .text-slate-400,
[data-theme="light"] .bg-cover .text-slate-400,
[data-theme="light"] [style*="background-image"] .text-slate-300,
[data-theme="light"] .bg-cover .text-slate-300 {
    color: #cbd5e1 !important;
}

/* Buttons with colored backgrounds keep white text */
[data-theme="light"] a[class*="accent-gradient"],
[data-theme="light"] a[class*="bg-indigo-6"],
[data-theme="light"] a[class*="bg-indigo-accent"],
[data-theme="light"] a[style*="background:#f97316"],
[data-theme="light"] a[style*="background:#e60023"],
[data-theme="light"] a[style*="background:#1877f2"],
[data-theme="light"] a[style*="background:#000"] {
    color: #ffffff !important;
}

/* Dark background utility classes on sections and buttons */
[data-theme="light"] .bg-slate-900\/30,
[data-theme="light"] [class*="bg-slate-900"] {
    background-color: #f1f5f9 !important;
}
[data-theme="light"] a.bg-slate-800,
[data-theme="light"] a[class*="bg-slate-800"] {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}
[data-theme="light"] a[class*="bg-slate-800"]:hover {
    background-color: #cbd5e1 !important;
}

/* Glass card inner text — ensure readable contrast on white card */
[data-theme="light"] .glass-card .text-slate-200 {
    color: #334155 !important;
}
[data-theme="light"] .glass-card .text-slate-400 {
    color: #64748b !important;
}
[data-theme="light"] .glass-card .text-indigo-400 {
    color: #4f46e5 !important;
}
[data-theme="light"] .glass-card .text-sm {
    color: #475569;
}

/* Hero background via CSS class (.hero-bg) */
[data-theme="light"] .hero-bg .text-white,
[data-theme="light"] .hero-bg h1,
[data-theme="light"] .hero-bg h2 {
    color: #ffffff !important;
}
[data-theme="light"] .hero-bg .text-slate-400,
[data-theme="light"] .hero-bg .text-slate-300 {
    color: #cbd5e1 !important;
}

/* Hero background classes: clear dark gradients in light mode */
[data-theme="light"] .hero-gradient,
[data-theme="light"] .hero-glow,
[data-theme="light"] .hero-overlay {
    background: transparent !important;
}

/* Keep hero text white over images (all hero class variants) */
[data-theme="light"] .hero-overlay ~ * .text-white,
[data-theme="light"] .hero-overlay ~ * h1,
[data-theme="light"] .hero-glow .text-white,
[data-theme="light"] .hero-glow h1,
[data-theme="light"] .hero-glow h2,
[data-theme="light"] .hero-gradient .text-white:not(nav .text-white),
[data-theme="light"] .hero-gradient h1 {
    color: #0f172a !important;
}

/* When hero-gradient is on body, restore light page background */
[data-theme="light"] body.hero-gradient {
    background: #f8fafc !important;
}