/* Light Theme Color Palette - Noor (نور) inspired teal/green identity */
:root {
    --brand-primary: #D2E6E1;      /* Deeper teal-tinted gray - Main background */
    --brand-secondary: #FFFFFF;    /* White - Secondary background / cards */
    --brand-accent: #1A9C8E;       /* Noor teal - for accents, buttons */
    --brand-highlight: #147A6F;    /* Deeper teal - for hover/active states */
    --brand-cta: #FFFFFF;          /* White - for call-to-action text */

    /* Surface colors */
    --surface-glass: rgba(255, 255, 255, 0.82);
    --surface-glass-2: rgba(240, 247, 246, 0.88);
    --surface-glass-3: rgba(214, 236, 232, 0.92);

    /* Text colors */
    --text-primary: #103B36;       /* Deep teal-slate - for main text */
    --text-secondary: #3E635E;     /* Muted teal-gray - for secondary text */
    --text-muted: #6B8983;         /* Soft teal-gray - for muted text */

    /* State Colors */
    --state-success: #1A9C8E;
    --state-success-bg: rgba(26, 156, 142, 0.12);
    --state-error: #DC2626;
    --state-error-bg: rgba(220, 38, 38, 0.1);
    --state-warning: #D97706;
    --state-warning-text: #103B36;
    --state-warning-bg: rgba(245, 158, 11, 0.15);
    --state-info: #0E8C9E;
    --state-info-bg: rgba(14, 140, 158, 0.1);

    /* Sticky columns for grades table */
    --sticky-cell-bg: rgba(255, 255, 255, 0.95);
    --sticky-head-bg: rgba(240, 247, 246, 0.98);

    /* Interactive elements & states */
    --hover-overlay: rgba(26, 156, 142, 0.07);
    --active-overlay: rgba(26, 156, 142, 0.12);

    /* Shadows and borders for depth */
    --shadow-light: 0 4px 14px rgba(16, 59, 54, 0.07);
    --shadow-medium: 0 8px 24px rgba(16, 59, 54, 0.1);
    --border-glass: rgba(26, 156, 142, 0.18);
}

/* Behavior buttons in light mode */
.behavior-btn {
    color: var(--text-primary);
}

.behavior-btn.active {
    color: var(--brand-cta);
}