/**
 * Dark Mode Support for Pre-compiled Tailwind CSS
 * This file provides dark mode classes that work with Tailwind 2.x pre-compiled
 * Required because pre-compiled Tailwind doesn't include dark: variants by default
 */

/* ========== ARBITRARY VALUES (JIT classes not in pre-compiled) ========== */
.text-\[8px\] { font-size: 8px; line-height: 1; }
.text-\[10px\] { font-size: 10px; line-height: 1; }

/* ========== OPACITY BACKGROUNDS (not in Tailwind 2.x pre-compiled) ========== */
.bg-white\/75 { background-color: rgba(255, 255, 255, 0.75); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.bg-gray-800\/50 { background-color: rgba(31, 41, 55, 0.5); }
.bg-gray-900\/75 { background-color: rgba(17, 24, 39, 0.75); }
.bg-gray-900\/90 { background-color: rgba(17, 24, 39, 0.9); }
.bg-gray-900\/95 { background-color: rgba(17, 24, 39, 0.95); }
.bg-brand-50\/30 { background-color: rgba(240, 253, 244, 0.3); }

/* Dark mode opacity backgrounds */
.dark .dark\:bg-gray-800\/50 { background-color: rgba(31, 41, 55, 0.5); }
.dark .dark\:bg-gray-900\/75 { background-color: rgba(17, 24, 39, 0.75); }
.dark .dark\:bg-gray-900\/90 { background-color: rgba(17, 24, 39, 0.9); }
.dark .dark\:bg-brand-900\/5 { background-color: rgba(20, 83, 45, 0.05); }
.dark .dark\:bg-brand-900\/10 { background-color: rgba(20, 83, 45, 0.1); }

/* Backdrop blur (for navbar and hero overlay) */
.backdrop-blur-md {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.backdrop-blur-\[2px\] {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ========== BRAND COLORS ========== */
.text-brand-50 { color: #f0fdf4; }
.text-brand-100 { color: #dcfce7; }
.text-brand-300 { color: #86efac; }
.text-brand-400 { color: #4ade80; }
.text-brand-500 { color: #22c55e; }
.text-brand-600 { color: #16a34a; }
.text-brand-700 { color: #15803d; }
.text-brand-800 { color: #166534; }
.text-brand-900 { color: #14532d; }
.bg-brand-50 { background-color: #f0fdf4; }
.bg-brand-100 { background-color: #dcfce7; }
.bg-brand-500 { background-color: #22c55e; }
.bg-brand-600 { background-color: #16a34a; }
.bg-brand-700 { background-color: #15803d; }
.bg-brand-900 { background-color: #14532d; }
.border-brand-500 { border-color: #22c55e; }
.border-brand-600 { border-color: #16a34a; }
.border-brand-800 { border-color: #166534; }
.from-brand-500 { --tw-gradient-from: #22c55e; }
.from-brand-600 { --tw-gradient-from: #16a34a; }
.to-brand-600 { --tw-gradient-to: #16a34a; }
.to-brand-700 { --tw-gradient-to: #15803d; }
.hover\:bg-brand-700:hover { background-color: #15803d; }
.hover\:text-brand-600:hover { color: #16a34a; }

/* ========== DARK MODE BASE ========== */
.dark { color-scheme: dark; }

.dark body,
html.dark body { 
    background-color: #111827; 
    color: #f3f4f6; 
}

/* Override light backgrounds in dark mode */
.dark .bg-white { background-color: #1f2937; }
.dark .bg-gray-50 { background-color: #111827; }
.dark .bg-gray-100 { background-color: #1f2937; }

/* Override light text in dark mode */
.dark .text-gray-900 { color: #f9fafb; }
.dark .text-gray-800 { color: #f3f4f6; }
.dark .text-gray-700 { color: #e5e7eb; }
.dark .text-gray-600 { color: #d1d5db; }
.dark .text-gray-500 { color: #9ca3af; }

/* Override light borders in dark mode */
.dark .border-gray-100 { border-color: #374151; }
.dark .border-gray-200 { border-color: #374151; }

/* ========== DARK MODE BACKGROUNDS ========== */
.dark .dark\:bg-black { background-color: #000000; }
.dark .dark\:bg-gray-500 { background-color: #6b7280; }
.dark .dark\:bg-gray-600 { background-color: #4b5563; }
.dark .dark\:bg-gray-700 { background-color: #374151; }
.dark .dark\:bg-gray-700\/30 { background-color: rgba(55, 65, 81, 0.3); }
.dark .dark\:bg-gray-700\/50 { background-color: rgba(55, 65, 81, 0.5); }
.dark .dark\:bg-gray-800 { background-color: #1f2937; }
.dark .dark\:bg-gray-800\/50 { background-color: rgba(31, 41, 55, 0.5); }
.dark .dark\:bg-gray-800\/80 { background-color: rgba(31, 41, 55, 0.8); }
.dark .dark\:bg-gray-900 { background-color: #111827; }
.dark .dark\:bg-gray-900\/50 { background-color: rgba(17, 24, 39, 0.5); }
.dark .dark\:bg-gray-900\/70 { background-color: rgba(17, 24, 39, 0.7); }
.dark .dark\:bg-gray-900\/75 { background-color: rgba(17, 24, 39, 0.75); }
.dark .dark\:bg-gray-900\/80 { background-color: rgba(17, 24, 39, 0.8); }
.dark .dark\:bg-gray-900\/90 { background-color: rgba(17, 24, 39, 0.9); }

/* Color backgrounds */
.dark .dark\:bg-red-900\/10 { background-color: rgba(127, 29, 29, 0.1); }
.dark .dark\:bg-red-900\/20 { background-color: rgba(127, 29, 29, 0.2); }
.dark .dark\:bg-red-900\/30 { background-color: rgba(127, 29, 29, 0.3); }
.dark .dark\:bg-orange-900\/20 { background-color: rgba(124, 45, 18, 0.2); }
.dark .dark\:bg-amber-900\/20 { background-color: rgba(120, 53, 15, 0.2); }
.dark .dark\:bg-yellow-600 { background-color: #ca8a04; }
.dark .dark\:bg-yellow-900\/20 { background-color: rgba(113, 63, 18, 0.2); }
.dark .dark\:bg-yellow-900\/30 { background-color: rgba(113, 63, 18, 0.3); }
.dark .dark\:bg-green-800 { background-color: #166534; }
.dark .dark\:bg-green-900\/20 { background-color: rgba(20, 83, 45, 0.2); }
.dark .dark\:bg-green-900\/30 { background-color: rgba(20, 83, 45, 0.3); }
.dark .dark\:bg-blue-500 { background-color: #3b82f6; }
.dark .dark\:bg-blue-600 { background-color: #2563eb; }
.dark .dark\:bg-blue-900\/10 { background-color: rgba(30, 58, 138, 0.1); }
.dark .dark\:bg-blue-900\/20 { background-color: rgba(30, 58, 138, 0.2); }
.dark .dark\:bg-blue-900\/30 { background-color: rgba(30, 58, 138, 0.3); }
.dark .dark\:bg-blue-900\/40 { background-color: rgba(30, 58, 138, 0.4); }
.dark .dark\:bg-indigo-400 { background-color: #818cf8; }
.dark .dark\:bg-indigo-900\/20 { background-color: rgba(49, 46, 129, 0.2); }
.dark .dark\:bg-indigo-900\/50 { background-color: rgba(49, 46, 129, 0.5); }
.dark .dark\:bg-purple-900\/20 { background-color: rgba(88, 28, 135, 0.2); }
.dark .dark\:bg-brand-700 { background-color: #15803d; }
.dark .dark\:bg-brand-900\/10 { background-color: rgba(20, 83, 45, 0.1); }
.dark .dark\:bg-brand-900\/20 { background-color: rgba(20, 83, 45, 0.2); }
.dark .dark\:bg-brand-900\/30 { background-color: rgba(20, 83, 45, 0.3); }

/* ========== DARK MODE TEXT ========== */
.dark .dark\:text-white { color: #ffffff; }
.dark .dark\:text-gray-100 { color: #f3f4f6; }
.dark .dark\:text-gray-200 { color: #e5e7eb; }
.dark .dark\:text-gray-300 { color: #d1d5db; }
.dark .dark\:text-gray-400 { color: #9ca3af; }
.dark .dark\:text-gray-500 { color: #6b7280; }
.dark .dark\:text-gray-600 { color: #4b5563; }
.dark .dark\:text-red-300 { color: #fca5a5; }
.dark .dark\:text-red-400 { color: #f87171; }
.dark .dark\:text-red-500 { color: #ef4444; }
.dark .dark\:text-orange-300 { color: #fdba74; }
.dark .dark\:text-amber-300 { color: #fcd34d; }
.dark .dark\:text-amber-400 { color: #fbbf24; }
.dark .dark\:text-yellow-100 { color: #fef9c3; }
.dark .dark\:text-yellow-200 { color: #fef08a; }
.dark .dark\:text-yellow-300 { color: #fde047; }
.dark .dark\:text-yellow-400 { color: #facc15; }
.dark .dark\:text-green-100 { color: #dcfce7; }
.dark .dark\:text-green-200 { color: #bbf7d0; }
.dark .dark\:text-green-300 { color: #86efac; }
.dark .dark\:text-green-400 { color: #4ade80; }
.dark .dark\:text-green-500 { color: #22c55e; }
.dark .dark\:text-blue-200 { color: #bfdbfe; }
.dark .dark\:text-blue-300 { color: #93c5fd; }
.dark .dark\:text-blue-400 { color: #60a5fa; }
.dark .dark\:text-indigo-200 { color: #c7d2fe; }
.dark .dark\:text-indigo-300 { color: #a5b4fc; }
.dark .dark\:text-indigo-400 { color: #818cf8; }
.dark .dark\:text-purple-200 { color: #e9d5ff; }
.dark .dark\:text-purple-300 { color: #d8b4fe; }
.dark .dark\:text-brand-300 { color: #86efac; }
.dark .dark\:text-brand-400 { color: #4ade80; }

/* ========== DARK MODE BORDERS ========== */
.dark .dark\:border-gray-600 { border-color: #4b5563; }
.dark .dark\:border-gray-700 { border-color: #374151; }
.dark .dark\:border-gray-800 { border-color: #1f2937; }
.dark .dark\:border-gray-900 { border-color: #111827; }
.dark .dark\:border-red-600 { border-color: #dc2626; }
.dark .dark\:border-red-700 { border-color: #b91c1c; }
.dark .dark\:border-red-800 { border-color: #991b1b; }
.dark .dark\:border-red-800\/30 { border-color: rgba(153, 27, 27, 0.3); }
.dark .dark\:border-orange-800 { border-color: #9a3412; }
.dark .dark\:border-amber-600 { border-color: #d97706; }
.dark .dark\:border-amber-700\/30 { border-color: rgba(180, 83, 9, 0.3); }
.dark .dark\:border-amber-700\/50 { border-color: rgba(180, 83, 9, 0.5); }
.dark .dark\:border-yellow-600 { border-color: #ca8a04; }
.dark .dark\:border-yellow-600\/50 { border-color: rgba(202, 138, 4, 0.5); }
.dark .dark\:border-yellow-800 { border-color: #854d0e; }
.dark .dark\:border-green-600 { border-color: #16a34a; }
.dark .dark\:border-green-700 { border-color: #15803d; }
.dark .dark\:border-green-800 { border-color: #166534; }
.dark .dark\:border-green-800\/30 { border-color: rgba(22, 101, 52, 0.3); }
.dark .dark\:border-emerald-700 { border-color: #047857; }
.dark .dark\:border-blue-700 { border-color: #1d4ed8; }
.dark .dark\:border-blue-800 { border-color: #1e40af; }
.dark .dark\:border-blue-800\/30 { border-color: rgba(30, 64, 175, 0.3); }
.dark .dark\:border-indigo-500 { border-color: #6366f1; }
.dark .dark\:border-indigo-800\/50 { border-color: rgba(55, 48, 163, 0.5); }
.dark .dark\:border-purple-800 { border-color: #6b21a8; }
.dark .dark\:border-purple-800\/30 { border-color: rgba(107, 33, 168, 0.3); }
.dark .dark\:border-brand-800 { border-color: #166534; }
.dark .dark\:border-t-indigo-500 { border-top-color: #6366f1; }

/* ========== DARK MODE DIVIDE ========== */
.dark .dark\:divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: #1f2937; }

/* ========== DARK MODE RING ========== */
.dark .dark\:ring-gray-600 { --tw-ring-color: #4b5563; }
.dark .dark\:ring-gray-700 { --tw-ring-color: #374151; }
.dark .dark\:ring-green-900\/30 { --tw-ring-color: rgba(20, 83, 45, 0.3); }

/* ========== DARK MODE GRADIENTS ========== */
.dark .dark\:from-gray-800 { --tw-gradient-from: #1f2937; }
.dark .dark\:from-gray-900\/50 { --tw-gradient-from: rgba(17, 24, 39, 0.5); }
.dark .dark\:from-white\/20 { --tw-gradient-from: rgba(255, 255, 255, 0.2); }
.dark .dark\:from-amber-900\/20 { --tw-gradient-from: rgba(120, 53, 15, 0.2); }
.dark .dark\:from-yellow-900\/10 { --tw-gradient-from: rgba(113, 63, 18, 0.1); }
.dark .dark\:from-yellow-900\/20 { --tw-gradient-from: rgba(113, 63, 18, 0.2); }
.dark .dark\:from-green-900\/20 { --tw-gradient-from: rgba(20, 83, 45, 0.2); }
.dark .dark\:from-emerald-900\/20 { --tw-gradient-from: rgba(6, 78, 59, 0.2); }
.dark .dark\:from-blue-900\/20 { --tw-gradient-from: rgba(30, 58, 138, 0.2); }
.dark .dark\:from-purple-900\/20 { --tw-gradient-from: rgba(88, 28, 135, 0.2); }
.dark .dark\:from-purple-900\/30 { --tw-gradient-from: rgba(88, 28, 135, 0.3); }
.dark .dark\:from-brand-900\/20 { --tw-gradient-from: rgba(20, 83, 45, 0.2); }

.dark .dark\:to-gray-900 { --tw-gradient-to: #111827; }
.dark .dark\:to-white\/5 { --tw-gradient-to: rgba(255, 255, 255, 0.05); }
.dark .dark\:to-orange-900\/10 { --tw-gradient-to: rgba(124, 45, 18, 0.1); }
.dark .dark\:to-orange-900\/20 { --tw-gradient-to: rgba(124, 45, 18, 0.2); }
.dark .dark\:to-cyan-900\/10 { --tw-gradient-to: rgba(22, 78, 99, 0.1); }
.dark .dark\:to-teal-900\/20 { --tw-gradient-to: rgba(19, 78, 74, 0.2); }
.dark .dark\:to-emerald-900\/10 { --tw-gradient-to: rgba(6, 78, 59, 0.1); }
.dark .dark\:to-blue-900\/20 { --tw-gradient-to: rgba(30, 58, 138, 0.2); }
.dark .dark\:to-purple-900\/20 { --tw-gradient-to: rgba(88, 28, 135, 0.2); }
.dark .dark\:to-pink-900\/10 { --tw-gradient-to: rgba(131, 24, 67, 0.1); }
.dark .dark\:to-pink-900\/30 { --tw-gradient-to: rgba(131, 24, 67, 0.3); }

/* ========== DARK MODE HOVER STATES ========== */
.dark .dark\:hover\:bg-gray-600:hover { background-color: #4b5563; }
.dark .dark\:hover\:bg-gray-700:hover { background-color: #374151; }
.dark .dark\:hover\:bg-gray-800:hover { background-color: #1f2937; }
.dark .dark\:hover\:text-white:hover { color: #ffffff; }
.dark .dark\:hover\:text-gray-100:hover { color: #f3f4f6; }
.dark .dark\:hover\:text-gray-300:hover { color: #d1d5db; }
.dark .dark\:hover\:text-brand-400:hover { color: #4ade80; }
.dark .dark\:hover\:border-gray-600:hover { border-color: #4b5563; }

/* ========== DARK MODE FOCUS STATES ========== */
.dark .dark\:focus\:ring-gray-700:focus { --tw-ring-color: #374151; }
.dark .dark\:focus\:ring-brand-500:focus { --tw-ring-color: #22c55e; }
.dark .dark\:focus\:border-brand-500:focus { border-color: #22c55e; }

/* ========== DARK MODE GROUP HOVER ========== */
.dark .group:hover .dark\:group-hover\:text-white { color: #ffffff; }
.dark .group:hover .dark\:group-hover\:text-gray-200 { color: #e5e7eb; }
.dark .group:hover .dark\:group-hover\:bg-gray-700 { background-color: #374151; }

/* ========== UTILITIES ========== */
.transition-colors {
    -webkit-transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.backdrop-blur-md {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
    .backdrop-blur-md {
        background-color: rgba(255, 255, 255, 0.95);
    }
    .dark .backdrop-blur-md {
        background-color: rgba(17, 24, 39, 0.95);
    }
}