/* Dynamic Theme Colors */
:root {
    --primary-color: #4F46E5;
    --primary-light: #776eff;
    --primary-dark: #3b32d1;
    --secondary-color: #10B981;
    --secondary-light: #38e1a9;
    --accent-color: #F59E0B;
    --accent-light: #ffc633;
    --theme-primary: #4F46E5;
    --theme-secondary: #10B981;
    --theme-accent: #F59E0B;
}

/* Navigation Bars */
.theme-navbar,
nav.theme-navbar {
    background-color: var(--primary-color) !important;
}

.theme-navbar:hover {
    background-color: var(--primary-dark) !important;
}

/* Blue utility class remaps for consistent theming across pages */
.bg-blue-900 { background-color: color-mix(in srgb, var(--primary-dark) 85%, black) !important; }
.bg-blue-800 { background-color: color-mix(in srgb, var(--primary-dark) 75%, black) !important; }
.bg-blue-700 { background-color: var(--primary-dark) !important; }
.bg-blue-600,
button.bg-blue-600,
a.bg-blue-600 { background-color: var(--primary-color) !important; }
.bg-blue-500 { background-color: color-mix(in srgb, var(--primary-color) 86%, white) !important; }
.bg-blue-400 { background-color: color-mix(in srgb, var(--primary-color) 70%, white) !important; }
.bg-blue-300 { background-color: color-mix(in srgb, var(--primary-color) 46%, white) !important; }
.bg-blue-200 { background-color: color-mix(in srgb, var(--primary-color) 30%, white) !important; }
.bg-blue-100 { background-color: color-mix(in srgb, var(--primary-color) 20%, white) !important; }
.bg-blue-50 { background-color: color-mix(in srgb, var(--primary-color) 10%, white) !important; }

.text-blue-900 { color: color-mix(in srgb, var(--primary-dark) 85%, black) !important; }
.text-blue-800 { color: color-mix(in srgb, var(--primary-dark) 72%, black) !important; }
.text-blue-700 { color: var(--primary-dark) !important; }
.text-blue-600 { color: var(--primary-color) !important; }
.text-blue-500 { color: color-mix(in srgb, var(--primary-color) 85%, white) !important; }
.text-blue-400 { color: color-mix(in srgb, var(--primary-color) 70%, white) !important; }
.text-blue-300 { color: color-mix(in srgb, var(--primary-color) 55%, white) !important; }

.border-blue-700 { border-color: var(--primary-dark) !important; }
.border-blue-600 { border-color: color-mix(in srgb, var(--primary-color) 92%, black) !important; }
.border-blue-500 { border-color: var(--primary-color) !important; }
.border-blue-400 { border-color: color-mix(in srgb, var(--primary-color) 75%, white) !important; }
.border-blue-300 { border-color: color-mix(in srgb, var(--primary-color) 55%, white) !important; }
.border-blue-200 { border-color: color-mix(in srgb, var(--primary-color) 30%, white) !important; }

.from-blue-600 { --tw-gradient-from: var(--primary-color) var(--tw-gradient-from-position) !important; --tw-gradient-to: color-mix(in srgb, var(--primary-color) 0%, transparent) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.from-blue-500 { --tw-gradient-from: color-mix(in srgb, var(--primary-color) 90%, white) var(--tw-gradient-from-position) !important; --tw-gradient-to: color-mix(in srgb, var(--primary-color) 0%, transparent) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-blue-700, .to-indigo-700 { --tw-gradient-to: var(--primary-dark) var(--tw-gradient-to-position) !important; }
.to-blue-600, .to-indigo-600 { --tw-gradient-to: var(--secondary-color) var(--tw-gradient-to-position) !important; }

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

.hover\:text-blue-900:hover,
.hover\:text-blue-800:hover,
.hover\:text-blue-700:hover {
    color: var(--primary-dark) !important;
}

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

.hover\:border-blue-700:hover,
.hover\:border-blue-600:hover {
    border-color: var(--primary-dark) !important;
}

.focus\:border-blue-500:focus,
.focus\:border-blue-600:focus {
    border-color: var(--primary-color) !important;
}

.focus\:ring-blue-500:focus,
.focus\:ring-blue-400:focus,
.focus\:ring-blue-300:focus,
.focus\:ring-blue-200:focus {
    --tw-ring-color: color-mix(in srgb, var(--primary-color) 45%, white) !important;
}

.ring-blue-500 { --tw-ring-color: var(--primary-color) !important; }
.ring-blue-400 { --tw-ring-color: color-mix(in srgb, var(--primary-color) 75%, white) !important; }
.ring-blue-300 { --tw-ring-color: color-mix(in srgb, var(--primary-color) 60%, white) !important; }
.ring-blue-200 { --tw-ring-color: color-mix(in srgb, var(--primary-color) 40%, white) !important; }

.shadow-blue-500\/30,
.shadow-blue-500\/40 {
    --tw-shadow-color: color-mix(in srgb, var(--primary-color) 45%, black) !important;
}

/* Custom classes */
.theme-btn-primary,
.btn-primary { background-color: var(--primary-color) !important; }
.theme-btn-primary:hover,
.btn-primary:hover { background-color: var(--primary-dark) !important; }
.theme-link { color: var(--primary-color) !important; }
.theme-link:hover { color: var(--primary-dark) !important; }
.theme-bg { background-color: var(--primary-light) !important; }
.theme-bg-accent { background-color: var(--accent-light) !important; }
.theme-border { border-color: var(--primary-color) !important; }

.settings-tab.active {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

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