/* Dark-mode overrides for page content (#main-content) in both portal shells.
 * Pages still use raw light-only Tailwind utilities (bg-white, text-gray-*,
 * border-[#e4e7eb]); remap the common ones to the dark tokens rather than
 * migrating ~150 templates at once. Selector duplicated for [data-theme=dark]
 * and OS-prefers-dark (unless the viewer explicitly chose Light). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #main-content { background: var(--color-page-bg); color: var(--color-text); }
  :root:not([data-theme="light"]) #main-content .bg-white, :root:not([data-theme="light"]) header .bg-white, :root:not([data-theme="light"]) nav .bg-white { background-color: var(--color-surface); }
  :root:not([data-theme="light"]) #main-content .bg-gray-50, :root:not([data-theme="light"]) header .bg-gray-50, :root:not([data-theme="light"]) nav .bg-gray-50, :root:not([data-theme="light"]) #main-content .bg-\[\#f8f9fc\], :root:not([data-theme="light"]) header .bg-\[\#f8f9fc\], :root:not([data-theme="light"]) nav .bg-\[\#f8f9fc\] { background-color: #182231; }
  :root:not([data-theme="light"]) #main-content .bg-gray-100, :root:not([data-theme="light"]) header .bg-gray-100, :root:not([data-theme="light"]) nav .bg-gray-100, :root:not([data-theme="light"]) #main-content .bg-gray-200, :root:not([data-theme="light"]) header .bg-gray-200, :root:not([data-theme="light"]) nav .bg-gray-200 { background-color: #273244; }
  :root:not([data-theme="light"]) #main-content .hover\:bg-gray-100:hover, :root:not([data-theme="light"]) header .hover\:bg-gray-100:hover, :root:not([data-theme="light"]) nav .hover\:bg-gray-100:hover, :root:not([data-theme="light"]) #main-content .hover\:bg-gray-50:hover, :root:not([data-theme="light"]) header .hover\:bg-gray-50:hover, :root:not([data-theme="light"]) nav .hover\:bg-gray-50:hover { background-color: #273244; }
  :root:not([data-theme="light"]) #main-content .text-gray-900, :root:not([data-theme="light"]) header .text-gray-900, :root:not([data-theme="light"]) nav .text-gray-900, :root:not([data-theme="light"]) #main-content .text-gray-800, :root:not([data-theme="light"]) header .text-gray-800, :root:not([data-theme="light"]) nav .text-gray-800 { color: var(--color-text); }
  :root:not([data-theme="light"]) #main-content .text-gray-700, :root:not([data-theme="light"]) header .text-gray-700, :root:not([data-theme="light"]) nav .text-gray-700, :root:not([data-theme="light"]) #main-content .text-gray-600, :root:not([data-theme="light"]) header .text-gray-600, :root:not([data-theme="light"]) nav .text-gray-600 { color: #d1d5db; }
  :root:not([data-theme="light"]) #main-content .text-gray-500, :root:not([data-theme="light"]) header .text-gray-500, :root:not([data-theme="light"]) nav .text-gray-500, :root:not([data-theme="light"]) #main-content .text-gray-400, :root:not([data-theme="light"]) header .text-gray-400, :root:not([data-theme="light"]) nav .text-gray-400 { color: var(--color-text-muted); }
  :root:not([data-theme="light"]) #main-content .border-\[\#e4e7eb\], :root:not([data-theme="light"]) header .border-\[\#e4e7eb\], :root:not([data-theme="light"]) nav .border-\[\#e4e7eb\], :root:not([data-theme="light"]) #main-content .border-gray-100, :root:not([data-theme="light"]) header .border-gray-100, :root:not([data-theme="light"]) nav .border-gray-100, :root:not([data-theme="light"]) #main-content .border-gray-200, :root:not([data-theme="light"]) header .border-gray-200, :root:not([data-theme="light"]) nav .border-gray-200, :root:not([data-theme="light"]) #main-content .border-gray-300, :root:not([data-theme="light"]) header .border-gray-300, :root:not([data-theme="light"]) nav .border-gray-300 { border-color: var(--color-surface-border); }
  :root:not([data-theme="light"]) #main-content input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), :root:not([data-theme="light"]) header input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), :root:not([data-theme="light"]) nav input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), :root:not([data-theme="light"]) #main-content select, :root:not([data-theme="light"]) header select, :root:not([data-theme="light"]) nav select, :root:not([data-theme="light"]) #main-content textarea, :root:not([data-theme="light"]) header textarea, :root:not([data-theme="light"]) nav textarea { background-color: var(--color-page-bg); color: var(--color-text); border-color: var(--color-surface-border); }
:root:not([data-theme="light"]) #main-content .bg-red-50, :root:not([data-theme="light"]) header .bg-red-50, :root:not([data-theme="light"]) nav .bg-red-50, :root:not([data-theme="light"]) #main-content .bg-red-100, :root:not([data-theme="light"]) header .bg-red-100, :root:not([data-theme="light"]) nav .bg-red-100, :root:not([data-theme="light"]) #main-content .bg-rose-50, :root:not([data-theme="light"]) header .bg-rose-50, :root:not([data-theme="light"]) nav .bg-rose-50, :root:not([data-theme="light"]) #main-content .bg-rose-100, :root:not([data-theme="light"]) header .bg-rose-100, :root:not([data-theme="light"]) nav .bg-rose-100 { background-color: var(--color-danger-bg); }
:root:not([data-theme="light"]) #main-content .text-red-600, :root:not([data-theme="light"]) header .text-red-600, :root:not([data-theme="light"]) nav .text-red-600, :root:not([data-theme="light"]) #main-content .text-red-700, :root:not([data-theme="light"]) header .text-red-700, :root:not([data-theme="light"]) nav .text-red-700, :root:not([data-theme="light"]) #main-content .text-red-800, :root:not([data-theme="light"]) header .text-red-800, :root:not([data-theme="light"]) nav .text-red-800, :root:not([data-theme="light"]) #main-content .text-rose-600, :root:not([data-theme="light"]) header .text-rose-600, :root:not([data-theme="light"]) nav .text-rose-600, :root:not([data-theme="light"]) #main-content .text-rose-700, :root:not([data-theme="light"]) header .text-rose-700, :root:not([data-theme="light"]) nav .text-rose-700, :root:not([data-theme="light"]) #main-content .text-rose-800, :root:not([data-theme="light"]) header .text-rose-800, :root:not([data-theme="light"]) nav .text-rose-800 { color: var(--color-danger); }
:root:not([data-theme="light"]) #main-content .border-red-100, :root:not([data-theme="light"]) header .border-red-100, :root:not([data-theme="light"]) nav .border-red-100, :root:not([data-theme="light"]) #main-content .border-red-200, :root:not([data-theme="light"]) header .border-red-200, :root:not([data-theme="light"]) nav .border-red-200, :root:not([data-theme="light"]) #main-content .border-red-300, :root:not([data-theme="light"]) header .border-red-300, :root:not([data-theme="light"]) nav .border-red-300, :root:not([data-theme="light"]) #main-content .border-rose-100, :root:not([data-theme="light"]) header .border-rose-100, :root:not([data-theme="light"]) nav .border-rose-100, :root:not([data-theme="light"]) #main-content .border-rose-200, :root:not([data-theme="light"]) header .border-rose-200, :root:not([data-theme="light"]) nav .border-rose-200, :root:not([data-theme="light"]) #main-content .border-rose-300, :root:not([data-theme="light"]) header .border-rose-300, :root:not([data-theme="light"]) nav .border-rose-300 { border-color: var(--color-danger-border); }
:root:not([data-theme="light"]) #main-content .bg-green-50, :root:not([data-theme="light"]) header .bg-green-50, :root:not([data-theme="light"]) nav .bg-green-50, :root:not([data-theme="light"]) #main-content .bg-green-100, :root:not([data-theme="light"]) header .bg-green-100, :root:not([data-theme="light"]) nav .bg-green-100, :root:not([data-theme="light"]) #main-content .bg-emerald-50, :root:not([data-theme="light"]) header .bg-emerald-50, :root:not([data-theme="light"]) nav .bg-emerald-50, :root:not([data-theme="light"]) #main-content .bg-emerald-100, :root:not([data-theme="light"]) header .bg-emerald-100, :root:not([data-theme="light"]) nav .bg-emerald-100 { background-color: var(--color-success-bg); }
:root:not([data-theme="light"]) #main-content .text-green-600, :root:not([data-theme="light"]) header .text-green-600, :root:not([data-theme="light"]) nav .text-green-600, :root:not([data-theme="light"]) #main-content .text-green-700, :root:not([data-theme="light"]) header .text-green-700, :root:not([data-theme="light"]) nav .text-green-700, :root:not([data-theme="light"]) #main-content .text-green-800, :root:not([data-theme="light"]) header .text-green-800, :root:not([data-theme="light"]) nav .text-green-800, :root:not([data-theme="light"]) #main-content .text-emerald-600, :root:not([data-theme="light"]) header .text-emerald-600, :root:not([data-theme="light"]) nav .text-emerald-600, :root:not([data-theme="light"]) #main-content .text-emerald-700, :root:not([data-theme="light"]) header .text-emerald-700, :root:not([data-theme="light"]) nav .text-emerald-700, :root:not([data-theme="light"]) #main-content .text-emerald-800, :root:not([data-theme="light"]) header .text-emerald-800, :root:not([data-theme="light"]) nav .text-emerald-800 { color: var(--color-success); }
:root:not([data-theme="light"]) #main-content .border-green-100, :root:not([data-theme="light"]) header .border-green-100, :root:not([data-theme="light"]) nav .border-green-100, :root:not([data-theme="light"]) #main-content .border-green-200, :root:not([data-theme="light"]) header .border-green-200, :root:not([data-theme="light"]) nav .border-green-200, :root:not([data-theme="light"]) #main-content .border-green-300, :root:not([data-theme="light"]) header .border-green-300, :root:not([data-theme="light"]) nav .border-green-300, :root:not([data-theme="light"]) #main-content .border-emerald-100, :root:not([data-theme="light"]) header .border-emerald-100, :root:not([data-theme="light"]) nav .border-emerald-100, :root:not([data-theme="light"]) #main-content .border-emerald-200, :root:not([data-theme="light"]) header .border-emerald-200, :root:not([data-theme="light"]) nav .border-emerald-200, :root:not([data-theme="light"]) #main-content .border-emerald-300, :root:not([data-theme="light"]) header .border-emerald-300, :root:not([data-theme="light"]) nav .border-emerald-300 { border-color: var(--color-success-border); }
:root:not([data-theme="light"]) #main-content .bg-amber-50, :root:not([data-theme="light"]) header .bg-amber-50, :root:not([data-theme="light"]) nav .bg-amber-50, :root:not([data-theme="light"]) #main-content .bg-amber-100, :root:not([data-theme="light"]) header .bg-amber-100, :root:not([data-theme="light"]) nav .bg-amber-100, :root:not([data-theme="light"]) #main-content .bg-yellow-50, :root:not([data-theme="light"]) header .bg-yellow-50, :root:not([data-theme="light"]) nav .bg-yellow-50, :root:not([data-theme="light"]) #main-content .bg-yellow-100, :root:not([data-theme="light"]) header .bg-yellow-100, :root:not([data-theme="light"]) nav .bg-yellow-100, :root:not([data-theme="light"]) #main-content .bg-orange-50, :root:not([data-theme="light"]) header .bg-orange-50, :root:not([data-theme="light"]) nav .bg-orange-50, :root:not([data-theme="light"]) #main-content .bg-orange-100, :root:not([data-theme="light"]) header .bg-orange-100, :root:not([data-theme="light"]) nav .bg-orange-100 { background-color: var(--color-warning-bg); }
:root:not([data-theme="light"]) #main-content .text-amber-600, :root:not([data-theme="light"]) header .text-amber-600, :root:not([data-theme="light"]) nav .text-amber-600, :root:not([data-theme="light"]) #main-content .text-amber-700, :root:not([data-theme="light"]) header .text-amber-700, :root:not([data-theme="light"]) nav .text-amber-700, :root:not([data-theme="light"]) #main-content .text-amber-800, :root:not([data-theme="light"]) header .text-amber-800, :root:not([data-theme="light"]) nav .text-amber-800, :root:not([data-theme="light"]) #main-content .text-yellow-600, :root:not([data-theme="light"]) header .text-yellow-600, :root:not([data-theme="light"]) nav .text-yellow-600, :root:not([data-theme="light"]) #main-content .text-yellow-700, :root:not([data-theme="light"]) header .text-yellow-700, :root:not([data-theme="light"]) nav .text-yellow-700, :root:not([data-theme="light"]) #main-content .text-yellow-800, :root:not([data-theme="light"]) header .text-yellow-800, :root:not([data-theme="light"]) nav .text-yellow-800, :root:not([data-theme="light"]) #main-content .text-orange-600, :root:not([data-theme="light"]) header .text-orange-600, :root:not([data-theme="light"]) nav .text-orange-600, :root:not([data-theme="light"]) #main-content .text-orange-700, :root:not([data-theme="light"]) header .text-orange-700, :root:not([data-theme="light"]) nav .text-orange-700, :root:not([data-theme="light"]) #main-content .text-orange-800, :root:not([data-theme="light"]) header .text-orange-800, :root:not([data-theme="light"]) nav .text-orange-800 { color: var(--color-warning); }
:root:not([data-theme="light"]) #main-content .border-amber-100, :root:not([data-theme="light"]) header .border-amber-100, :root:not([data-theme="light"]) nav .border-amber-100, :root:not([data-theme="light"]) #main-content .border-amber-200, :root:not([data-theme="light"]) header .border-amber-200, :root:not([data-theme="light"]) nav .border-amber-200, :root:not([data-theme="light"]) #main-content .border-amber-300, :root:not([data-theme="light"]) header .border-amber-300, :root:not([data-theme="light"]) nav .border-amber-300, :root:not([data-theme="light"]) #main-content .border-yellow-100, :root:not([data-theme="light"]) header .border-yellow-100, :root:not([data-theme="light"]) nav .border-yellow-100, :root:not([data-theme="light"]) #main-content .border-yellow-200, :root:not([data-theme="light"]) header .border-yellow-200, :root:not([data-theme="light"]) nav .border-yellow-200, :root:not([data-theme="light"]) #main-content .border-yellow-300, :root:not([data-theme="light"]) header .border-yellow-300, :root:not([data-theme="light"]) nav .border-yellow-300, :root:not([data-theme="light"]) #main-content .border-orange-100, :root:not([data-theme="light"]) header .border-orange-100, :root:not([data-theme="light"]) nav .border-orange-100, :root:not([data-theme="light"]) #main-content .border-orange-200, :root:not([data-theme="light"]) header .border-orange-200, :root:not([data-theme="light"]) nav .border-orange-200, :root:not([data-theme="light"]) #main-content .border-orange-300, :root:not([data-theme="light"]) header .border-orange-300, :root:not([data-theme="light"]) nav .border-orange-300 { border-color: var(--color-warning-border); }
:root:not([data-theme="light"]) #main-content .bg-blue-50, :root:not([data-theme="light"]) header .bg-blue-50, :root:not([data-theme="light"]) nav .bg-blue-50, :root:not([data-theme="light"]) #main-content .bg-blue-100, :root:not([data-theme="light"]) header .bg-blue-100, :root:not([data-theme="light"]) nav .bg-blue-100, :root:not([data-theme="light"]) #main-content .bg-sky-50, :root:not([data-theme="light"]) header .bg-sky-50, :root:not([data-theme="light"]) nav .bg-sky-50, :root:not([data-theme="light"]) #main-content .bg-sky-100, :root:not([data-theme="light"]) header .bg-sky-100, :root:not([data-theme="light"]) nav .bg-sky-100, :root:not([data-theme="light"]) #main-content .bg-indigo-50, :root:not([data-theme="light"]) header .bg-indigo-50, :root:not([data-theme="light"]) nav .bg-indigo-50, :root:not([data-theme="light"]) #main-content .bg-indigo-100, :root:not([data-theme="light"]) header .bg-indigo-100, :root:not([data-theme="light"]) nav .bg-indigo-100, :root:not([data-theme="light"]) #main-content .bg-purple-50, :root:not([data-theme="light"]) header .bg-purple-50, :root:not([data-theme="light"]) nav .bg-purple-50, :root:not([data-theme="light"]) #main-content .bg-purple-100, :root:not([data-theme="light"]) header .bg-purple-100, :root:not([data-theme="light"]) nav .bg-purple-100 { background-color: var(--color-info-bg); }
:root:not([data-theme="light"]) #main-content .text-blue-600, :root:not([data-theme="light"]) header .text-blue-600, :root:not([data-theme="light"]) nav .text-blue-600, :root:not([data-theme="light"]) #main-content .text-blue-700, :root:not([data-theme="light"]) header .text-blue-700, :root:not([data-theme="light"]) nav .text-blue-700, :root:not([data-theme="light"]) #main-content .text-blue-800, :root:not([data-theme="light"]) header .text-blue-800, :root:not([data-theme="light"]) nav .text-blue-800, :root:not([data-theme="light"]) #main-content .text-sky-600, :root:not([data-theme="light"]) header .text-sky-600, :root:not([data-theme="light"]) nav .text-sky-600, :root:not([data-theme="light"]) #main-content .text-sky-700, :root:not([data-theme="light"]) header .text-sky-700, :root:not([data-theme="light"]) nav .text-sky-700, :root:not([data-theme="light"]) #main-content .text-sky-800, :root:not([data-theme="light"]) header .text-sky-800, :root:not([data-theme="light"]) nav .text-sky-800, :root:not([data-theme="light"]) #main-content .text-indigo-600, :root:not([data-theme="light"]) header .text-indigo-600, :root:not([data-theme="light"]) nav .text-indigo-600, :root:not([data-theme="light"]) #main-content .text-indigo-700, :root:not([data-theme="light"]) header .text-indigo-700, :root:not([data-theme="light"]) nav .text-indigo-700, :root:not([data-theme="light"]) #main-content .text-indigo-800, :root:not([data-theme="light"]) header .text-indigo-800, :root:not([data-theme="light"]) nav .text-indigo-800, :root:not([data-theme="light"]) #main-content .text-purple-600, :root:not([data-theme="light"]) header .text-purple-600, :root:not([data-theme="light"]) nav .text-purple-600, :root:not([data-theme="light"]) #main-content .text-purple-700, :root:not([data-theme="light"]) header .text-purple-700, :root:not([data-theme="light"]) nav .text-purple-700, :root:not([data-theme="light"]) #main-content .text-purple-800, :root:not([data-theme="light"]) header .text-purple-800, :root:not([data-theme="light"]) nav .text-purple-800 { color: var(--color-info); }
:root:not([data-theme="light"]) #main-content .border-blue-100, :root:not([data-theme="light"]) header .border-blue-100, :root:not([data-theme="light"]) nav .border-blue-100, :root:not([data-theme="light"]) #main-content .border-blue-200, :root:not([data-theme="light"]) header .border-blue-200, :root:not([data-theme="light"]) nav .border-blue-200, :root:not([data-theme="light"]) #main-content .border-blue-300, :root:not([data-theme="light"]) header .border-blue-300, :root:not([data-theme="light"]) nav .border-blue-300, :root:not([data-theme="light"]) #main-content .border-sky-100, :root:not([data-theme="light"]) header .border-sky-100, :root:not([data-theme="light"]) nav .border-sky-100, :root:not([data-theme="light"]) #main-content .border-sky-200, :root:not([data-theme="light"]) header .border-sky-200, :root:not([data-theme="light"]) nav .border-sky-200, :root:not([data-theme="light"]) #main-content .border-sky-300, :root:not([data-theme="light"]) header .border-sky-300, :root:not([data-theme="light"]) nav .border-sky-300, :root:not([data-theme="light"]) #main-content .border-indigo-100, :root:not([data-theme="light"]) header .border-indigo-100, :root:not([data-theme="light"]) nav .border-indigo-100, :root:not([data-theme="light"]) #main-content .border-indigo-200, :root:not([data-theme="light"]) header .border-indigo-200, :root:not([data-theme="light"]) nav .border-indigo-200, :root:not([data-theme="light"]) #main-content .border-indigo-300, :root:not([data-theme="light"]) header .border-indigo-300, :root:not([data-theme="light"]) nav .border-indigo-300, :root:not([data-theme="light"]) #main-content .border-purple-100, :root:not([data-theme="light"]) header .border-purple-100, :root:not([data-theme="light"]) nav .border-purple-100, :root:not([data-theme="light"]) #main-content .border-purple-200, :root:not([data-theme="light"]) header .border-purple-200, :root:not([data-theme="light"]) nav .border-purple-200, :root:not([data-theme="light"]) #main-content .border-purple-300, :root:not([data-theme="light"]) header .border-purple-300, :root:not([data-theme="light"]) nav .border-purple-300 { border-color: var(--color-info-border); }
}
:root[data-theme="dark"] #main-content { background: var(--color-page-bg); color: var(--color-text); }
:root[data-theme="dark"] #main-content .bg-white, :root[data-theme="dark"] header .bg-white, :root[data-theme="dark"] nav .bg-white { background-color: var(--color-surface); }
:root[data-theme="dark"] #main-content .bg-gray-50, :root[data-theme="dark"] header .bg-gray-50, :root[data-theme="dark"] nav .bg-gray-50, :root[data-theme="dark"] #main-content .bg-\[\#f8f9fc\], :root[data-theme="dark"] header .bg-\[\#f8f9fc\], :root[data-theme="dark"] nav .bg-\[\#f8f9fc\] { background-color: #182231; }
:root[data-theme="dark"] #main-content .bg-gray-100, :root[data-theme="dark"] header .bg-gray-100, :root[data-theme="dark"] nav .bg-gray-100, :root[data-theme="dark"] #main-content .bg-gray-200, :root[data-theme="dark"] header .bg-gray-200, :root[data-theme="dark"] nav .bg-gray-200 { background-color: #273244; }
:root[data-theme="dark"] #main-content .hover\:bg-gray-100:hover, :root[data-theme="dark"] header .hover\:bg-gray-100:hover, :root[data-theme="dark"] nav .hover\:bg-gray-100:hover, :root[data-theme="dark"] #main-content .hover\:bg-gray-50:hover, :root[data-theme="dark"] header .hover\:bg-gray-50:hover, :root[data-theme="dark"] nav .hover\:bg-gray-50:hover { background-color: #273244; }
:root[data-theme="dark"] #main-content .text-gray-900, :root[data-theme="dark"] header .text-gray-900, :root[data-theme="dark"] nav .text-gray-900, :root[data-theme="dark"] #main-content .text-gray-800, :root[data-theme="dark"] header .text-gray-800, :root[data-theme="dark"] nav .text-gray-800 { color: var(--color-text); }
:root[data-theme="dark"] #main-content .text-gray-700, :root[data-theme="dark"] header .text-gray-700, :root[data-theme="dark"] nav .text-gray-700, :root[data-theme="dark"] #main-content .text-gray-600, :root[data-theme="dark"] header .text-gray-600, :root[data-theme="dark"] nav .text-gray-600 { color: #d1d5db; }
:root[data-theme="dark"] #main-content .text-gray-500, :root[data-theme="dark"] header .text-gray-500, :root[data-theme="dark"] nav .text-gray-500, :root[data-theme="dark"] #main-content .text-gray-400, :root[data-theme="dark"] header .text-gray-400, :root[data-theme="dark"] nav .text-gray-400 { color: var(--color-text-muted); }
:root[data-theme="dark"] #main-content .border-\[\#e4e7eb\], :root[data-theme="dark"] header .border-\[\#e4e7eb\], :root[data-theme="dark"] nav .border-\[\#e4e7eb\], :root[data-theme="dark"] #main-content .border-gray-100, :root[data-theme="dark"] header .border-gray-100, :root[data-theme="dark"] nav .border-gray-100, :root[data-theme="dark"] #main-content .border-gray-200, :root[data-theme="dark"] header .border-gray-200, :root[data-theme="dark"] nav .border-gray-200, :root[data-theme="dark"] #main-content .border-gray-300, :root[data-theme="dark"] header .border-gray-300, :root[data-theme="dark"] nav .border-gray-300 { border-color: var(--color-surface-border); }
:root[data-theme="dark"] #main-content input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), :root[data-theme="dark"] header input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), :root[data-theme="dark"] nav input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), :root[data-theme="dark"] #main-content select, :root[data-theme="dark"] header select, :root[data-theme="dark"] nav select, :root[data-theme="dark"] #main-content textarea, :root[data-theme="dark"] header textarea, :root[data-theme="dark"] nav textarea { background-color: var(--color-page-bg); color: var(--color-text); border-color: var(--color-surface-border); }
:root[data-theme="dark"] #main-content .bg-red-50, :root[data-theme="dark"] header .bg-red-50, :root[data-theme="dark"] nav .bg-red-50, :root[data-theme="dark"] #main-content .bg-red-100, :root[data-theme="dark"] header .bg-red-100, :root[data-theme="dark"] nav .bg-red-100, :root[data-theme="dark"] #main-content .bg-rose-50, :root[data-theme="dark"] header .bg-rose-50, :root[data-theme="dark"] nav .bg-rose-50, :root[data-theme="dark"] #main-content .bg-rose-100, :root[data-theme="dark"] header .bg-rose-100, :root[data-theme="dark"] nav .bg-rose-100 { background-color: var(--color-danger-bg); }
:root[data-theme="dark"] #main-content .text-red-600, :root[data-theme="dark"] header .text-red-600, :root[data-theme="dark"] nav .text-red-600, :root[data-theme="dark"] #main-content .text-red-700, :root[data-theme="dark"] header .text-red-700, :root[data-theme="dark"] nav .text-red-700, :root[data-theme="dark"] #main-content .text-red-800, :root[data-theme="dark"] header .text-red-800, :root[data-theme="dark"] nav .text-red-800, :root[data-theme="dark"] #main-content .text-rose-600, :root[data-theme="dark"] header .text-rose-600, :root[data-theme="dark"] nav .text-rose-600, :root[data-theme="dark"] #main-content .text-rose-700, :root[data-theme="dark"] header .text-rose-700, :root[data-theme="dark"] nav .text-rose-700, :root[data-theme="dark"] #main-content .text-rose-800, :root[data-theme="dark"] header .text-rose-800, :root[data-theme="dark"] nav .text-rose-800 { color: var(--color-danger); }
:root[data-theme="dark"] #main-content .border-red-100, :root[data-theme="dark"] header .border-red-100, :root[data-theme="dark"] nav .border-red-100, :root[data-theme="dark"] #main-content .border-red-200, :root[data-theme="dark"] header .border-red-200, :root[data-theme="dark"] nav .border-red-200, :root[data-theme="dark"] #main-content .border-red-300, :root[data-theme="dark"] header .border-red-300, :root[data-theme="dark"] nav .border-red-300, :root[data-theme="dark"] #main-content .border-rose-100, :root[data-theme="dark"] header .border-rose-100, :root[data-theme="dark"] nav .border-rose-100, :root[data-theme="dark"] #main-content .border-rose-200, :root[data-theme="dark"] header .border-rose-200, :root[data-theme="dark"] nav .border-rose-200, :root[data-theme="dark"] #main-content .border-rose-300, :root[data-theme="dark"] header .border-rose-300, :root[data-theme="dark"] nav .border-rose-300 { border-color: var(--color-danger-border); }
:root[data-theme="dark"] #main-content .bg-green-50, :root[data-theme="dark"] header .bg-green-50, :root[data-theme="dark"] nav .bg-green-50, :root[data-theme="dark"] #main-content .bg-green-100, :root[data-theme="dark"] header .bg-green-100, :root[data-theme="dark"] nav .bg-green-100, :root[data-theme="dark"] #main-content .bg-emerald-50, :root[data-theme="dark"] header .bg-emerald-50, :root[data-theme="dark"] nav .bg-emerald-50, :root[data-theme="dark"] #main-content .bg-emerald-100, :root[data-theme="dark"] header .bg-emerald-100, :root[data-theme="dark"] nav .bg-emerald-100 { background-color: var(--color-success-bg); }
:root[data-theme="dark"] #main-content .text-green-600, :root[data-theme="dark"] header .text-green-600, :root[data-theme="dark"] nav .text-green-600, :root[data-theme="dark"] #main-content .text-green-700, :root[data-theme="dark"] header .text-green-700, :root[data-theme="dark"] nav .text-green-700, :root[data-theme="dark"] #main-content .text-green-800, :root[data-theme="dark"] header .text-green-800, :root[data-theme="dark"] nav .text-green-800, :root[data-theme="dark"] #main-content .text-emerald-600, :root[data-theme="dark"] header .text-emerald-600, :root[data-theme="dark"] nav .text-emerald-600, :root[data-theme="dark"] #main-content .text-emerald-700, :root[data-theme="dark"] header .text-emerald-700, :root[data-theme="dark"] nav .text-emerald-700, :root[data-theme="dark"] #main-content .text-emerald-800, :root[data-theme="dark"] header .text-emerald-800, :root[data-theme="dark"] nav .text-emerald-800 { color: var(--color-success); }
:root[data-theme="dark"] #main-content .border-green-100, :root[data-theme="dark"] header .border-green-100, :root[data-theme="dark"] nav .border-green-100, :root[data-theme="dark"] #main-content .border-green-200, :root[data-theme="dark"] header .border-green-200, :root[data-theme="dark"] nav .border-green-200, :root[data-theme="dark"] #main-content .border-green-300, :root[data-theme="dark"] header .border-green-300, :root[data-theme="dark"] nav .border-green-300, :root[data-theme="dark"] #main-content .border-emerald-100, :root[data-theme="dark"] header .border-emerald-100, :root[data-theme="dark"] nav .border-emerald-100, :root[data-theme="dark"] #main-content .border-emerald-200, :root[data-theme="dark"] header .border-emerald-200, :root[data-theme="dark"] nav .border-emerald-200, :root[data-theme="dark"] #main-content .border-emerald-300, :root[data-theme="dark"] header .border-emerald-300, :root[data-theme="dark"] nav .border-emerald-300 { border-color: var(--color-success-border); }
:root[data-theme="dark"] #main-content .bg-amber-50, :root[data-theme="dark"] header .bg-amber-50, :root[data-theme="dark"] nav .bg-amber-50, :root[data-theme="dark"] #main-content .bg-amber-100, :root[data-theme="dark"] header .bg-amber-100, :root[data-theme="dark"] nav .bg-amber-100, :root[data-theme="dark"] #main-content .bg-yellow-50, :root[data-theme="dark"] header .bg-yellow-50, :root[data-theme="dark"] nav .bg-yellow-50, :root[data-theme="dark"] #main-content .bg-yellow-100, :root[data-theme="dark"] header .bg-yellow-100, :root[data-theme="dark"] nav .bg-yellow-100, :root[data-theme="dark"] #main-content .bg-orange-50, :root[data-theme="dark"] header .bg-orange-50, :root[data-theme="dark"] nav .bg-orange-50, :root[data-theme="dark"] #main-content .bg-orange-100, :root[data-theme="dark"] header .bg-orange-100, :root[data-theme="dark"] nav .bg-orange-100 { background-color: var(--color-warning-bg); }
:root[data-theme="dark"] #main-content .text-amber-600, :root[data-theme="dark"] header .text-amber-600, :root[data-theme="dark"] nav .text-amber-600, :root[data-theme="dark"] #main-content .text-amber-700, :root[data-theme="dark"] header .text-amber-700, :root[data-theme="dark"] nav .text-amber-700, :root[data-theme="dark"] #main-content .text-amber-800, :root[data-theme="dark"] header .text-amber-800, :root[data-theme="dark"] nav .text-amber-800, :root[data-theme="dark"] #main-content .text-yellow-600, :root[data-theme="dark"] header .text-yellow-600, :root[data-theme="dark"] nav .text-yellow-600, :root[data-theme="dark"] #main-content .text-yellow-700, :root[data-theme="dark"] header .text-yellow-700, :root[data-theme="dark"] nav .text-yellow-700, :root[data-theme="dark"] #main-content .text-yellow-800, :root[data-theme="dark"] header .text-yellow-800, :root[data-theme="dark"] nav .text-yellow-800, :root[data-theme="dark"] #main-content .text-orange-600, :root[data-theme="dark"] header .text-orange-600, :root[data-theme="dark"] nav .text-orange-600, :root[data-theme="dark"] #main-content .text-orange-700, :root[data-theme="dark"] header .text-orange-700, :root[data-theme="dark"] nav .text-orange-700, :root[data-theme="dark"] #main-content .text-orange-800, :root[data-theme="dark"] header .text-orange-800, :root[data-theme="dark"] nav .text-orange-800 { color: var(--color-warning); }
:root[data-theme="dark"] #main-content .border-amber-100, :root[data-theme="dark"] header .border-amber-100, :root[data-theme="dark"] nav .border-amber-100, :root[data-theme="dark"] #main-content .border-amber-200, :root[data-theme="dark"] header .border-amber-200, :root[data-theme="dark"] nav .border-amber-200, :root[data-theme="dark"] #main-content .border-amber-300, :root[data-theme="dark"] header .border-amber-300, :root[data-theme="dark"] nav .border-amber-300, :root[data-theme="dark"] #main-content .border-yellow-100, :root[data-theme="dark"] header .border-yellow-100, :root[data-theme="dark"] nav .border-yellow-100, :root[data-theme="dark"] #main-content .border-yellow-200, :root[data-theme="dark"] header .border-yellow-200, :root[data-theme="dark"] nav .border-yellow-200, :root[data-theme="dark"] #main-content .border-yellow-300, :root[data-theme="dark"] header .border-yellow-300, :root[data-theme="dark"] nav .border-yellow-300, :root[data-theme="dark"] #main-content .border-orange-100, :root[data-theme="dark"] header .border-orange-100, :root[data-theme="dark"] nav .border-orange-100, :root[data-theme="dark"] #main-content .border-orange-200, :root[data-theme="dark"] header .border-orange-200, :root[data-theme="dark"] nav .border-orange-200, :root[data-theme="dark"] #main-content .border-orange-300, :root[data-theme="dark"] header .border-orange-300, :root[data-theme="dark"] nav .border-orange-300 { border-color: var(--color-warning-border); }
:root[data-theme="dark"] #main-content .bg-blue-50, :root[data-theme="dark"] header .bg-blue-50, :root[data-theme="dark"] nav .bg-blue-50, :root[data-theme="dark"] #main-content .bg-blue-100, :root[data-theme="dark"] header .bg-blue-100, :root[data-theme="dark"] nav .bg-blue-100, :root[data-theme="dark"] #main-content .bg-sky-50, :root[data-theme="dark"] header .bg-sky-50, :root[data-theme="dark"] nav .bg-sky-50, :root[data-theme="dark"] #main-content .bg-sky-100, :root[data-theme="dark"] header .bg-sky-100, :root[data-theme="dark"] nav .bg-sky-100, :root[data-theme="dark"] #main-content .bg-indigo-50, :root[data-theme="dark"] header .bg-indigo-50, :root[data-theme="dark"] nav .bg-indigo-50, :root[data-theme="dark"] #main-content .bg-indigo-100, :root[data-theme="dark"] header .bg-indigo-100, :root[data-theme="dark"] nav .bg-indigo-100, :root[data-theme="dark"] #main-content .bg-purple-50, :root[data-theme="dark"] header .bg-purple-50, :root[data-theme="dark"] nav .bg-purple-50, :root[data-theme="dark"] #main-content .bg-purple-100, :root[data-theme="dark"] header .bg-purple-100, :root[data-theme="dark"] nav .bg-purple-100 { background-color: var(--color-info-bg); }
:root[data-theme="dark"] #main-content .text-blue-600, :root[data-theme="dark"] header .text-blue-600, :root[data-theme="dark"] nav .text-blue-600, :root[data-theme="dark"] #main-content .text-blue-700, :root[data-theme="dark"] header .text-blue-700, :root[data-theme="dark"] nav .text-blue-700, :root[data-theme="dark"] #main-content .text-blue-800, :root[data-theme="dark"] header .text-blue-800, :root[data-theme="dark"] nav .text-blue-800, :root[data-theme="dark"] #main-content .text-sky-600, :root[data-theme="dark"] header .text-sky-600, :root[data-theme="dark"] nav .text-sky-600, :root[data-theme="dark"] #main-content .text-sky-700, :root[data-theme="dark"] header .text-sky-700, :root[data-theme="dark"] nav .text-sky-700, :root[data-theme="dark"] #main-content .text-sky-800, :root[data-theme="dark"] header .text-sky-800, :root[data-theme="dark"] nav .text-sky-800, :root[data-theme="dark"] #main-content .text-indigo-600, :root[data-theme="dark"] header .text-indigo-600, :root[data-theme="dark"] nav .text-indigo-600, :root[data-theme="dark"] #main-content .text-indigo-700, :root[data-theme="dark"] header .text-indigo-700, :root[data-theme="dark"] nav .text-indigo-700, :root[data-theme="dark"] #main-content .text-indigo-800, :root[data-theme="dark"] header .text-indigo-800, :root[data-theme="dark"] nav .text-indigo-800, :root[data-theme="dark"] #main-content .text-purple-600, :root[data-theme="dark"] header .text-purple-600, :root[data-theme="dark"] nav .text-purple-600, :root[data-theme="dark"] #main-content .text-purple-700, :root[data-theme="dark"] header .text-purple-700, :root[data-theme="dark"] nav .text-purple-700, :root[data-theme="dark"] #main-content .text-purple-800, :root[data-theme="dark"] header .text-purple-800, :root[data-theme="dark"] nav .text-purple-800 { color: var(--color-info); }
:root[data-theme="dark"] #main-content .border-blue-100, :root[data-theme="dark"] header .border-blue-100, :root[data-theme="dark"] nav .border-blue-100, :root[data-theme="dark"] #main-content .border-blue-200, :root[data-theme="dark"] header .border-blue-200, :root[data-theme="dark"] nav .border-blue-200, :root[data-theme="dark"] #main-content .border-blue-300, :root[data-theme="dark"] header .border-blue-300, :root[data-theme="dark"] nav .border-blue-300, :root[data-theme="dark"] #main-content .border-sky-100, :root[data-theme="dark"] header .border-sky-100, :root[data-theme="dark"] nav .border-sky-100, :root[data-theme="dark"] #main-content .border-sky-200, :root[data-theme="dark"] header .border-sky-200, :root[data-theme="dark"] nav .border-sky-200, :root[data-theme="dark"] #main-content .border-sky-300, :root[data-theme="dark"] header .border-sky-300, :root[data-theme="dark"] nav .border-sky-300, :root[data-theme="dark"] #main-content .border-indigo-100, :root[data-theme="dark"] header .border-indigo-100, :root[data-theme="dark"] nav .border-indigo-100, :root[data-theme="dark"] #main-content .border-indigo-200, :root[data-theme="dark"] header .border-indigo-200, :root[data-theme="dark"] nav .border-indigo-200, :root[data-theme="dark"] #main-content .border-indigo-300, :root[data-theme="dark"] header .border-indigo-300, :root[data-theme="dark"] nav .border-indigo-300, :root[data-theme="dark"] #main-content .border-purple-100, :root[data-theme="dark"] header .border-purple-100, :root[data-theme="dark"] nav .border-purple-100, :root[data-theme="dark"] #main-content .border-purple-200, :root[data-theme="dark"] header .border-purple-200, :root[data-theme="dark"] nav .border-purple-200, :root[data-theme="dark"] #main-content .border-purple-300, :root[data-theme="dark"] header .border-purple-300, :root[data-theme="dark"] nav .border-purple-300 { border-color: var(--color-info-border); }

:root[data-theme="dark"] header .text-\[\#1e3a5f\], :root[data-theme="dark"] header .text-\[\#2563eb\], :root[data-theme="dark"] nav .text-\[\#2563eb\] { color: var(--color-primary); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) header .text-\[\#1e3a5f\], :root:not([data-theme="light"]) header .text-\[\#2563eb\], :root:not([data-theme="light"]) nav .text-\[\#2563eb\] { color: var(--color-primary); }
}