/* ═══════════════════════════════════════════════════════════
   CSS Variables - OneSchool Design System
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Brand Colors */
    --brand-primary:     #05192D;
    --brand-secondary:   #00C2A8;
    --brand-accent:      #FF6B35;
    --brand-gradient:    linear-gradient(135deg, #00C2A8 0%, #007CF0 100%);

    /* Semantic Colors */
    --success:           #10B981;
    --success-light:     #D1FAE5;
    --success-dark:      #065F46;

    --warning:           #F59E0B;
    --warning-light:     #FEF3C7;
    --warning-dark:      #92400E;

    --danger:            #EF4444;
    --danger-light:      #FEE2E2;
    --danger-dark:       #991B1B;

    --info:              #3B82F6;
    --info-light:        #DBEAFE;
    --info-dark:         #1E40AF;

    /* Neutral Colors */
    --gray-50:           #F9FAFB;
    --gray-100:          #F3F4F6;
    --gray-200:          #E5E7EB;
    --gray-300:          #D1D5DB;
    --gray-400:          #9CA3AF;
    --gray-500:          #6B7280;
    --gray-600:          #4B5563;
    --gray-700:          #374151;
    --gray-800:          #1F2937;
    --gray-900:          #111827;

    --white:             #FFFFFF;
    --black:             #000000;

    /* ─── Semantic Aliases (used across dashboard, auth, courses, exercise) ─── */
    --color-primary:     #00C2A8;
    --color-primary-dark: #00A890;
    --color-deep-navy:   #05192D;
    --color-deep-navy-dark: #0A2540;
    --color-accent:      #FF6B35;

    --bg-primary:        #FFFFFF;
    --bg-secondary:      #F7FAFC;
    --bg-tertiary:       #EDF2F7;
    --bg-elevated:       #FFFFFF;

    --text-primary:      #1A202C;
    --text-secondary:    #4A5568;
    --text-tertiary:     #718096;

    --border-color:      #E2E8F0;
    --border-light:      #EDF2F7;

    --card-bg:           #FFFFFF;
    --card-border:       #E2E8F0;

    --input-bg:          #FFFFFF;
    --input-border:      #D1D5DB;
    --input-focus:       #00C2A8;

    --sidebar-bg:        #05192D;
    --sidebar-border:    #1E293B;
    --sidebar-hover:     rgba(255, 255, 255, 0.08);
    --sidebar-active:    rgba(0, 194, 168, 0.15);

    --header-bg:         #FFFFFF;
    --header-border:     #E2E8F0;

    --modal-overlay:     rgba(0, 0, 0, 0.5);

    --success-bg:        #D1FAE5;
    --success-border:    #10B981;
    --success-text:      #065F46;

    --warning-bg:        #FEF3C7;
    --warning-border:    #F59E0B;
    --warning-text:      #92400E;

    --error-bg:          #FEE2E2;
    --error-border:      #EF4444;
    --error-text:        #991B1B;

    --info-bg:           #DBEAFE;
    --info-border:       #3B82F6;
    --info-text:         #1E40AF;

    /* Portal Accent Colors */
    --student-primary:   #00C2A8;
    --instructor-primary:#8B5CF6;
    --moderator-primary: #F59E0B;
    --manager-primary:   #3B82F6;
    --admin-primary:     #EF4444;
    --superadmin-primary:#05192D;

    /* Gamification Colors */
    --xp-color:          #F59E0B;
    --streak-color:      #FF6B35;
    --level-color:       #8B5CF6;
    --cert-gold:         #D4AF37;

    /* Typography */
    --font-primary:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:         'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --font-display:      'Plus Jakarta Sans', 'Inter', sans-serif;

    --text-xs:           0.75rem;
    --text-sm:           0.875rem;
    --text-base:         1rem;
    --text-lg:           1.125rem;
    --text-xl:           1.25rem;
    --text-2xl:          1.5rem;
    --text-3xl:          1.875rem;
    --text-4xl:          2.25rem;
    --text-5xl:          3rem;

    /* Spacing */
    --space-1:           0.25rem;
    --space-2:           0.5rem;
    --space-3:           0.75rem;
    --space-4:           1rem;
    --space-5:           1.25rem;
    --space-6:           1.5rem;
    --space-8:           2rem;
    --space-10:          2.5rem;
    --space-12:          3rem;
    --space-16:          4rem;
    --space-20:          5rem;

    /* Layout */
    --header-height:     64px;
    --sidebar-width:     260px;
    --sidebar-collapsed: 72px;
    --content-max-width: 1200px;
    --content-padding:   32px;

    /* Border Radius */
    --radius:            8px;
    --radius-sm:         6px;
    --radius-md:         8px;
    --radius-lg:         12px;
    --radius-xl:         16px;
    --radius-full:       9999px;

    /* Shadows */
    --shadow-xs:         0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:         0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:         0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg:         0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --shadow-xl:         0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
    --shadow-2xl:        0 25px 50px rgba(0,0,0,0.25);
    --shadow-teal:       0 4px 14px rgba(0, 194, 168, 0.25);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   all 0.3s ease;

    /* Performance: Transition Properties */
    --transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
    --transition-opacity: opacity;
    --transition-transform: transform;
    --transition-shadow: box-shadow;

    /* Performance: Z-Index Scale */
    --z-dropdown:        1000;
    --z-sticky:          1020;
    --z-fixed:           1030;
    --z-modal-backdrop:  1040;
    --z-modal:           1050;
    --z-popover:         1060;
    --z-tooltip:         1070;

    /* Performance: Animation Durations */
    --duration-fast:     100ms;
    --duration-normal:   200ms;
    --duration-slow:     300ms;

    /* Performance: Timing Functions */
    --ease-in:           cubic-bezier(0.4, 0, 1, 1);
    --ease-out:          cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:       cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Focus Styles (Accessibility) ─── */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}