/*
 * dark-overrides.css — served as a static asset, bypasses Tailwind purge.
 * Loaded via <link> in index.html so it always ships to the browser.
 */
html.dark .bg-red-50{background-color:rgba(239,68,68,.10)!important}
html.dark .bg-red-100{background-color:rgba(239,68,68,.18)!important}
html.dark .border-red-200{border-color:rgba(239,68,68,.30)!important}
html.dark .text-red-700{color:#fca5a5!important}
html.dark .text-red-600{color:#f87171!important}
html.dark .text-red-500{color:#f87171!important}
html.dark .text-red-400{color:#fca5a5!important}
html.dark .hover\:bg-red-50:hover{background-color:rgba(239,68,68,.12)!important}
html.dark .hover\:bg-red-100:hover{background-color:rgba(239,68,68,.20)!important}
html.dark .hover\:text-red-600:hover{color:#f87171!important}
html.dark .bg-red-500\/10{background-color:rgba(239,68,68,.12)!important}
html.dark .border-red-500\/30{border-color:rgba(239,68,68,.32)!important}
html.dark .bg-amber-50{background-color:rgba(245,158,11,.10)!important}
html.dark .bg-amber-100{background-color:rgba(245,158,11,.18)!important}
html.dark .border-amber-200{border-color:rgba(245,158,11,.30)!important}
html.dark .bg-amber-500\/10{background-color:rgba(245,158,11,.10)!important}
html.dark .border-amber-500\/30{border-color:rgba(245,158,11,.30)!important}
html.dark .text-amber-900{color:#fde68a!important}
html.dark .text-amber-700{color:#fcd34d!important}
html.dark .text-amber-600{color:#fbbf24!important}
html.dark .text-amber-500{color:#fbbf24!important}
html.dark .bg-orange-50{background-color:rgba(249,115,22,.10)!important}
html.dark .border-orange-200{border-color:rgba(249,115,22,.28)!important}
html.dark .text-orange-700{color:#fdba74!important}
html.dark .text-orange-600{color:#fb923c!important}
html.dark .bg-yellow-50{background-color:rgba(234,179,8,.10)!important}
html.dark .border-yellow-200{border-color:rgba(234,179,8,.28)!important}
html.dark .text-yellow-700{color:#fde047!important}
html.dark .bg-green-50{background-color:rgba(34,197,94,.10)!important}
html.dark .bg-green-100{background-color:rgba(34,197,94,.18)!important}
html.dark .border-green-200{border-color:rgba(34,197,94,.28)!important}
html.dark .text-green-700{color:#86efac!important}
html.dark .text-green-600{color:#4ade80!important}
html.dark .bg-emerald-50{background-color:rgba(16,185,129,.10)!important}
html.dark .border-emerald-200{border-color:rgba(16,185,129,.28)!important}
html.dark .text-emerald-700{color:#6ee7b7!important}
html.dark .text-emerald-600{color:#34d399!important}
html.dark .bg-teal-50{background-color:rgba(20,184,166,.10)!important}
html.dark .border-teal-200{border-color:rgba(20,184,166,.28)!important}
html.dark .text-teal-700{color:#5eead4!important}
html.dark .bg-blue-50{background-color:rgba(59,130,246,.10)!important}
html.dark .bg-blue-100{background-color:rgba(59,130,246,.18)!important}
html.dark .border-blue-200{border-color:rgba(59,130,246,.28)!important}
html.dark .text-blue-700{color:#93c5fd!important}
html.dark .text-blue-600{color:#60a5fa!important}
html.dark .bg-indigo-50{background-color:rgba(99,102,241,.10)!important}
html.dark .border-indigo-200{border-color:rgba(99,102,241,.28)!important}
html.dark .text-indigo-700{color:#a5b4fc!important}
html.dark .bg-sky-50{background-color:rgba(14,165,233,.10)!important}
html.dark .text-sky-700{color:#7dd3fc!important}
html.dark .bg-cyan-50{background-color:rgba(6,182,212,.10)!important}
html.dark .text-cyan-700{color:#67e8f9!important}
html.dark .bg-purple-50{background-color:rgba(168,85,247,.10)!important}
html.dark .border-purple-200{border-color:rgba(168,85,247,.28)!important}
html.dark .text-purple-700{color:#d8b4fe!important}
html.dark .text-purple-600{color:#c084fc!important}
html.dark .bg-violet-50{background-color:rgba(139,92,246,.10)!important}
html.dark .text-violet-700{color:#c4b5fd!important}
html.dark .bg-pink-50{background-color:rgba(236,72,153,.10)!important}
html.dark .text-pink-700{color:#f9a8d4!important}
html.dark .bg-rose-50{background-color:rgba(244,63,94,.10)!important}
html.dark .text-rose-700{color:#fda4af!important}
html.dark .bg-green-600{background-color:#16a34a!important}
html.dark .bg-green-700{background-color:#15803d!important}
html.dark .hover\:bg-green-700:hover{background-color:#15803d!important}
html.dark .bg-amber-600{background-color:#d97706!important}
html.dark .bg-amber-700{background-color:#b45309!important}
html.dark .bg-surface-800{background-color:#1b1a17!important}
html.dark .bg-surface-900{background-color:#15140f!important}
html.dark .text-surface-100{color:#f0eee8!important}
html.dark .text-surface-50{color:#faf9f6!important}
html.dark .shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.55),0 8px 10px -6px rgba(0,0,0,.45)!important}
html.dark .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.45),0 4px 6px -4px rgba(0,0,0,.35)!important}
html.dark .shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.38),0 2px 4px -2px rgba(0,0,0,.28)!important}

/* ══ Hover backgrounds — surface/brand/semantic (the core mouse-over fix) ═══ */
/* Without these, hover:bg-surface-50 etc. flash to their LIGHT value (near-   */
/* white) on dark backgrounds because Tailwind's hover variant is a separate   */
/* class that our non-hover overrides don't cover.                             */
html.dark .hover\:bg-surface-50:hover{background-color:#1b1a17!important}
html.dark .hover\:bg-surface-100:hover{background-color:#26242e!important}
html.dark .hover\:bg-surface-200:hover{background-color:#322f39!important}
html.dark .hover\:bg-brand-50:hover{background-color:rgba(91,84,232,.18)!important}
html.dark .hover\:bg-brand-100:hover{background-color:rgba(91,84,232,.22)!important}
html.dark .hover\:bg-brand-700:hover{background-color:#4b44d8!important}
html.dark .hover\:bg-blue-100:hover{background-color:rgba(59,130,246,.22)!important}
html.dark .hover\:bg-green-100:hover{background-color:rgba(34,197,94,.22)!important}
html.dark .hover\:bg-cream-100:hover{background-color:#201e26!important}
html.dark .hover\:bg-amber-700:hover{background-color:#b45309!important}
html.dark .hover\:bg-brand-600\/5:hover{background-color:rgba(91,84,232,.08)!important}
/* hover:border variants that also flash in dark */
html.dark .hover\:border-brand-300:hover{border-color:rgba(91,84,232,.40)!important}
html.dark .hover\:border-surface-300:hover{border-color:#3a3743!important}