:root { color-scheme: light; }
.dark { color-scheme: dark; }
.dark { --tw-ring-offset-color: #0b1220; }
.dark body { background-color: #0b1220; color: #e5e7eb; }
.dark .bg-gray-50 { background-color: #0b1220 !important; }
.dark .bg-white { background-color: #0f172a !important; }
.dark .text-gray-900, .dark .text-gray-800 { color: #e5e7eb !important; }
.dark .text-gray-700 { color: #cbd5e1 !important; }
.dark .text-gray-600, .dark .text-gray-500 { color: #94a3b8 !important; }
.dark .text-gray-400 { color: #9ca3af !important; }
.dark .border-gray-100 { border-color: #1f2937 !important; }
.dark .border-gray-200 { border-color: #334155 !important; }
.dark .border-gray-300 { border-color: #4b5563 !important; }
.dark .hover\:bg-gray-300:hover { background-color: #4b5563 !important; }
.dark .hover\:bg-gray-50:hover { background-color: #111827 !important; }
.dark .hover\:bg-gray-100:hover { background-color: #1f2937 !important; }
.dark .ring-black { --tw-ring-color: rgba(255,255,255,0.1); }

/* Toggle icon visibility */
.icon-sun { display: none; }
.dark .icon-sun { display: inline; }
.dark .icon-moon { display: none; }

/* Neutral backgrounds more visible in dark */
.dark .bg-gray-100 { background-color: #1f2937 !important; }
.dark .bg-gray-200 { background-color: #374151 !important; }
.dark .bg-gray-300 { background-color: #4b5563 !important; }
.dark .hover\:bg-gray-200:hover { background-color: #374151 !important; }

/* Inputs and form elements */
.dark input,
.dark select,
.dark textarea {
  background-color: #111827 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
  border-color: #6366f1 !important;
}
.dark ::placeholder { color: #9ca3af !important; }

/* Accent links ensure contrast */
.dark .text-indigo-600 { color: #818cf8 !important; }
.dark .hover\:text-indigo-800:hover { color: #a5b4fc !important; }
.dark .text-blue-600 { color: #60a5fa !important; }
.dark .hover\:text-blue-800:hover { color: #93c5fd !important; }
.dark .text-red-600 { color: #f87171 !important; }
.dark .text-green-600 { color: #34d399 !important; }

/* Tinted backgrounds in light mode → darker tints in dark mode */
.dark .bg-indigo-50 { background-color: #1e1b4b !important; }
.dark .hover\:bg-indigo-50:hover { background-color: #1e1b4b !important; }
.dark .border-indigo-200 { border-color: #3730a3 !important; }
.dark .bg-blue-100 { background-color: #0c4a6e !important; }
.dark .bg-green-50 { background-color: #022c22 !important; }
.dark .bg-green-100 { background-color: #064e3b !important; }
.dark .bg-green-200 { background-color: #065f46 !important; }
.dark .bg-green-600 { background-color: #059669 !important; }
.dark .bg-green-700 { background-color: #047857 !important; }
.dark .hover\:bg-green-100:hover { background-color: #064e3b !important; }
.dark .hover\:bg-green-200:hover { background-color: #065f46 !important; }
.dark .hover\:bg-green-700:hover { background-color: #047857 !important; }
.dark .bg-yellow-100 { background-color: #713f12 !important; }
.dark .bg-red-100 { background-color: #7f1d1d !important; }
.dark .bg-orange-50 { background-color: #7c2d12 !important; }
.dark .border-orange-200 { border-color: #ea580c !important; }

/* Badge text colors for dark backgrounds */
.dark .text-green-800 { color: #86efac !important; }
.dark .text-yellow-800 { color: #fde68a !important; }
.dark .text-red-800 { color: #fca5a5 !important; }
.dark .text-blue-800 { color: #93c5fd !important; }
.dark .text-orange-800 { color: #fed7aa !important; }
.dark .text-orange-700 { color: #fdba74 !important; }
.dark .text-orange-600 { color: #fb923c !important; }

/* Menus and dropdowns */
.dark .hover\:bg-gray-50:hover { background-color: #111827 !important; }
.dark .hover\:bg-gray-100:hover { background-color: #1f2937 !important; }
.dark .ring-black { --tw-ring-color: rgba(255,255,255,0.12); }


/* Brand gradient visibility */
.brand-gradient {
  background-image: linear-gradient(to right, #111827, #374151);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dark .brand-gradient {
  background-image: linear-gradient(to right, #e5e7eb, #cbd5e1);
}