:root {
  color-scheme: light;
  --ui-bg: #f3f4f6;
  --ui-surface: #ffffff;
  --ui-surface-muted: #f9fafb;
  --ui-surface-raised: #ffffff;
  --ui-text: #1f2937;
  --ui-text-strong: #111827;
  --ui-text-muted: #4b5563;
  --ui-text-subtle: #6b7280;
  --ui-border: #e5e7eb;
  --ui-border-strong: #d1d5db;
  --ui-input: #ffffff;
  --ui-input-placeholder: #9ca3af;
  --ui-primary: #1e3a8a;
  --ui-primary-hover: #2563eb;
  --ui-primary-soft: #dbeafe;
  --ui-accent: #f59e0b;
  --ui-danger: #dc2626;
  --ui-success: #16a34a;
  --ui-warning: #d97706;
  --ui-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #050816;
  --ui-surface: #0f172a;
  --ui-surface-muted: #111827;
  --ui-surface-raised: #172033;
  --ui-text: #e5e7eb;
  --ui-text-strong: #f8fafc;
  --ui-text-muted: #cbd5e1;
  --ui-text-subtle: #94a3b8;
  --ui-border: #263244;
  --ui-border-strong: #334155;
  --ui-input: #0b1220;
  --ui-input-placeholder: #64748b;
  --ui-primary: #60a5fa;
  --ui-primary-hover: #93c5fd;
  --ui-primary-soft: #172554;
  --ui-accent: #fbbf24;
  --ui-danger: #f87171;
  --ui-success: #4ade80;
  --ui-warning: #fbbf24;
  --ui-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.ui-page { background: var(--ui-bg); color: var(--ui-text); }
.ui-surface { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
.ui-card { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow); }
.ui-muted-panel { background: var(--ui-surface-muted); color: var(--ui-text); }
:where(.ui-muted-panel) { border-color: var(--ui-border); border-style: solid; border-width: 1px; }
.ui-heading { color: var(--ui-text-strong); }
.ui-muted { color: var(--ui-text-muted); }
.ui-subtle { color: var(--ui-text-subtle); }
.ui-input { background: var(--ui-input); color: var(--ui-text); border: 1px solid var(--ui-border-strong); }
.ui-input::placeholder { color: var(--ui-input-placeholder); }
.ui-label { color: var(--ui-text-muted); }
.ui-hint { color: var(--ui-text-subtle); }
.ui-divider { border-color: var(--ui-border); }
.ui-secondary-btn { background: var(--ui-surface-muted); color: var(--ui-text); }
:where(.ui-secondary-btn) { border-color: var(--ui-border-strong); border-style: solid; border-width: 1px; }
.ui-secondary-btn:hover { background: var(--ui-surface); }

.ui-table {
  background: var(--ui-surface);
  color: var(--ui-text);
  border-color: var(--ui-border);
}

.ui-table thead {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
}

.ui-table tbody tr {
  border-color: var(--ui-border);
}

.ui-table tbody tr:hover {
  background: var(--ui-surface-muted);
}

.ui-modal {
  background: var(--ui-surface);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow);
}

.ui-overlay {
  background: rgba(0, 0, 0, 0.58);
}

/*
 * Transitional dark-mode bridge for legacy Tailwind light utilities.
 * Many static and JS-generated surfaces still carry older bg/text/border
 * classes. Scope this to dark mode so light mode remains pixel-stable while
 * preventing missed panels from staying bright white.
 */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-gray-50,
:root[data-theme="dark"] .bg-gray-100,
:root[data-theme="dark"] .bg-slate-50,
:root[data-theme="dark"] .bg-blue-50,
:root[data-theme="dark"] .bg-green-50,
:root[data-theme="dark"] .bg-red-50,
:root[data-theme="dark"] .bg-amber-50,
:root[data-theme="dark"] .bg-orange-50,
:root[data-theme="dark"] .bg-emerald-50,
:root[data-theme="dark"] .bg-lime-50,
:root[data-theme="dark"] .bg-teal-50,
:root[data-theme="dark"] .bg-cyan-50,
:root[data-theme="dark"] .bg-purple-50,
:root[data-theme="dark"] .bg-indigo-50,
:root[data-theme="dark"] .bg-rose-50,
:root[data-theme="dark"] .bg-pink-50,
:root[data-theme="dark"] .bg-fuchsia-50,
:root[data-theme="dark"] .bg-violet-50 {
  background-color: var(--ui-surface-muted) !important;
}

