/* Default (light) */
:root {
  color-scheme: light;
}

/* Dark mode when html[data-theme="dark"] is set */
html[data-theme="dark"] {
  color-scheme: dark;
  background: #0b1220;         /* page bg */
}

/* Common utility overrides so your existing Tailwind classes still look good in dark */
html[data-theme="dark"] body { background: #0b1220; color: #e5e7eb; }
html[data-theme="dark"] .bg-white { background-color: #0f172a !important; }  /* slate-900 */
html[data-theme="dark"] .text-slate-800 { color: #e5e7eb !important; }       /* lighten text */
html[data-theme="dark"] .text-slate-700 { color: #cbd5e1 !important; }
html[data-theme="dark"] .text-slate-600 { color: #94a3b8 !important; }
html[data-theme="dark"] .text-slate-500 { color: #94a3b8 !important; }
html[data-theme="dark"] .border { border-color: #334155 !important; }        /* slate-700 */
html[data-theme="dark"] .shadow { box-shadow: 0 1px 2px rgba(0,0,0,.6) !important; }
html[data-theme="dark"] select, 
html[data-theme="dark"] button, 
html[data-theme="dark"] .rounded-xl { background-color: #0b1220; color: #e5e7eb; }

/* Optional: links */
html[data-theme="dark"] a { color: #60a5fa; }