/* Dark mode variables and color schemes */
html.dark {
  --bg: #071128;
  --surface: rgba(7, 21, 40, 0.75);
  /* THIS is critical */
  --muted: #9ba7b8;
  --text: #e6eef8;
  --accent: #60a5fa;
}

/* UI overrides specifically for dark mode */
.dark body {
  background-color: #0f172a;
  color: #e2e8f0;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark p,
.dark li,
.dark label {
  color: #e2e8f0;
}

.dark .bg-white {
  background-color: #1e293b !important;
  color: #cbd5e1;
}

.dark header:not(.navbar) {
  background-color: #1e293b;
}

/* Table hover in dark mode */
.dark tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Preserve utility text colors */
.dark .text-red-600 {
  color: #ef4444 !important;
}

.dark .text-green-600 {
  color: #16a34a !important;
}

.dark .text-emerald-500 {
  color: #34d399 !important;
}

.dark .text-emerald-600 {
  color: #10b981 !important;
}

.dark .text-indigo-500 {
  color: #818cf8 !important;
}

.dark .text-indigo-600 {
  color: #6366f1 !important;
}

.dark .text-purple-500 {
  color: #c084fc !important;
}

.dark .text-purple-600 {
  color: #a855f7 !important;
}

.dark .text-yellow-500 {
  color: #eab308 !important;
}

.dark .text-blue-500 {
  color: #3b82f6 !important;
}

.dark .text-gradient-premium {
  -webkit-text-fill-color: transparent !important;
}

/* Panels that should adapt in dark mode */
.dark .bg-white,
.dark .card-panel,
.dark aside,
.dark .hero,
.dark .guide-card,
.dark article[style],
.dark .container>div[style] {
  background: linear-gradient(180deg,
      var(--surface),
      rgba(11, 37, 64, 0.5)) !important;
  color: var(--text) !important;
  border-color: rgba(255, 255, 255, 0.02) !important;
}

.dark .card-panel:hover,
.dark aside:hover,
.dark .guide-card:hover {
  background: linear-gradient(180deg,
      var(--surface),
      rgba(11, 37, 64, 0.65)) !important;
}