/* Dynamic Theme System - CSS Custom Properties */

/* Default Theme (Primary) */
:root {
    --theme-50: rgb(240, 249, 255);
    --theme-100: rgb(224, 242, 254);
    --theme-200: rgb(186, 230, 253);
    --theme-300: rgb(125, 211, 252);
    --theme-400: rgb(56, 189, 248);
    --theme-500: rgb(14, 165, 233);
    --theme-600: rgb(2, 132, 199);
    --theme-700: rgb(3, 105, 161);
    --theme-800: rgb(7, 89, 133);
    --theme-900: rgb(12, 74, 110);
}

/* Primary Theme (explicit selector) */
:root[data-theme="primary"] {
    --theme-50: rgb(240, 249, 255);
    --theme-100: rgb(224, 242, 254);
    --theme-200: rgb(186, 230, 253);
    --theme-300: rgb(125, 211, 252);
    --theme-400: rgb(56, 189, 248);
    --theme-500: rgb(14, 165, 233);
    --theme-600: rgb(2, 132, 199);
    --theme-700: rgb(3, 105, 161);
    --theme-800: rgb(7, 89, 133);
    --theme-900: rgb(12, 74, 110);
}

/* Blue Theme */
:root[data-theme="blue"] {
    --theme-50: rgb(239, 246, 255);
    --theme-100: rgb(219, 234, 254);
    --theme-200: rgb(191, 219, 254);
    --theme-300: rgb(147, 197, 253);
    --theme-400: rgb(96, 165, 250);
    --theme-500: rgb(59, 130, 246);
    --theme-600: rgb(37, 99, 235);
    --theme-700: rgb(29, 78, 216);
    --theme-800: rgb(30, 64, 175);
    --theme-900: rgb(30, 58, 138);
}

/* Green Theme */
:root[data-theme="green"] {
    --theme-50: rgb(240, 253, 244);
    --theme-100: rgb(220, 252, 231);
    --theme-200: rgb(187, 247, 208);
    --theme-300: rgb(134, 239, 172);
    --theme-400: rgb(74, 222, 128);
    --theme-500: rgb(34, 197, 94);
    --theme-600: rgb(22, 163, 74);
    --theme-700: rgb(21, 128, 61);
    --theme-800: rgb(22, 101, 52);
    --theme-900: rgb(20, 83, 45);
}

/* Purple Theme */
:root[data-theme="purple"] {
    --theme-50: rgb(250, 245, 255);
    --theme-100: rgb(243, 232, 255);
    --theme-200: rgb(233, 213, 255);
    --theme-300: rgb(216, 180, 254);
    --theme-400: rgb(196, 181, 253);
    --theme-500: rgb(168, 85, 247);
    --theme-600: rgb(147, 51, 234);
    --theme-700: rgb(126, 34, 206);
    --theme-800: rgb(107, 33, 168);
    --theme-900: rgb(88, 28, 135);
}

/* Red Theme */
:root[data-theme="red"] {
    --theme-50: rgb(254, 242, 242);
    --theme-100: rgb(254, 226, 226);
    --theme-200: rgb(254, 202, 202);
    --theme-300: rgb(252, 165, 165);
    --theme-400: rgb(248, 113, 113);
    --theme-500: rgb(239, 68, 68);
    --theme-600: rgb(220, 38, 38);
    --theme-700: rgb(185, 28, 28);
    --theme-800: rgb(153, 27, 27);
    --theme-900: rgb(127, 29, 29);
}

/* Orange Theme */
:root[data-theme="orange"] {
    --theme-50: rgb(255, 247, 237);
    --theme-100: rgb(255, 237, 213);
    --theme-200: rgb(254, 215, 170);
    --theme-300: rgb(253, 186, 116);
    --theme-400: rgb(251, 146, 60);
    --theme-500: rgb(249, 115, 22);
    --theme-600: rgb(234, 88, 12);
    --theme-700: rgb(194, 65, 12);
    --theme-800: rgb(154, 52, 18);
    --theme-900: rgb(124, 45, 18);
}

/* Indigo Theme */
:root[data-theme="indigo"] {
    --theme-50: rgb(238, 242, 255);
    --theme-100: rgb(224, 231, 255);
    --theme-200: rgb(199, 210, 254);
    --theme-300: rgb(165, 180, 252);
    --theme-400: rgb(129, 140, 248);
    --theme-500: rgb(99, 102, 241);
    --theme-600: rgb(79, 70, 229);
    --theme-700: rgb(67, 56, 202);
    --theme-800: rgb(55, 48, 163);
    --theme-900: rgb(49, 46, 129);
}

/* Teal Theme */
:root[data-theme="teal"] {
    --theme-50: rgb(240, 253, 250);
    --theme-100: rgb(204, 251, 241);
    --theme-200: rgb(153, 246, 228);
    --theme-300: rgb(94, 234, 212);
    --theme-400: rgb(45, 212, 191);
    --theme-500: rgb(20, 184, 166);
    --theme-600: rgb(13, 148, 136);
    --theme-700: rgb(15, 118, 110);
    --theme-800: rgb(17, 94, 89);
    --theme-900: rgb(19, 78, 74);
}

