/* Site-wide light theme, layered on top of pages that were built dark-only
 * with hardcoded Tailwind classes (no dark: variants). Every selector here
 * is scoped under html[data-theme="light"], which gives it higher
 * specificity than the bare classes/inline <style> rules it overrides, so
 * source order doesn't matter -- these win regardless of where this
 * stylesheet is linked. See public/theme.js for the toggle itself.
 */

html[data-theme="light"] {
  color-scheme: light;
}

/* ---- Structural backgrounds ---- */
html[data-theme="light"] .bg-slate-950 { background-color: #ffffff !important; }
html[data-theme="light"] .bg-slate-950\/50 { background-color: rgba(255,255,255,.75) !important; }
html[data-theme="light"] .bg-slate-950\/60 { background-color: rgba(255,255,255,.8) !important; }
html[data-theme="light"] .bg-slate-950\/70 { background-color: rgba(255,255,255,.85) !important; }
html[data-theme="light"] .bg-slate-950\/95 { background-color: rgba(255,255,255,.97) !important; }
html[data-theme="light"] .bg-slate-900 { background-color: #f8fafc !important; }
html[data-theme="light"] .bg-slate-900\/40 { background-color: rgba(248,250,252,.85) !important; }
html[data-theme="light"] .bg-slate-800 { background-color: #f1f5f9 !important; }
html[data-theme="light"] .bg-slate-800\/50 { background-color: rgba(241,245,249,.7) !important; }
html[data-theme="light"] .bg-slate-700 { background-color: #e2e8f0 !important; }
html[data-theme="light"] .bg-slate-500 { background-color: #94a3b8 !important; }
html[data-theme="light"] .bg-slate-500\/15 { background-color: rgba(148,163,184,.2) !important; }
html[data-theme="light"] .bg-white\/5 { background-color: rgba(15,23,42,.04) !important; }
html[data-theme="light"] .bg-white\/10 { background-color: rgba(15,23,42,.06) !important; }

/* ---- Borders ---- */
html[data-theme="light"] .border-white\/5 { border-color: rgba(15,23,42,.06) !important; }
html[data-theme="light"] .border-white\/10 { border-color: rgba(15,23,42,.10) !important; }
html[data-theme="light"] .border-white\/15 { border-color: rgba(15,23,42,.13) !important; }
html[data-theme="light"] .border-white\/20 { border-color: rgba(15,23,42,.16) !important; }
html[data-theme="light"] .border-slate-950 { border-color: #e2e8f0 !important; }
html[data-theme="light"] .divide-white\/5 > * + * { border-color: rgba(15,23,42,.06) !important; }
html[data-theme="light"] .hover\:border-white\/20:hover { border-color: rgba(15,23,42,.18) !important; }

/* ---- Text ---- */
html[data-theme="light"] .text-white { color: #0f172a !important; }
html[data-theme="light"] .text-white\/10 { color: rgba(15,23,42,.10) !important; }
html[data-theme="light"] .text-slate-100 { color: #0f172a !important; }
html[data-theme="light"] .text-slate-200 { color: #1e293b !important; }
html[data-theme="light"] .text-slate-300 { color: #334155 !important; }
html[data-theme="light"] .text-slate-400 { color: #475569 !important; }
html[data-theme="light"] .hover\:text-white:hover { color: #0f172a !important; }
html[data-theme="light"] .hover\:text-slate-300:hover { color: #334155 !important; }

/* ---- Accent text, darkened for AA contrast on a white background ---- */
html[data-theme="light"] .text-teal-200 { color: #0f766e !important; }
html[data-theme="light"] .text-teal-300 { color: #0f766e !important; }
html[data-theme="light"] .text-teal-400 { color: #0d9488 !important; }
html[data-theme="light"] .hover\:text-teal-300:hover { color: #0f766e !important; }
html[data-theme="light"] .hover\:text-teal-200:hover { color: #0f766e !important; }
html[data-theme="light"] .text-sky-400 { color: #0369a1 !important; }
html[data-theme="light"] .text-rose-300 { color: #be123c !important; }
html[data-theme="light"] .text-rose-400 { color: #be123c !important; }
html[data-theme="light"] .hover\:text-rose-300:hover { color: #be123c !important; }
html[data-theme="light"] .text-amber-300 { color: #b45309 !important; }
html[data-theme="light"] .text-amber-400 { color: #b45309 !important; }
html[data-theme="light"] .text-red-300 { color: #b91c1c !important; }
html[data-theme="light"] .text-red-400 { color: #b91c1c !important; }
html[data-theme="light"] .text-green-400 { color: #15803d !important; }

/* ---- Hero / header gradient bands ---- */
html[data-theme="light"] .from-teal-950\/30 { --tw-gradient-from: #ccfbf1 !important; --tw-gradient-to: rgba(204,251,241,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html[data-theme="light"] .from-teal-950\/40 { --tw-gradient-from: #ccfbf1 !important; --tw-gradient-to: rgba(204,251,241,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html[data-theme="light"] .from-slate-900\/60 { --tw-gradient-from: rgba(255,255,255,.6) !important; --tw-gradient-to: rgba(255,255,255,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html[data-theme="light"] .to-slate-900 { --tw-gradient-to: #f8fafc !important; }
html[data-theme="light"] .to-slate-950 { --tw-gradient-to: #ffffff !important; }

/* ---- Form fields ---- */
html[data-theme="light"] input.bg-slate-950,
html[data-theme="light"] select.bg-slate-950,
html[data-theme="light"] textarea.bg-slate-950 { background-color: #ffffff !important; color: #0f172a !important; }

/* ---- Custom decorative classes (defined per-page in an inline <style>
 * block; the attribute selector below always outranks the bare class it's
 * overriding, so this wins regardless of source order). ---- */
html[data-theme="light"] .dot-pattern { background-image: radial-gradient(rgba(15,23,42,0.07) 1px, transparent 1px) !important; }
html[data-theme="light"] .glow-card { box-shadow: 0 0 0 1px rgba(15,23,42,0.08), 0 20px 60px -20px rgba(13,148,136,0.25) !important; }
html[data-theme="light"] .demo-hint__tip { background: #ffffff !important; border-color: rgba(15,23,42,.12) !important; color: #334155 !important; box-shadow: 0 20px 40px -12px rgba(15,23,42,.25) !important; }
html[data-theme="light"] .email-sample { background: #f8fafc !important; border-color: rgba(15,23,42,.10) !important; color: #334155 !important; }

/* ---- Dark mode: Tailwind Slate 800 page background site-wide. Pages were
 * authored on bg-slate-950 (#020617, near-black navy); the page shell moves
 * to slate-800, cards one step lighter so they still read as raised, and the
 * translucent nav/CTA variants and hero gradient stops follow the same base.
 * Guarded by [data-theme="dark"] because theme.js always sets an explicit
 * data-theme attribute, so this is as reliable as a bare default. ---- */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] .bg-slate-950 { background-color: #1e293b !important; }
html[data-theme="dark"] .bg-slate-950\/50 { background-color: rgba(30,41,59,.5) !important; }
html[data-theme="dark"] .bg-slate-950\/60 { background-color: rgba(30,41,59,.6) !important; }
html[data-theme="dark"] .bg-slate-950\/70 { background-color: rgba(30,41,59,.7) !important; }
html[data-theme="dark"] .bg-slate-950\/95 { background-color: rgba(30,41,59,.95) !important; }
html[data-theme="dark"] .to-slate-950 { --tw-gradient-to: #1e293b !important; }
html[data-theme="dark"] .bg-slate-900 { background-color: #263447 !important; }
html[data-theme="dark"] .bg-slate-900\/40 { background-color: rgba(38,52,71,.4) !important; }
html[data-theme="dark"] .from-slate-900\/60 { --tw-gradient-from: rgba(38,52,71,.6) !important; --tw-gradient-to: rgba(38,52,71,0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html[data-theme="dark"] .to-slate-900 { --tw-gradient-to: #263447 !important; }
html[data-theme="dark"] .bg-slate-800 { background-color: #334155 !important; }
html[data-theme="dark"] .bg-slate-800\/50 { background-color: rgba(51,65,85,.5) !important; }

/* ---- Blog post body copy (.prose), consistent across every post ---- */
html[data-theme="light"] .prose p,
html[data-theme="light"] .prose li,
html[data-theme="light"] .prose td { color: #334155 !important; }
html[data-theme="light"] .prose h2,
html[data-theme="light"] .prose h3,
html[data-theme="light"] .prose strong,
html[data-theme="light"] .prose th { color: #0f172a !important; }
html[data-theme="light"] .prose th,
html[data-theme="light"] .prose td { border-bottom-color: rgba(15,23,42,.10) !important; }