/* ==========================================================================
   AlMohamy Theme - CSS Variables (Design Tokens)
   Premium Legal Tech Design System
   ========================================================================== */

:root {
    /* ── Color Palette ── */
    --al-color-midnight: #0a1628;
    --al-color-navy: #0f2557;
    --al-color-deep-blue: #1e3a6e;
    --al-color-electric-blue: #2563eb;
    --al-color-sky-blue: #3b82f6;
    --al-color-ice-blue: #93c5fd;
    
    --al-color-gold: #d4a853;
    --al-color-light-gold: #e8c468;
    --al-color-amber: #f0c75e;
    --al-color-pale-gold: #fef3c7;
    
    --al-color-emerald: #10b981;
    --al-color-emerald-light: #34d399;
    --al-color-emerald-dark: #059669;
    
    --al-color-white: #ffffff;
    --al-color-snow: #f8fafc;
    --al-color-silver: #e2e8f0;
    --al-color-slate: #64748b;
    --al-color-charcoal: #1e293b;
    
    --al-color-whatsapp: #25D366;
    --al-color-danger: #ef4444;

    /* ── Gradients ── */
    --al-gradient-midnight: linear-gradient(135deg, #0a1628 0%, #0f2557 50%, #1e3a6e 100%);
    --al-gradient-hero: linear-gradient(160deg, #0a1628 0%, #0f2557 40%, #1e3a6e 70%, #2563eb 100%);
    --al-gradient-navy-blue: linear-gradient(135deg, #0f2557, #2563eb);
    --al-gradient-gold: linear-gradient(135deg, #d4a853, #f0c75e, #d4a853);
    --al-gradient-emerald: linear-gradient(135deg, #059669, #10b981, #34d399);
    --al-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    --al-gradient-mesh-1: radial-gradient(at 20% 20%, rgba(37,99,235,0.15) 0%, transparent 50%),
                          radial-gradient(at 80% 80%, rgba(212,168,83,0.1) 0%, transparent 50%),
                          radial-gradient(at 50% 50%, rgba(30,58,110,0.08) 0%, transparent 70%);
    --al-gradient-section-dark: linear-gradient(180deg, #0a1628 0%, #0f2557 100%);
    --al-gradient-section-light: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

    /* ── Typography ── */
    --al-font-primary: 'Cairo', sans-serif;
    --al-font-weight-light: 300;
    --al-font-weight-regular: 400;
    --al-font-weight-medium: 500;
    --al-font-weight-semibold: 600;
    --al-font-weight-bold: 700;
    --al-font-weight-extrabold: 800;
    --al-font-weight-black: 900;

    /* ── Font Sizes (Fluid) ── */
    --al-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --al-text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
    --al-text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --al-text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    --al-text-xl: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    --al-text-2xl: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    --al-text-3xl: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    --al-text-4xl: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    --al-text-hero: clamp(2.75rem, 1.5rem + 4vw, 5rem);

    /* ── Line Heights ── */
    --al-leading-tight: 1.15;
    --al-leading-snug: 1.3;
    --al-leading-normal: 1.6;
    --al-leading-relaxed: 1.8;
    --al-leading-loose: 2;

    /* ── Spacing ── */
    --al-space-xs: 8px;
    --al-space-sm: 16px;
    --al-space-md: 24px;
    --al-space-lg: 32px;
    --al-space-xl: 48px;
    --al-space-2xl: 64px;
    --al-space-3xl: 96px;
    --al-space-4xl: 128px;
    --al-space-section: clamp(64px, 8vw, 120px);

    /* ── Border Radius ── */
    --al-radius-sm: 8px;
    --al-radius-md: 12px;
    --al-radius-lg: 16px;
    --al-radius-xl: 24px;
    --al-radius-2xl: 32px;
    --al-radius-full: 9999px;

    /* ── Shadows ── */
    --al-shadow-xs: 0 1px 3px rgba(10, 22, 40, 0.04);
    --al-shadow-sm: 0 2px 8px rgba(10, 22, 40, 0.06);
    --al-shadow-md: 0 8px 30px rgba(10, 22, 40, 0.08);
    --al-shadow-lg: 0 16px 50px rgba(10, 22, 40, 0.12);
    --al-shadow-xl: 0 24px 70px rgba(10, 22, 40, 0.18);
    --al-shadow-2xl: 0 32px 90px rgba(10, 22, 40, 0.25);
    --al-shadow-gold: 0 8px 30px rgba(212, 168, 83, 0.25);
    --al-shadow-blue: 0 8px 30px rgba(37, 99, 235, 0.25);
    --al-shadow-emerald: 0 8px 30px rgba(16, 185, 129, 0.25);
    --al-shadow-glass: 0 8px 32px rgba(10, 22, 40, 0.12);
    --al-shadow-inner: inset 0 2px 4px rgba(10, 22, 40, 0.06);

    /* ── Transitions ── */
    --al-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --al-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --al-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --al-transition-slower: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    --al-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --al-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

    /* ── Z-Index Scale ── */
    --al-z-base: 1;
    --al-z-dropdown: 100;
    --al-z-sticky: 500;
    --al-z-overlay: 900;
    --al-z-modal: 1000;
    --al-z-whatsapp: 1100;
    --al-z-tooltip: 1200;

    /* ── Container ── */
    --al-container-max: 1280px;
    --al-container-narrow: 900px;
    --al-container-wide: 1440px;
    --al-container-padding: clamp(16px, 4vw, 40px);

    /* ── Glass Effect ── */
    --al-glass-bg: rgba(255, 255, 255, 0.08);
    --al-glass-border: rgba(255, 255, 255, 0.12);
    --al-glass-blur: 20px;
    --al-glass-bg-light: rgba(255, 255, 255, 0.7);
    --al-glass-border-light: rgba(255, 255, 255, 0.5);

    /* ── Blur ── */
    --al-blur-sm: 4px;
    --al-blur-md: 12px;
    --al-blur-lg: 20px;
    --al-blur-xl: 40px;
}