/**
 * Theme System - CSS Variables
 * Base theme system used by both index.html and admin.html
 */

:root {
    /* Primary Colors (Dynamic - Updated via JavaScript) */
    --color-primary: #1e40af;
    --color-primary-light: #3b82f6;
    --color-primary-dark: #1e3a8a;
    --color-accent: #10b981;

    /* RGB variants for transparency */
    --color-primary-rgb: 30, 64, 175;
    --color-primary-light-rgb: 59, 130, 246;
    --color-accent-rgb: 16, 185, 129;

    /* Derived colors */
    --shadow-primary: rgba(var(--color-primary-rgb), 0.1);
    --shadow-primary-lg: rgba(var(--color-primary-rgb), 0.2);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
    --gradient-primary-light: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    --gradient-accent: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

/* ============================================
   UTILITY CLASSES - INDEX.HTML
   ============================================ */

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

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

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

.bg-accent {
    background-color: var(--color-accent) !important;
}

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

.text-primary-light {
    color: var(--color-primary-light) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

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

.border-primary-light {
    border-color: var(--color-primary-light) !important;
}

.border-accent {
    border-color: var(--color-accent) !important;
}

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

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

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

.hover\:text-accent:hover {
    color: var(--color-accent) !important;
}

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

/* Focus States */
.focus\:border-primary:focus {
    border-color: var(--color-primary) !important;
}

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

/* Gradients */
.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}

.bg-gradient-primary-light {
    background: var(--gradient-primary-light) !important;
}

.bg-gradient-accent {
    background: var(--gradient-accent) !important;
}

/* Shadows with theme color */
.shadow-primary {
    box-shadow: 0 4px 6px -1px var(--shadow-primary), 0 2px 4px -1px var(--shadow-primary) !important;
}

.shadow-primary-lg {
    box-shadow: 0 10px 15px -3px var(--shadow-primary-lg), 0 4px 6px -2px var(--shadow-primary) !important;
}

/* ============================================
   COMPONENT-SPECIFIC OVERRIDES
   ============================================ */

/* Buttons with theme colors */
button.btn-themed,
a.btn-themed {
    background-color: var(--color-primary);
    color: white;
    transition: all 0.2s;
}

button.btn-themed:hover,
a.btn-themed:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--shadow-primary-lg);
}

button.btn-accent-themed,
a.btn-accent-themed {
    background-color: var(--color-accent);
    color: white;
}

button.btn-accent-themed:hover,
a.btn-accent-themed:hover {
    filter: brightness(1.1);
}

/* Badges with theme */
.badge-themed {
    background-color: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Links with theme */
a.link-themed {
    color: var(--color-primary);
    transition: color 0.2s;
}

a.link-themed:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Cards with themed accent */
.card-themed {
    border-left: 4px solid var(--color-primary);
}

.card-themed:hover {
    border-left-color: var(--color-accent);
    box-shadow: 0 4px 12px var(--shadow-primary);
}

/* Progress bars */
.progress-themed {
    background-color: rgba(var(--color-primary-rgb), 0.1);
}

.progress-themed-fill {
    background: var(--gradient-primary);
}

/* Tabs active state */
.tab-themed.active {
    border-bottom: 2px solid var(--color-primary);
    color: var(--color-primary);
}

/* Form inputs focus */
input.input-themed:focus,
textarea.input-themed:focus,
select.input-themed:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

/* Checkboxes and radios */
input[type="checkbox"].checkbox-themed:checked,
input[type="radio"].radio-themed:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Tooltips */
.tooltip-themed {
    background-color: var(--color-primary);
    color: white;
}

.tooltip-themed::after {
    border-top-color: var(--color-primary);
}

/* Alerts/Notifications */
.alert-themed {
    background-color: rgba(var(--color-primary-rgb), 0.1);
    border-left: 4px solid var(--color-primary);
    color: var(--color-primary-dark);
}

/* Loading spinners */
.spinner-themed {
    border-color: rgba(var(--color-primary-rgb), 0.2);
    border-top-color: var(--color-primary);
}

/* Dividers with accent */
.divider-themed {
    background: linear-gradient(90deg,
            transparent,
            var(--color-primary),
            transparent);
    height: 1px;
}