/**
 * Dynamic Branding Styles for CMS Portal
 * Uses CSS variables for dynamic theming
 */

:root {
    /* Default colors - will be overridden by branding.js */
    --school-primary-color: #0D5C63;
    --school-secondary-color: #FF9F1C;
    
    /* Derived colors */
    --primary: var(--school-primary-color);
    --primary-dark: color-mix(in srgb, var(--school-primary-color) 85%, black);
    --primary-light: color-mix(in srgb, var(--school-primary-color) 15%, var(--bg-primary));
    --secondary: var(--school-secondary-color);
}

/* Apply primary color to key UI elements */
.header h1 {
    color: var(--primary);
}

.nav-item.active {
    background: var(--primary-light);
    color: var(--primary);
    border-left-color: var(--primary);
}

.nav-item:hover {
    color: var(--primary);
}

.btn-edit {
    background: var(--primary);
}

.btn-edit:hover {
    background: var(--primary-dark);
}

.stat-card {
    border-left-color: var(--primary);
}

.action-btn:hover {
    border-color: var(--primary);
}

/* Form focus states */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Link colors */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-dark);
}