/*
  Dookun dark-mode fallback.
  This makes dark mode work even if Tailwind CDN dark variants fail.
*/

html.dark,
html[data-theme="dark"] {
  color-scheme: dark;
  background: #020617;
}

html.dark body,
html[data-theme="dark"] body {
  background: #020617 !important;
  color: #f8fafc !important;
}

/* Common dark backgrounds used by Tailwind classes */
html.dark .dark\:bg-slate-950,
html[data-theme="dark"] .dark\:bg-slate-950 {
  background-color: #020617 !important;
}

html.dark .dark\:bg-slate-900,
html[data-theme="dark"] .dark\:bg-slate-900 {
  background-color: #0f172a !important;
}

html.dark .dark\:bg-slate-900\/80,
html[data-theme="dark"] .dark\:bg-slate-900\/80 {
  background-color: rgba(15, 23, 42, 0.8) !important;
}

html.dark .dark\:bg-slate-950\/80,
html[data-theme="dark"] .dark\:bg-slate-950\/80 {
  background-color: rgba(2, 6, 23, 0.8) !important;
}

html.dark .dark\:bg-slate-800,
html[data-theme="dark"] .dark\:bg-slate-800 {
  background-color: #1e293b !important;
}

html.dark .dark\:bg-slate-800\/50,
html[data-theme="dark"] .dark\:bg-slate-800\/50 {
  background-color: rgba(30, 41, 59, 0.5) !important;
}

html.dark .dark\:bg-white,
html[data-theme="dark"] .dark\:bg-white {
  background-color: #ffffff !important;
}

/* Dark borders */
html.dark .dark\:border-slate-800,
html[data-theme="dark"] .dark\:border-slate-800 {
  border-color: #1e293b !important;
}

html.dark .dark\:border-slate-700,
html[data-theme="dark"] .dark\:border-slate-700 {
  border-color: #334155 !important;
}

/* Dark text */
html.dark .dark\:text-white,
html[data-theme="dark"] .dark\:text-white {
  color: #ffffff !important;
}

html.dark .dark\:text-slate-900,
html[data-theme="dark"] .dark\:text-slate-900 {
  color: #0f172a !important;
}

html.dark .dark\:text-slate-100,
html[data-theme="dark"] .dark\:text-slate-100 {
  color: #f1f5f9 !important;
}

html.dark .dark\:text-slate-300,
html[data-theme="dark"] .dark\:text-slate-300 {
  color: #cbd5e1 !important;
}

html.dark .dark\:text-slate-400,
html[data-theme="dark"] .dark\:text-slate-400 {
  color: #94a3b8 !important;
}

/* Icon visibility */
html.dark .dark\:block,
html[data-theme="dark"] .dark\:block {
  display: block !important;
}

html.dark .dark\:hidden,
html[data-theme="dark"] .dark\:hidden {
  display: none !important;
}

/* Light-mode icon reset */
html:not(.dark) .dark\:block {
  display: none !important;
}

html:not(.dark) .dark\:hidden {
  display: block !important;
}

/* Nav hard fallback */
html.dark nav,
html[data-theme="dark"] nav {
  background-color: rgba(2, 6, 23, 0.86) !important;
  border-color: rgba(30, 41, 59, 0.85) !important;
}

/* Cards / panels hard fallback */
html.dark .bg-white,
html[data-theme="dark"] .bg-white {
  background-color: #0f172a !important;
}

html.dark .bg-slate-50,
html[data-theme="dark"] .bg-slate-50 {
  background-color: #0f172a !important;
}

html.dark .border-slate-200,
html[data-theme="dark"] .border-slate-200 {
  border-color: #1e293b !important;
}

html.dark .text-slate-600,
html[data-theme="dark"] .text-slate-600 {
  color: #94a3b8 !important;
}

html.dark .text-slate-900,
html[data-theme="dark"] .text-slate-900 {
  color: #f8fafc !important;
}

/* Hero gradient fallback */
html.dark .from-slate-50,
html[data-theme="dark"] .from-slate-50 {
  --tw-gradient-from: #020617 !important;
  --tw-gradient-to: rgb(2 6 23 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html.dark .via-white,
html[data-theme="dark"] .via-white {
  --tw-gradient-to: rgb(15 23 42 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), #0f172a, var(--tw-gradient-to) !important;
}

html.dark .to-brand-50,
html[data-theme="dark"] .to-brand-50 {
  --tw-gradient-to: #020617 !important;
}

/* Button contrast */
html.dark .dark\:hover\:bg-slate-800:hover,
html[data-theme="dark"] .dark\:hover\:bg-slate-800:hover {
  background-color: #1e293b !important;
}

html.dark #theme-toggle,
html[data-theme="dark"] #theme-toggle {
  color: #f8fafc !important;
}