/* CSS Variables and Theme */
/* CSS Variables and Theme */
:root {
    /* Primary Colors */
    --primary-color: #4facfe;
    --secondary-color: #00f2fe;
    
    /* School Brand Colors */
    --agnon-blue: #003865;
    --agnon-gold: #FFB700;
    
    /* Status Colors */
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    
    /* Layout */
    --border-radius: 12px;
    --box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    --box-shadow-hover: 0 8px 25px rgba(79, 172, 254, 0.3);
    
    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Arial', sans-serif;
    --font-size-base: 16px;
    --font-size-small: 0.85rem;
    --font-size-large: 1.1rem;
    
    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    
    /* Z-index layers */
    --z-index-dropdown: 100;
    --z-index-modal: 1000;
    --z-index-loading: 9999;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-button: linear-gradient(135deg, var(--primary-color) 0%, #00f2fe 100%);
}