/* 
 * DESIGN SYSTEM - AL-MALEK SOFT
 * Aesthetic: Apple Cleanliness + QiWA Professionalism + Medical Future
 */

:root {
    /* -------------------------------------------
       1. COLOR PALETTE
       ------------------------------------------- */

    /* Primary Brand - Deep Medical Blue (Trust & Gov) */
    --color-primary: #0072ff;
    /* Bright Apple-like Blue */
    --color-primary-dark: #0056c7;
    --color-primary-soft: rgba(0, 114, 255, 0.08);

    /* Secondary - Clean Teal (Health & AI) */
    --color-accent: #00d2ff;
    --color-accent-gradient: linear-gradient(135deg, #0072ff 0%, #00d2ff 100%);

    /* Backgrounds */
    --bg-body: #F5F5F7;
    /* Apple Light Gray */
    --bg-surface: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.75);
    --bg-glass-dark: rgba(22, 22, 23, 0.75);
    /* Dark mode glass */

    /* Typography Colors */
    --text-primary: #1d1d1f;
    /* Apple Black */
    --text-secondary: #86868b;
    /* Apple Gray */
    --text-on-dark: #f5f5f7;

    /* Status */
    --color-success: #34c759;
    --color-warning: #ff9f0a;
    --color-error: #ff3b30;

    /* -------------------------------------------
       2. TYPOGRAPHY
       ------------------------------------------- */
    --font-ar: 'Cairo', sans-serif;
    --font-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --font-display: 700;
    --font-body: 400;

    /* Fluid Typography Scale */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 2rem;
    /* 32px */
    --text-4xl: 2.5rem;
    /* 40px */
    --text-5xl: 3.5rem;
    /* 56px - Hero */

    /* -------------------------------------------
       3. SPACING (8pt Grid)
       ------------------------------------------- */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;
    --space-3xl: 96px;
    --space-4xl: 128px;

    /* -------------------------------------------
       4. BORDERS & RADIUS
       ------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    --border-light: 1px solid rgba(0, 0, 0, 0.05);
    --border-glass: 1px solid rgba(255, 255, 255, 0.5);

    /* -------------------------------------------
       5. SHADOWS (Apple-like Diffuse)
       ------------------------------------------- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.08);
    /* Float effect */
    --shadow-glow: 0 0 20px rgba(0, 114, 255, 0.3);
    /* Primary Glow */

    /* -------------------------------------------
       6. OTHERS
       ------------------------------------------- */
    --blur-glass: blur(20px);
    --transition-fast: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Apple-like ease */

    /* -------------------------------------------
       7. ANIMATION TOKENS
       ------------------------------------------- */
    --anim-duration-base: 0.5s;
    --anim-duration-slow: 0.8s;
    --anim-duration-fast: 0.3s;

    --anim-ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
    --anim-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --anim-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --anim-ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Dark Mode Support (optional prep) */
@media (prefers-color-scheme: dark) {
    /* To be implemented if user requests dark mode toggle, 
       currently sticking to "Light Premium" as default */
}

/* -------------------------------------------
   7. ANIMATIONS
   ------------------------------------------- */

/* Fade Up Entry */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gentle Float */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Pulse Glow (for AI dots) */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 114, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 114, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 114, 255, 0);
    }
}

/* Scale In */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}