:root {
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    --color-primary-950: #172554;

    --color-background: #ffffff;
    --color-surface: #f8fafc;
    --color-surface-elevated: #f1f5f9;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
}

html {
    color-scheme: light !important;
}

body {
    background-color: var(--color-background);
    color: var(--color-text);
}

/* LIGHT THEME: IGNORE ALL DARK: CLASSES */
html { color-scheme: light !important; }

/* Universal dark: class override - Force ignore ALL dark: classes */
.dark\\:text-gray-50,
.dark\\:text-gray-100,
.dark\\:text-gray-200,
.dark\\:text-gray-300,
.dark\\:text-gray-400,
.dark\\:text-gray-500,
.dark\\:text-gray-600,
.dark\\:text-gray-700,
.dark\\:text-gray-800,
.dark\\:text-gray-900,
.dark\\:text-gray-950,
.dark\\:text-neutral-50,
.dark\\:text-neutral-100,
.dark\\:text-neutral-200,
.dark\\:text-neutral-300,
.dark\\:text-neutral-400,
.dark\\:text-neutral-500,
.dark\\:text-neutral-600,
.dark\\:text-neutral-700,
.dark\\:text-neutral-800,
.dark\\:text-neutral-900,
.dark\\:text-neutral-950,
.dark\\:text-white,
.dark\\:text-black,
.dark\\:bg-gray-50,
.dark\\:bg-gray-100,
.dark\\:bg-gray-200,
.dark\\:bg-gray-300,
.dark\\:bg-gray-400,
.dark\\:bg-gray-500,
.dark\\:bg-gray-600,
.dark\\:bg-gray-700,
.dark\\:bg-gray-800,
.dark\\:bg-gray-900,
.dark\\:bg-gray-950,
.dark\\:bg-neutral-50,
.dark\\:bg-neutral-100,
.dark\\:bg-neutral-200,
.dark\\:bg-neutral-300,
.dark\\:bg-neutral-400,
.dark\\:bg-neutral-500,
.dark\\:bg-neutral-600,
.dark\\:bg-neutral-700,
.dark\\:bg-neutral-800,
.dark\\:bg-neutral-900,
.dark\\:bg-neutral-950,
.dark\\:bg-white,
.dark\\:bg-black,
.dark\\:border-gray-50,
.dark\\:border-gray-100,
.dark\\:border-gray-200,
.dark\\:border-gray-300,
.dark\\:border-gray-400,
.dark\\:border-gray-500,
.dark\\:border-gray-600,
.dark\\:border-gray-700,
.dark\\:border-gray-800,
.dark\\:border-gray-900,
.dark\\:border-gray-950,
.dark\\:border-neutral-50,
.dark\\:border-neutral-100,
.dark\\:border-neutral-200,
.dark\\:border-neutral-300,
.dark\\:border-neutral-400,
.dark\\:border-neutral-500,
.dark\\:border-neutral-600,
.dark\\:border-neutral-700,
.dark\\:border-neutral-800,
.dark\\:border-neutral-900,
.dark\\:border-neutral-950,
/* Dark hover states */
.dark\\:hover\\:text-gray-50:hover,
.dark\\:hover\\:text-gray-100:hover,
.dark\\:hover\\:text-gray-200:hover,
.dark\\:hover\\:text-gray-300:hover,
.dark\\:hover\\:text-gray-400:hover,
.dark\\:hover\\:text-gray-500:hover,
.dark\\:hover\\:text-gray-600:hover,
.dark\\:hover\\:text-gray-700:hover,
.dark\\:hover\\:text-gray-800:hover,
.dark\\:hover\\:text-gray-900:hover,
.dark\\:hover\\:text-gray-950:hover,
.dark\\:hover\\:text-neutral-50:hover,
.dark\\:hover\\:text-neutral-100:hover,
.dark\\:hover\\:text-neutral-200:hover,
.dark\\:hover\\:text-neutral-300:hover,
.dark\\:hover\\:text-neutral-400:hover,
.dark\\:hover\\:text-neutral-500:hover,
.dark\\:hover\\:text-neutral-600:hover,
.dark\\:hover\\:text-neutral-700:hover,
.dark\\:hover\\:text-neutral-800:hover,
.dark\\:hover\\:text-neutral-900:hover,
.dark\\:hover\\:text-neutral-950:hover,
.dark\\:hover\\:text-white:hover,
.dark\\:hover\\:text-black:hover,
.dark\\:hover\\:bg-gray-50:hover,
.dark\\:hover\\:bg-gray-100:hover,
.dark\\:hover\\:bg-gray-200:hover,
.dark\\:hover\\:bg-gray-300:hover,
.dark\\:hover\\:bg-gray-400:hover,
.dark\\:hover\\:bg-gray-500:hover,
.dark\\:hover\\:bg-gray-600:hover,
.dark\\:hover\\:bg-gray-700:hover,
.dark\\:hover\\:bg-gray-800:hover,
.dark\\:hover\\:bg-gray-900:hover,
.dark\\:hover\\:bg-gray-950:hover,
.dark\\:hover\\:bg-neutral-50:hover,
.dark\\:hover\\:bg-neutral-100:hover,
.dark\\:hover\\:bg-neutral-200:hover,
.dark\\:hover\\:bg-neutral-300:hover,
.dark\\:hover\\:bg-neutral-400:hover,
.dark\\:hover\\:bg-neutral-500:hover,
.dark\\:hover\\:bg-neutral-600:hover,
.dark\\:hover\\:bg-neutral-700:hover,
.dark\\:hover\\:bg-neutral-800:hover,
.dark\\:hover\\:bg-neutral-900:hover,
.dark\\:hover\\:bg-neutral-950:hover,
.dark\\:hover\\:bg-white:hover,
.dark\\:hover\\:bg-black:hover,
.dark\\:hover\\:border-gray-50:hover,
.dark\\:hover\\:border-gray-100:hover,
.dark\\:hover\\:border-gray-200:hover,
.dark\\:hover\\:border-gray-300:hover,
.dark\\:hover\\:border-gray-400:hover,
.dark\\:hover\\:border-gray-500:hover,
.dark\\:hover\\:border-gray-600:hover,
.dark\\:hover\\:border-gray-700:hover,
.dark\\:hover\\:border-gray-800:hover,
.dark\\:hover\\:border-gray-900:hover,
.dark\\:hover\\:border-gray-950:hover,
.dark\\:hover\\:border-neutral-50:hover,
.dark\\:hover\\:border-neutral-100:hover,
.dark\\:hover\\:border-neutral-200:hover,
.dark\\:hover\\:border-neutral-300:hover,
.dark\\:hover\\:border-neutral-400:hover,
.dark\\:hover\\:border-neutral-500:hover,
.dark\\:hover\\:border-neutral-600:hover,
.dark\\:hover\\:border-neutral-700:hover,
.dark\\:hover\\:border-neutral-800:hover,
.dark\\:hover\\:border-neutral-900:hover,
.dark\\:hover\\:border-neutral-950:hover {
    background-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: inherit !important;
    opacity: inherit !important;
    transform: inherit !important;
    filter: inherit !important;
}