/* Theme Classes with Maximum Specificity */
html .bg-theme-50, body .bg-theme-50, .bg-theme-50 { 
    background-color: var(--theme-50) !important; 
}
html .bg-theme-100, body .bg-theme-100, .bg-theme-100 { 
    background-color: var(--theme-100) !important; 
}
html .bg-theme-200, body .bg-theme-200, .bg-theme-200 { 
    background-color: var(--theme-200) !important; 
}
html .bg-theme-300, body .bg-theme-300, .bg-theme-300 { 
    background-color: var(--theme-300) !important; 
}
html .bg-theme-400, body .bg-theme-400, .bg-theme-400 { 
    background-color: var(--theme-400) !important; 
}
html .bg-theme-500, body .bg-theme-500, .bg-theme-500 { 
    background-color: var(--theme-500) !important; 
}
html .bg-theme-600, body .bg-theme-600, .bg-theme-600 { 
    background-color: var(--theme-600) !important; 
}
html .bg-theme-700, body .bg-theme-700, .bg-theme-700 { 
    background-color: var(--theme-700) !important; 
}
html .bg-theme-800, body .bg-theme-800, .bg-theme-800 { 
    background-color: var(--theme-800) !important; 
}
html .bg-theme-900, body .bg-theme-900, .bg-theme-900 { 
    background-color: var(--theme-900) !important; 
}

/* Text Colors */
html .text-theme-50, body .text-theme-50, .text-theme-50 { 
    color: var(--theme-50) !important; 
}
html .text-theme-100, body .text-theme-100, .text-theme-100 { 
    color: var(--theme-100) !important; 
}
html .text-theme-200, body .text-theme-200, .text-theme-200 { 
    color: var(--theme-200) !important; 
}
html .text-theme-300, body .text-theme-300, .text-theme-300 { 
    color: var(--theme-300) !important; 
}
html .text-theme-400, body .text-theme-400, .text-theme-400 { 
    color: var(--theme-400) !important; 
}
html .text-theme-500, body .text-theme-500, .text-theme-500 { 
    color: var(--theme-500) !important; 
}
html .text-theme-600, body .text-theme-600, .text-theme-600 { 
    color: var(--theme-600) !important; 
}
html .text-theme-700, body .text-theme-700, .text-theme-700 { 
    color: var(--theme-700) !important; 
}
html .text-theme-800, body .text-theme-800, .text-theme-800 { 
    color: var(--theme-800) !important; 
}
html .text-theme-900, body .text-theme-900, .text-theme-900 { 
    color: var(--theme-900) !important; 
}

/* Border Colors */
html .border-theme-50, body .border-theme-50, .border-theme-50 { 
    border-color: var(--theme-50) !important; 
}
html .border-theme-100, body .border-theme-100, .border-theme-100 { 
    border-color: var(--theme-100) !important; 
}
html .border-theme-200, body .border-theme-200, .border-theme-200 { 
    border-color: var(--theme-200) !important; 
}
html .border-theme-300, body .border-theme-300, .border-theme-300 { 
    border-color: var(--theme-300) !important; 
}
html .border-theme-400, body .border-theme-400, .border-theme-400 { 
    border-color: var(--theme-400) !important; 
}
html .border-theme-500, body .border-theme-500, .border-theme-500 { 
    border-color: var(--theme-500) !important; 
}
html .border-theme-600, body .border-theme-600, .border-theme-600 { 
    border-color: var(--theme-600) !important; 
}
html .border-theme-700, body .border-theme-700, .border-theme-700 { 
    border-color: var(--theme-700) !important; 
}
html .border-theme-800, body .border-theme-800, .border-theme-800 { 
    border-color: var(--theme-800) !important; 
}
html .border-theme-900, body .border-theme-900, .border-theme-900 { 
    border-color: var(--theme-900) !important; 
}

/* Hover States */
html .hover\:bg-theme-600:hover, body .hover\:bg-theme-600:hover, .hover\:bg-theme-600:hover { 
    background-color: var(--theme-600) !important; 
}
html .hover\:bg-theme-700:hover, body .hover\:bg-theme-700:hover, .hover\:bg-theme-700:hover { 
    background-color: var(--theme-700) !important; 
}

/* Focus States */
html .focus\:ring-theme-500:focus, body .focus\:ring-theme-500:focus, .focus\:ring-theme-500:focus { 
    --tw-ring-color: var(--theme-500) !important; 
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
}

/* Gradient Support */
html .from-theme-600, body .from-theme-600, .from-theme-600 { 
    --tw-gradient-from: var(--theme-600) !important; 
    --tw-gradient-to: transparent !important; 
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; 
}
html .to-theme-700, body .to-theme-700, .to-theme-700 { 
    --tw-gradient-to: var(--theme-700) !important; 
}
.items-end {
    align-items: flex-end !important;
}