@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap');

:root {
    /* Brand Colors */
    --primary: #071B38;
    --primary-light: #0F2D5E;
    --accent: #2CB8FF;
    --accent-dark: #0891D4;
    --bg: #F8FAFC;
    --text: #0F172A;
    
    /* Semantic Colors */
    --success: #16A34A;
    --warning: #F59E0B;
    --error: #FF4444;
    
    /* Neutrals */
    --n50: #F8FAFC;
    --n100: #F1F5F9;
    --n200: #E2E8F0;
    --n300: #CBD5E1;
    --n400: #94A3B8;
    --n500: #64748B;
    --n600: #475569;
    --n700: #334155;
    --n800: #1E293B;
    --n900: #0F172A;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #071B38 0%, #0F2D5E 50%, #071B38 100%);
    --gradient-accent: linear-gradient(135deg, #2CB8FF 0%, #0891D4 100%);
    --gradient-hero: radial-gradient(circle at 80% 20%, rgba(44, 184, 255, 0.15) 0%, rgba(7, 27, 56, 0) 50%), linear-gradient(135deg, #071B38 0%, #0f223f 100%);
    
    /* Typography */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-arabic: 'Tajawal', 'Cairo', sans-serif;
    
    /* Fluid Typography (clamp-based) */
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
    --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1rem);
    --text-lg: clamp(1.1rem, 1rem + 0.3vw, 1.125rem);
    --text-xl: clamp(1.2rem, 1.1rem + 0.4vw, 1.25rem);
    --text-2xl: clamp(1.35rem, 1.25rem + 0.5vw, 1.5rem);
    --text-3xl: clamp(1.6rem, 1.45rem + 0.75vw, 1.875rem);
    --text-4xl: clamp(2rem, 1.8rem + 1vw, 2.25rem);
    --text-5xl: clamp(2.5rem, 2.25rem + 1.25vw, 3rem);
    --text-6xl: clamp(3rem, 2.6rem + 2vw, 4.5rem);
    
    /* Font Weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;
    --leading-loose: 2;
    
    /* Spacing Scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;
    
    /* Shadows (premium soft blue tint) */
    --shadow-sm: 0 1px 2px 0 rgba(7, 27, 56, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(7, 27, 56, 0.05), 0 2px 4px -1px rgba(7, 27, 56, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(7, 27, 56, 0.08), 0 4px 6px -2px rgba(7, 27, 56, 0.03);
    --shadow-xl: 0 20px 25px -5px rgba(7, 27, 56, 0.1), 0 10px 10px -5px rgba(7, 27, 56, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(7, 27, 56, 0.15);
    --shadow-accent: 0 10px 30px -10px rgba(44, 184, 255, 0.3);
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-magnetic: 100ms cubic-bezier(0.25, 1, 0.5, 1);
    
    /* Z-Index */
    --z-negative: -1;
    --z-normal: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal: 1040;
    --z-toast: 1050;
    
    /* Layout Container Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
}