/* ============================================
   Theme System for MundoPorra
   Change theme by uncommenting ONE theme section
   ============================================ */


:root {
    /* Original Blue Theme (DEFAULT - ACTIVE) */
    --theme-primary-50: #eff6ff;
    --theme-primary-100: #dbeafe;
    --theme-primary-200: #bfdbfe;
    --theme-primary-300: #93c5fd;
    --theme-primary-400: #60a5fa;
    --theme-primary-500: #3b82f6;
    --theme-primary-600: #2563eb;
    --theme-primary-700: #1d4ed8;
    --theme-primary-800: #1e40af;
    --theme-primary-900: #1e3a8a;
    --theme-primary-950: #172554;
}

/* ============================================
   Apply Theme Variables to Tailwind Classes
   ============================================ */

/* Background Colors */
.bg-blue-50 {
    background-color: var(--theme-primary-50) !important;
}

.bg-blue-100 {
    background-color: var(--theme-primary-100) !important;
}

.bg-blue-200 {
    background-color: var(--theme-primary-200) !important;
}

.bg-blue-300 {
    background-color: var(--theme-primary-300) !important;
}

.bg-blue-400 {
    background-color: var(--theme-primary-400) !important;
}

.bg-blue-500 {
    background-color: var(--theme-primary-500) !important;
}

.bg-blue-600 {
    background-color: var(--theme-primary-600) !important;
}

.bg-blue-700 {
    background-color: var(--theme-primary-700) !important;
}

.bg-blue-800 {
    background-color: var(--theme-primary-800) !important;
}

.bg-blue-900 {
    background-color: var(--theme-primary-900) !important;
}

.bg-blue-950 {
    background-color: var(--theme-primary-950) !important;
}

/* Text Colors */
.text-blue-50 {
    color: var(--theme-primary-50) !important;
}

.text-blue-100 {
    color: var(--theme-primary-100) !important;
}

.text-blue-200 {
    color: var(--theme-primary-200) !important;
}

.text-blue-300 {
    color: var(--theme-primary-300) !important;
}

.text-blue-400 {
    color: var(--theme-primary-400) !important;
}

.text-blue-500 {
    color: var(--theme-primary-500) !important;
}

.text-blue-600 {
    color: var(--theme-primary-600) !important;
}

.text-blue-700 {
    color: var(--theme-primary-700) !important;
}

.text-blue-800 {
    color: var(--theme-primary-800) !important;
}

.text-blue-900 {
    color: var(--theme-primary-900) !important;
}

/* Border Colors */
.border-blue-50 {
    border-color: var(--theme-primary-50) !important;
}

.border-blue-100 {
    border-color: var(--theme-primary-100) !important;
}

.border-blue-200 {
    border-color: var(--theme-primary-200) !important;
}

.border-blue-300 {
    border-color: var(--theme-primary-300) !important;
}

.border-blue-400 {
    border-color: var(--theme-primary-400) !important;
}

.border-blue-500 {
    border-color: var(--theme-primary-500) !important;
}

.border-blue-600 {
    border-color: var(--theme-primary-600) !important;
}

.border-blue-700 {
    border-color: var(--theme-primary-700) !important;
}

.border-blue-800 {
    border-color: var(--theme-primary-800) !important;
}

.border-blue-900 {
    border-color: var(--theme-primary-900) !important;
}

/* Hover States */
.hover\:bg-blue-50:hover {
    background-color: var(--theme-primary-50) !important;
}

.hover\:bg-blue-100:hover {
    background-color: var(--theme-primary-100) !important;
}

.hover\:bg-blue-200:hover {
    background-color: var(--theme-primary-200) !important;
}

.hover\:bg-blue-600:hover {
    background-color: var(--theme-primary-600) !important;
}

.hover\:bg-blue-700:hover {
    background-color: var(--theme-primary-700) !important;
}

.hover\:text-blue-200:hover {
    color: var(--theme-primary-200) !important;
}

.hover\:text-blue-300:hover {
    color: var(--theme-primary-300) !important;
}

.hover\:text-blue-400:hover {
    color: var(--theme-primary-400) !important;
}

.hover\:text-blue-600:hover {
    color: var(--theme-primary-600) !important;
}

.hover\:text-blue-700:hover {
    color: var(--theme-primary-700) !important;
}

.hover\:border-blue-500:hover {
    border-color: var(--theme-primary-500) !important;
}

/* Dark Mode */
.dark .dark\:bg-blue-500 {
    background-color: var(--theme-primary-500) !important;
}

.dark .dark\:bg-blue-800 {
    background-color: var(--theme-primary-800) !important;
}

.dark .dark\:bg-blue-900 {
    background-color: var(--theme-primary-900) !important;
}

.dark .dark\:text-blue-100 {
    color: var(--theme-primary-100) !important;
}

.dark .dark\:text-blue-300 {
    color: var(--theme-primary-300) !important;
}

.dark .dark\:text-blue-400 {
    color: var(--theme-primary-400) !important;
}

.dark .dark\:hover\:bg-blue-900:hover {
    background-color: var(--theme-primary-900) !important;
}

.dark .dark\:hover\:text-blue-300:hover {
    color: var(--theme-primary-300) !important;
}

.dark .dark\:hover\:text-blue-400:hover {
    color: var(--theme-primary-400) !important;
}

/* Focus States */
.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--theme-primary-500) !important;
}

.dark .dark\:focus\:ring-blue-400:focus {
    --tw-ring-color: var(--theme-primary-400) !important;
}

/* Shadow Colors */
.shadow-blue-500\/10 {
    --tw-shadow-color: var(--theme-primary-500) !important;
}

.shadow-blue-500\/20 {
    --tw-shadow-color: var(--theme-primary-500) !important;
}

/* Gradient Colors */
.from-blue-50 {
    --tw-gradient-from: var(--theme-primary-50) !important;
    --tw-gradient-to: rgb(255 255 255 / 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-blue-600 {
    --tw-gradient-from: var(--theme-primary-600) !important;
    --tw-gradient-to: rgb(255 255 255 / 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-indigo-600 {
    --tw-gradient-to: var(--theme-primary-700) !important;
}

/* ============================================
   Chrome Dark Mode Fix
   ============================================ */
@media (prefers-color-scheme: dark) {
    .dark\:bg-gray-800\/95 {
        background-color: rgb(31 41 55 / 0.95) !important;
    }

    .dark\:text-gray-200 {
        color: rgb(229 231 235) !important;
    }

    .dark\:hover\:bg-blue-900\/20:hover {
        background-color: rgb(30 58 138 / 0.2) !important;
    }
}