/* ==========================================================================
   AL SAFA QURAN ACADEMY - DESIGN SYSTEM & VARIABLES
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Color Palette */
    --color-primary: #0FA38A;
    --color-primary-rgb: 15, 163, 138;
    --color-primary-dark: #0B5D50;
    --color-primary-dark-rgb: 11, 93, 80;
    
    --color-accent-gold: #E2A72E;
    --color-accent-gold-rgb: 226, 167, 46;
    --color-accent-hover: #F0B541;
    
    --color-bg-light: #F8FAF9;
    --color-bg-white: #FFFFFF;
    --color-bg-dark: #073831; /* Premium Dark Teal Footer/Background */
    --color-bg-dark-rgb: 7, 56, 49;
    
    --color-text-primary: #1F2937;
    --color-text-secondary: #64748B;
    --color-text-light: #F1F5F9;
    --color-text-muted: #94A3B8;
    
    --color-border: #E5E7EB;
    --color-border-light: rgba(229, 231, 235, 0.15);
    --color-success: #22C55E;
    
    /* Typography */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Inter', sans-serif;
    --font-arabic: 'Amiri', serif;
    
    /* Spacing & Layout */
    --section-padding: 7.5rem 0;
    --section-padding-mobile: 4.5rem 0;
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;
    --border-radius-round: 50%;
    
    /* Transitions */
    --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-medium: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Shadows */
    --shadow-soft: 0 10px 30px rgba(15, 163, 138, 0.04);
    --shadow-medium: 0 15px 40px rgba(15, 163, 138, 0.08);
    --shadow-hard: 0 20px 50px rgba(7, 56, 49, 0.12);
    --shadow-gold: 0 15px 35px rgba(226, 167, 46, 0.2);
    --shadow-glass: 0 8px 32px 0 rgba(15, 163, 138, 0.06);
    
    /* Glassmorphism & Blur */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-dark: rgba(7, 56, 49, 0.8);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-border-dark: rgba(255, 255, 255, 0.08);
    --blur-strength: 16px;
    
    /* Global Sizing limits */
    --container-max-width: 1280px;
}

/* Base Light/Dark Utility Adaptations */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s !important;
        --transition-medium: 0s !important;
        --transition-slow: 0s !important;
        --transition-bounce: 0s !important;
    }
}