/* Catch gradient wrappers (from-X-50 to-Y-50) that set inline gradient */
:root[data-theme="dark"] .bg-gradient-to-r,
:root[data-theme="dark"] .bg-gradient-to-l,
:root[data-theme="dark"] .bg-gradient-to-br,
:root[data-theme="dark"] .bg-gradient-to-bl,
:root[data-theme="dark"] .bg-gradient-to-tr,
:root[data-theme="dark"] .bg-gradient-to-tl,
:root[data-theme="dark"] .bg-gradient-to-b,
:root[data-theme="dark"] .bg-gradient-to-t {
  background-image: none !important;
  background-color: var(--ui-surface-muted) !important;
}

:root[data-theme="dark"] body.ui-page {
  background-color: var(--ui-bg) !important;
}

:root[data-theme="dark"] .bg-gray-200 {
  background-color: #374151 !important; /* gray-700: visible on dark, works for toggle tracks and subtle panels */
}

:root[data-theme="dark"] .bg-gray-300 {
  background-color: #4b5563 !important; /* gray-600: toggle track OFF state */
}

:root[data-theme="dark"] .hover\:bg-white:hover,
:root[data-theme="dark"] .hover\:bg-gray-50:hover,
:root[data-theme="dark"] .hover\:bg-gray-100:hover,
:root[data-theme="dark"] .hover\:bg-gray-200:hover,
:root[data-theme="dark"] .hover\:bg-blue-100:hover,
:root[data-theme="dark"] .hover\:bg-blue-50:hover {
  background-color: var(--ui-surface-raised) !important;
}

:root[data-theme="dark"] .text-primary,
:root[data-theme="dark"] .hover\:text-primary:hover,
:root[data-theme="dark"] .group:hover .group-hover\:text-primary {
  color: var(--ui-primary) !important;
}

:root[data-theme="dark"] .border-primary,
:root[data-theme="dark"] .hover\:border-primary:hover {
  border-color: var(--ui-primary) !important;
}

/*
 * Interactive control dark-mode overrides.
 * Bridge rules above use !important, so peer-checked states need !important too.
 */

/* bg-primary surfaces: buttons, badges, toggle ON tracks */
:root[data-theme="dark"] .bg-primary {
  background-color: var(--ui-primary) !important;
}

:root[data-theme="dark"] .hover\:bg-primary:hover {
  background-color: var(--ui-primary-hover) !important;
}

:root[data-theme="dark"] .bg-primary-light,
:root[data-theme="dark"] .bg-blue-600,
:root[data-theme="dark"] .bg-emerald-600 {
  background-color: var(--ui-primary) !important;
}

/* Toggle/switch: restore checked-state backgrounds (beat bridge !important) */
:root[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-primary,
:root[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-blue-600,
:root[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-emerald-600,
:root[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-teal-600 {
  background-color: var(--ui-primary) !important;
}

:root[data-theme="dark"] .peer:checked ~ .peer-checked\:bg-rose-500 {
  background-color: #fb7185 !important;
}

/* Range input accent for dark mode */
:root[data-theme="dark"] input[type="range"] {
  accent-color: var(--ui-primary);
}

:root[data-theme="dark"] .text-gray-900,
:root[data-theme="dark"] .text-gray-800,
:root[data-theme="dark"] .text-gray-700 {
  color: var(--ui-text-strong) !important;
}

:root[data-theme="dark"] .text-gray-600,
:root[data-theme="dark"] .text-gray-500 {
  color: var(--ui-text-muted) !important;
}

:root[data-theme="dark"] .text-gray-400,
:root[data-theme="dark"] .text-gray-300 {
  color: var(--ui-text-subtle) !important;
}

:root[data-theme="dark"] .border-gray-100,
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .border-gray-300,
:root[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
:root[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--ui-border) !important;
}

:root[data-theme="dark"] .placeholder-gray-400::placeholder,
:root[data-theme="dark"] .placeholder-gray-500::placeholder {
  color: var(--ui-input-placeholder) !important;
}