/* Abloom Solver staging: dark-mode readability fixes for tool pages.
   The theme toggle sets data-theme="dark" on <html>; Tailwind dark: variants
   follow the .dark class (unified in the theme script). These rules catch the
   remaining hardcoded light colors (white cards, dark text) that have no
   dark: variant, so text stays readable on dark backgrounds. */
html[data-theme="dark"] .bg-white { background-color: #1e293b !important; }
html[data-theme="dark"] .bg-slate-50 { background-color: #0f172a !important; }
html[data-theme="dark"] .bg-slate-100 { background-color: #1e293b !important; }
html[data-theme="dark"] .bg-slate-200 { background-color: #334155 !important; }
html[data-theme="dark"] .text-slate-900 { color: #f1f5f9 !important; }
html[data-theme="dark"] .text-slate-800 { color: #e2e8f0 !important; }
html[data-theme="dark"] .text-slate-700 { color: #cbd5e1 !important; }
html[data-theme="dark"] .text-slate-600 { color: #cbd5e1 !important; }
html[data-theme="dark"] .text-slate-500 { color: #94a3b8 !important; }
html[data-theme="dark"] .border-slate-200 { border-color: #334155 !important; }
html[data-theme="dark"] .border-slate-300 { border-color: #475569 !important; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background-color: #0f172a !important; color: #f1f5f9 !important; border-color: #334155 !important;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b !important; }
/* Page banner: the light gradient has no dark variant, while its title turns
   light in dark mode, so the banner must go dark too. */
html[data-theme="dark"] header.bg-gradient-to-b { background: linear-gradient(to bottom, #0f172a, #1e293b) !important; }
html[data-theme="dark"] .text-emerald-700 { color: #34d399 !important; }
html[data-theme="dark"] .text-emerald-600 { color: #6ee7b7 !important; }