/* Specific dark: overrides */
                        .dark\\:bg-neutral-50 { bg-color: inherit !important; }
                                .dark\\:text-neutral-50 { text-color: inherit !important; }
                                .dark\\:border-neutral-50 { border-color: inherit !important; }
                                .dark\\:ring-neutral-50 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-neutral-50 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-neutral-100 { bg-color: inherit !important; }
                                .dark\\:text-neutral-100 { text-color: inherit !important; }
                                .dark\\:border-neutral-100 { border-color: inherit !important; }
                                .dark\\:ring-neutral-100 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-neutral-100 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-neutral-200 { bg-color: inherit !important; }
                                .dark\\:text-neutral-200 { text-color: inherit !important; }
                                .dark\\:border-neutral-200 { border-color: inherit !important; }
                                .dark\\:ring-neutral-200 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-neutral-200 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-neutral-300 { bg-color: inherit !important; }
                                .dark\\:text-neutral-300 { text-color: inherit !important; }
                                .dark\\:border-neutral-300 { border-color: inherit !important; }
                                .dark\\:ring-neutral-300 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-neutral-300 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-neutral-400 { bg-color: inherit !important; }
                                .dark\\:text-neutral-400 { text-color: inherit !important; }
                                .dark\\:border-neutral-400 { border-color: inherit !important; }
                                .dark\\:ring-neutral-400 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-neutral-400 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-neutral-500 { bg-color: inherit !important; }
                                .dark\\:text-neutral-500 { text-color: inherit !important; }
                                .dark\\:border-neutral-500 { border-color: inherit !important; }
                                .dark\\:ring-neutral-500 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-neutral-500 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-neutral-600 { bg-color: inherit !important; }
                                .dark\\:text-neutral-600 { text-color: inherit !important; }
                                .dark\\:border-neutral-600 { border-color: inherit !important; }
                                .dark\\:ring-neutral-600 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-neutral-600 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-neutral-700 { bg-color: inherit !important; }
                                .dark\\:text-neutral-700 { text-color: inherit !important; }
                                .dark\\:border-neutral-700 { border-color: inherit !important; }
                                .dark\\:ring-neutral-700 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-neutral-700 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-neutral-800 { bg-color: inherit !important; }
                                .dark\\:text-neutral-800 { text-color: inherit !important; }
                                .dark\\:border-neutral-800 { border-color: inherit !important; }
                                .dark\\:ring-neutral-800 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-neutral-800 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-neutral-900 { bg-color: inherit !important; }
                                .dark\\:text-neutral-900 { text-color: inherit !important; }
                                .dark\\:border-neutral-900 { border-color: inherit !important; }
                                .dark\\:ring-neutral-900 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-neutral-900 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-neutral-950 { bg-color: inherit !important; }
                                .dark\\:text-neutral-950 { text-color: inherit !important; }
                                .dark\\:border-neutral-950 { border-color: inherit !important; }
                                .dark\\:ring-neutral-950 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-neutral-950 { text-decoration-color: inherit !important; }
                                                .dark\\:bg-gray-50 { bg-color: inherit !important; }
                                .dark\\:text-gray-50 { text-color: inherit !important; }
                                .dark\\:border-gray-50 { border-color: inherit !important; }
                                .dark\\:ring-gray-50 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-gray-50 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-gray-100 { bg-color: inherit !important; }
                                .dark\\:text-gray-100 { text-color: inherit !important; }
                                .dark\\:border-gray-100 { border-color: inherit !important; }
                                .dark\\:ring-gray-100 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-gray-100 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-gray-200 { bg-color: inherit !important; }
                                .dark\\:text-gray-200 { text-color: inherit !important; }
                                .dark\\:border-gray-200 { border-color: inherit !important; }
                                .dark\\:ring-gray-200 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-gray-200 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-gray-300 { bg-color: inherit !important; }
                                .dark\\:text-gray-300 { text-color: inherit !important; }
                                .dark\\:border-gray-300 { border-color: inherit !important; }
                                .dark\\:ring-gray-300 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-gray-300 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-gray-400 { bg-color: inherit !important; }
                                .dark\\:text-gray-400 { text-color: inherit !important; }
                                .dark\\:border-gray-400 { border-color: inherit !important; }
                                .dark\\:ring-gray-400 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-gray-400 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-gray-500 { bg-color: inherit !important; }
                                .dark\\:text-gray-500 { text-color: inherit !important; }
                                .dark\\:border-gray-500 { border-color: inherit !important; }
                                .dark\\:ring-gray-500 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-gray-500 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-gray-600 { bg-color: inherit !important; }
                                .dark\\:text-gray-600 { text-color: inherit !important; }
                                .dark\\:border-gray-600 { border-color: inherit !important; }
                                .dark\\:ring-gray-600 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-gray-600 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-gray-700 { bg-color: inherit !important; }
                                .dark\\:text-gray-700 { text-color: inherit !important; }
                                .dark\\:border-gray-700 { border-color: inherit !important; }
                                .dark\\:ring-gray-700 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-gray-700 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-gray-800 { bg-color: inherit !important; }
                                .dark\\:text-gray-800 { text-color: inherit !important; }
                                .dark\\:border-gray-800 { border-color: inherit !important; }
                                .dark\\:ring-gray-800 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-gray-800 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-gray-900 { bg-color: inherit !important; }
                                .dark\\:text-gray-900 { text-color: inherit !important; }
                                .dark\\:border-gray-900 { border-color: inherit !important; }
                                .dark\\:ring-gray-900 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-gray-900 { text-decoration-color: inherit !important; }
                                            .dark\\:bg-gray-950 { bg-color: inherit !important; }
                                .dark\\:text-gray-950 { text-color: inherit !important; }
                                .dark\\:border-gray-950 { border-color: inherit !important; }
                                .dark\\:ring-gray-950 { --tw-ring-color: inherit !important; }
                                .dark\\:decoration-gray-950 { text-decoration-color: inherit !important; }
                        
/* Dark hover states */
            .dark\\:hover\\:bg-neutral-50:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-neutral-50:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-neutral-100:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-neutral-100:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-neutral-200:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-neutral-200:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-neutral-300:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-neutral-300:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-neutral-400:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-neutral-400:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-neutral-500:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-neutral-500:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-neutral-600:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-neutral-600:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-neutral-700:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-neutral-700:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-neutral-800:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-neutral-800:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-neutral-900:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-neutral-900:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-neutral-950:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-neutral-950:hover { text-color: inherit !important; }
                        .dark\\:hover\\:bg-gray-50:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-gray-50:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-gray-100:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-gray-100:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-gray-200:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-gray-200:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-gray-300:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-gray-300:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-gray-400:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-gray-400:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-gray-500:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-gray-500:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-gray-600:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-gray-600:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-gray-700:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-gray-700:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-gray-800:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-gray-800:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-gray-900:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-gray-900:hover { text-color: inherit !important; }
                    .dark\\:hover\\:bg-gray-950:hover { bg-color: inherit !important; }
        .dark\\:hover\\:text-gray-950:hover { text-color: inherit !important; }
            
/* Force light styles */
.bg-white, .bg-gray-50, .bg-neutral-50 { background-color: #ffffff !important; }
.bg-gray-100, .bg-neutral-100 { background-color: #f3f4f6 !important; }
.text-neutral-900, .text-gray-900, .text-black { color: #111827 !important; }
.text-neutral-700, .text-gray-700 { color: #374151 !important; }
.text-neutral-600, .text-gray-600 { color: #4b5563 !important; }
.border-gray-300, .border-neutral-300 { border-color: #d1d5db !important; }
.border-gray-200, .border-neutral-200 { border-color: #e5e7eb !important; }


/* PRIMARY COLOR UTILITIES */
            .bg-primary-50 { bg-color: var(--color-primary-50) !important; }
                    .text-primary-50 { text-color: var(--color-primary-50) !important; }
                    .border-primary-50 { border-color: var(--color-primary-50) !important; }
                    .ring-primary-50 { --tw-ring-color: var(--color-primary-50) !important; }
                    .decoration-primary-50 { text-decoration-color: var(--color-primary-50) !important; }
                        .bg-primary-100 { bg-color: var(--color-primary-100) !important; }
                    .text-primary-100 { text-color: var(--color-primary-100) !important; }
                    .border-primary-100 { border-color: var(--color-primary-100) !important; }
                    .ring-primary-100 { --tw-ring-color: var(--color-primary-100) !important; }
                    .decoration-primary-100 { text-decoration-color: var(--color-primary-100) !important; }
                        .bg-primary-200 { bg-color: var(--color-primary-200) !important; }
                    .text-primary-200 { text-color: var(--color-primary-200) !important; }
                    .border-primary-200 { border-color: var(--color-primary-200) !important; }
                    .ring-primary-200 { --tw-ring-color: var(--color-primary-200) !important; }
                    .decoration-primary-200 { text-decoration-color: var(--color-primary-200) !important; }
                        .bg-primary-300 { bg-color: var(--color-primary-300) !important; }
                    .text-primary-300 { text-color: var(--color-primary-300) !important; }
                    .border-primary-300 { border-color: var(--color-primary-300) !important; }
                    .ring-primary-300 { --tw-ring-color: var(--color-primary-300) !important; }
                    .decoration-primary-300 { text-decoration-color: var(--color-primary-300) !important; }
                        .bg-primary-400 { bg-color: var(--color-primary-400) !important; }
                    .text-primary-400 { text-color: var(--color-primary-400) !important; }
                    .border-primary-400 { border-color: var(--color-primary-400) !important; }
                    .ring-primary-400 { --tw-ring-color: var(--color-primary-400) !important; }
                    .decoration-primary-400 { text-decoration-color: var(--color-primary-400) !important; }
                        .bg-primary-500 { bg-color: var(--color-primary-500) !important; }
                    .text-primary-500 { text-color: var(--color-primary-500) !important; }
                    .border-primary-500 { border-color: var(--color-primary-500) !important; }
                    .ring-primary-500 { --tw-ring-color: var(--color-primary-500) !important; }
                    .decoration-primary-500 { text-decoration-color: var(--color-primary-500) !important; }
                        .bg-primary-600 { bg-color: var(--color-primary-600) !important; }
                    .text-primary-600 { text-color: var(--color-primary-600) !important; }
                    .border-primary-600 { border-color: var(--color-primary-600) !important; }
                    .ring-primary-600 { --tw-ring-color: var(--color-primary-600) !important; }
                    .decoration-primary-600 { text-decoration-color: var(--color-primary-600) !important; }
                        .bg-primary-700 { bg-color: var(--color-primary-700) !important; }
                    .text-primary-700 { text-color: var(--color-primary-700) !important; }
                    .border-primary-700 { border-color: var(--color-primary-700) !important; }
                    .ring-primary-700 { --tw-ring-color: var(--color-primary-700) !important; }
                    .decoration-primary-700 { text-decoration-color: var(--color-primary-700) !important; }
                        .bg-primary-800 { bg-color: var(--color-primary-800) !important; }
                    .text-primary-800 { text-color: var(--color-primary-800) !important; }
                    .border-primary-800 { border-color: var(--color-primary-800) !important; }
                    .ring-primary-800 { --tw-ring-color: var(--color-primary-800) !important; }
                    .decoration-primary-800 { text-decoration-color: var(--color-primary-800) !important; }
                        .bg-primary-900 { bg-color: var(--color-primary-900) !important; }
                    .text-primary-900 { text-color: var(--color-primary-900) !important; }
                    .border-primary-900 { border-color: var(--color-primary-900) !important; }
                    .ring-primary-900 { --tw-ring-color: var(--color-primary-900) !important; }
                    .decoration-primary-900 { text-decoration-color: var(--color-primary-900) !important; }
                        .bg-primary-950 { bg-color: var(--color-primary-950) !important; }
                    .text-primary-950 { text-color: var(--color-primary-950) !important; }
                    .border-primary-950 { border-color: var(--color-primary-950) !important; }
                    .ring-primary-950 { --tw-ring-color: var(--color-primary-950) !important; }
                    .decoration-primary-950 { text-decoration-color: var(--color-primary-950) !important; }
            
/* PRIMARY HOVER STATES */
    .hover\\:bg-primary-50:hover { bg-color: var(--color-primary-50) !important; }
    .hover\\:text-primary-50:hover { text-color: var(--color-primary-50) !important; }
    .hover\\:border-primary-50:hover { border-color: var(--color-primary-50) !important; }
        .hover\\:bg-primary-100:hover { bg-color: var(--color-primary-100) !important; }
    .hover\\:text-primary-100:hover { text-color: var(--color-primary-100) !important; }
    .hover\\:border-primary-100:hover { border-color: var(--color-primary-100) !important; }
        .hover\\:bg-primary-200:hover { bg-color: var(--color-primary-200) !important; }
    .hover\\:text-primary-200:hover { text-color: var(--color-primary-200) !important; }
    .hover\\:border-primary-200:hover { border-color: var(--color-primary-200) !important; }
        .hover\\:bg-primary-300:hover { bg-color: var(--color-primary-300) !important; }
    .hover\\:text-primary-300:hover { text-color: var(--color-primary-300) !important; }
    .hover\\:border-primary-300:hover { border-color: var(--color-primary-300) !important; }
        .hover\\:bg-primary-400:hover { bg-color: var(--color-primary-400) !important; }
    .hover\\:text-primary-400:hover { text-color: var(--color-primary-400) !important; }
    .hover\\:border-primary-400:hover { border-color: var(--color-primary-400) !important; }
        .hover\\:bg-primary-500:hover { bg-color: var(--color-primary-500) !important; }
    .hover\\:text-primary-500:hover { text-color: var(--color-primary-500) !important; }
    .hover\\:border-primary-500:hover { border-color: var(--color-primary-500) !important; }
        .hover\\:bg-primary-600:hover { bg-color: var(--color-primary-600) !important; }
    .hover\\:text-primary-600:hover { text-color: var(--color-primary-600) !important; }
    .hover\\:border-primary-600:hover { border-color: var(--color-primary-600) !important; }
        .hover\\:bg-primary-700:hover { bg-color: var(--color-primary-700) !important; }
    .hover\\:text-primary-700:hover { text-color: var(--color-primary-700) !important; }
    .hover\\:border-primary-700:hover { border-color: var(--color-primary-700) !important; }
        .hover\\:bg-primary-800:hover { bg-color: var(--color-primary-800) !important; }
    .hover\\:text-primary-800:hover { text-color: var(--color-primary-800) !important; }
    .hover\\:border-primary-800:hover { border-color: var(--color-primary-800) !important; }
        .hover\\:bg-primary-900:hover { bg-color: var(--color-primary-900) !important; }
    .hover\\:text-primary-900:hover { text-color: var(--color-primary-900) !important; }
    .hover\\:border-primary-900:hover { border-color: var(--color-primary-900) !important; }
        .hover\\:bg-primary-950:hover { bg-color: var(--color-primary-950) !important; }
    .hover\\:text-primary-950:hover { text-color: var(--color-primary-950) !important; }
    .hover\\:border-primary-950:hover { border-color: var(--color-primary-950) !important; }
    
/* PRIMARY FOCUS STATES */
.focus\\:ring-primary-50:focus { --tw-ring-color: var(--color-primary-50) !important; }
.focus\\:border-primary-50:focus { border-color: var(--color-primary-50) !important; }
.focus\\:ring-primary-100:focus { --tw-ring-color: var(--color-primary-100) !important; }
.focus\\:border-primary-100:focus { border-color: var(--color-primary-100) !important; }
.focus\\:ring-primary-200:focus { --tw-ring-color: var(--color-primary-200) !important; }
.focus\\:border-primary-200:focus { border-color: var(--color-primary-200) !important; }
.focus\\:ring-primary-300:focus { --tw-ring-color: var(--color-primary-300) !important; }
.focus\\:border-primary-300:focus { border-color: var(--color-primary-300) !important; }
.focus\\:ring-primary-400:focus { --tw-ring-color: var(--color-primary-400) !important; }
.focus\\:border-primary-400:focus { border-color: var(--color-primary-400) !important; }
.focus\\:ring-primary-500:focus { --tw-ring-color: var(--color-primary-500) !important; }
.focus\\:border-primary-500:focus { border-color: var(--color-primary-500) !important; }
.focus\\:ring-primary-600:focus { --tw-ring-color: var(--color-primary-600) !important; }
.focus\\:border-primary-600:focus { border-color: var(--color-primary-600) !important; }
.focus\\:ring-primary-700:focus { --tw-ring-color: var(--color-primary-700) !important; }
.focus\\:border-primary-700:focus { border-color: var(--color-primary-700) !important; }
.focus\\:ring-primary-800:focus { --tw-ring-color: var(--color-primary-800) !important; }
.focus\\:border-primary-800:focus { border-color: var(--color-primary-800) !important; }
.focus\\:ring-primary-900:focus { --tw-ring-color: var(--color-primary-900) !important; }
.focus\\:border-primary-900:focus { border-color: var(--color-primary-900) !important; }
.focus\\:ring-primary-950:focus { --tw-ring-color: var(--color-primary-950) !important; }
.focus\\:border-primary-950:focus { border-color: var(--color-primary-950) !important; }

/* PRIMARY ACTIVE STATES */
.active\\:bg-primary-50:active { background-color: var(--color-primary-50) !important; }
.active\\:bg-primary-100:active { background-color: var(--color-primary-100) !important; }
.active\\:bg-primary-200:active { background-color: var(--color-primary-200) !important; }
.active\\:bg-primary-300:active { background-color: var(--color-primary-300) !important; }
.active\\:bg-primary-400:active { background-color: var(--color-primary-400) !important; }
.active\\:bg-primary-500:active { background-color: var(--color-primary-500) !important; }
.active\\:bg-primary-600:active { background-color: var(--color-primary-600) !important; }
.active\\:bg-primary-700:active { background-color: var(--color-primary-700) !important; }
.active\\:bg-primary-800:active { background-color: var(--color-primary-800) !important; }
.active\\:bg-primary-900:active { background-color: var(--color-primary-900) !important; }
.active\\:bg-primary-950:active { background-color: var(--color-primary-950) !important; }

/* DARK MODE PRIMARY COLORS */
    .dark\\:bg-primary-50 { bg-color: var(--color-primary-50) !important; }
    .dark\\:text-primary-50 { text-color: var(--color-primary-50) !important; }
    .dark\\:border-primary-50 { border-color: var(--color-primary-50) !important; }
        .dark\\:bg-primary-100 { bg-color: var(--color-primary-100) !important; }
    .dark\\:text-primary-100 { text-color: var(--color-primary-100) !important; }
    .dark\\:border-primary-100 { border-color: var(--color-primary-100) !important; }
        .dark\\:bg-primary-200 { bg-color: var(--color-primary-200) !important; }
    .dark\\:text-primary-200 { text-color: var(--color-primary-200) !important; }
    .dark\\:border-primary-200 { border-color: var(--color-primary-200) !important; }
        .dark\\:bg-primary-300 { bg-color: var(--color-primary-300) !important; }
    .dark\\:text-primary-300 { text-color: var(--color-primary-300) !important; }
    .dark\\:border-primary-300 { border-color: var(--color-primary-300) !important; }
        .dark\\:bg-primary-400 { bg-color: var(--color-primary-400) !important; }
    .dark\\:text-primary-400 { text-color: var(--color-primary-400) !important; }
    .dark\\:border-primary-400 { border-color: var(--color-primary-400) !important; }
        .dark\\:bg-primary-500 { bg-color: var(--color-primary-500) !important; }
    .dark\\:text-primary-500 { text-color: var(--color-primary-500) !important; }
    .dark\\:border-primary-500 { border-color: var(--color-primary-500) !important; }
        .dark\\:bg-primary-600 { bg-color: var(--color-primary-600) !important; }
    .dark\\:text-primary-600 { text-color: var(--color-primary-600) !important; }
    .dark\\:border-primary-600 { border-color: var(--color-primary-600) !important; }
        .dark\\:bg-primary-700 { bg-color: var(--color-primary-700) !important; }
    .dark\\:text-primary-700 { text-color: var(--color-primary-700) !important; }
    .dark\\:border-primary-700 { border-color: var(--color-primary-700) !important; }
        .dark\\:bg-primary-800 { bg-color: var(--color-primary-800) !important; }
    .dark\\:text-primary-800 { text-color: var(--color-primary-800) !important; }
    .dark\\:border-primary-800 { border-color: var(--color-primary-800) !important; }
        .dark\\:bg-primary-900 { bg-color: var(--color-primary-900) !important; }
    .dark\\:text-primary-900 { text-color: var(--color-primary-900) !important; }
    .dark\\:border-primary-900 { border-color: var(--color-primary-900) !important; }
        .dark\\:bg-primary-950 { bg-color: var(--color-primary-950) !important; }
    .dark\\:text-primary-950 { text-color: var(--color-primary-950) !important; }
    .dark\\:border-primary-950 { border-color: var(--color-primary-950) !important; }
    
/* DARK MODE PRIMARY HOVER STATES */
    .dark\\:hover\\:bg-primary-50:hover { bg-color: var(--color-primary-50) !important; }
    .dark\\:hover\\:text-primary-50:hover { text-color: var(--color-primary-50) !important; }
        .dark\\:hover\\:bg-primary-100:hover { bg-color: var(--color-primary-100) !important; }
    .dark\\:hover\\:text-primary-100:hover { text-color: var(--color-primary-100) !important; }
        .dark\\:hover\\:bg-primary-200:hover { bg-color: var(--color-primary-200) !important; }
    .dark\\:hover\\:text-primary-200:hover { text-color: var(--color-primary-200) !important; }
        .dark\\:hover\\:bg-primary-300:hover { bg-color: var(--color-primary-300) !important; }
    .dark\\:hover\\:text-primary-300:hover { text-color: var(--color-primary-300) !important; }
        .dark\\:hover\\:bg-primary-400:hover { bg-color: var(--color-primary-400) !important; }
    .dark\\:hover\\:text-primary-400:hover { text-color: var(--color-primary-400) !important; }
        .dark\\:hover\\:bg-primary-500:hover { bg-color: var(--color-primary-500) !important; }
    .dark\\:hover\\:text-primary-500:hover { text-color: var(--color-primary-500) !important; }
        .dark\\:hover\\:bg-primary-600:hover { bg-color: var(--color-primary-600) !important; }
    .dark\\:hover\\:text-primary-600:hover { text-color: var(--color-primary-600) !important; }
        .dark\\:hover\\:bg-primary-700:hover { bg-color: var(--color-primary-700) !important; }
    .dark\\:hover\\:text-primary-700:hover { text-color: var(--color-primary-700) !important; }
        .dark\\:hover\\:bg-primary-800:hover { bg-color: var(--color-primary-800) !important; }
    .dark\\:hover\\:text-primary-800:hover { text-color: var(--color-primary-800) !important; }
        .dark\\:hover\\:bg-primary-900:hover { bg-color: var(--color-primary-900) !important; }
    .dark\\:hover\\:text-primary-900:hover { text-color: var(--color-primary-900) !important; }
        .dark\\:hover\\:bg-primary-950:hover { bg-color: var(--color-primary-950) !important; }
    .dark\\:hover\\:text-primary-950:hover { text-color: var(--color-primary-950) !important; }