/* ==========================================================================
   المدار المتخصصة | AL MADAR AGENCY - DESIGN TOKENS SYSTEM
   ========================================================================== */

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

:root {
    /* ----------------------------------------------------------------------
       1. BRAND COLOR PALETTE (الألوان الأساسية للهوية)
       ---------------------------------------------------------------------- */
    --color-dark:         #0F0B1C; /* Dark Navy - الخلفية الرئيسية */
    --color-deep:         #23133E; /* Deep Blue - خلفية البطاقات والقوائم */
    --color-primary:      #4B00F6; /* Primary Purple - الأكشن والتركيز */
    --color-lavender:     #CDB0FF; /* Soft Lavender - لمسات الجمال والتدرج */
    --color-light:        #E5E9FF; /* Light Text - النصوص الثانوية والفاتحة */
    --color-white:        #FFFFFF; /* White - العناوين والنصوص البارزة */
    
    /* Functional Colors */
    --color-dark-surface: rgba(15, 11, 28, 0.85);
    --color-deep-surface: rgba(35, 19, 62, 0.65);
    --color-border-glass: rgba(205, 176, 255, 0.12);
    --color-border-glow:  rgba(75, 0, 246, 0.4);
    --color-text-muted:   #9496C1;
    --color-success:      #10B981;

    /* ----------------------------------------------------------------------
       2. LUXURY GRADIENTS (التدرجات اللونية الفاخرة)
       ---------------------------------------------------------------------- */
    --grad-primary:       linear-gradient(135deg, #4B00F6 0%, #7B2CBF 50%, #CDB0FF 100%);
    --grad-primary-hover: linear-gradient(135deg, #5C0EFE 0%, #8E3AFF 50%, #D8C2FF 100%);
    --grad-dark-bg:       linear-gradient(180deg, #0F0B1C 0%, #150F28 50%, #0F0B1C 100%);
    --grad-card:          linear-gradient(145deg, rgba(35, 19, 62, 0.7) 0%, rgba(15, 11, 28, 0.9) 100%);
    --grad-card-hover:    linear-gradient(145deg, rgba(48, 26, 85, 0.85) 0%, rgba(22, 16, 42, 0.95) 100%);
    --grad-text:          linear-gradient(135deg, #FFFFFF 30%, #CDB0FF 100%);
    --grad-text-purple:   linear-gradient(135deg, #A855F7 0%, #4B00F6 50%, #CDB0FF 100%);
    --grad-glow-orb:      radial-gradient(circle at center, rgba(75, 0, 246, 0.35) 0%, rgba(205, 176, 255, 0.08) 50%, transparent 70%);

    /* ----------------------------------------------------------------------
       3. GLASSMORPHISM & SHADOWS (مؤثرات الزجاج والظلال)
       ---------------------------------------------------------------------- */
    --glass-bg:           rgba(35, 19, 62, 0.45);
    --glass-bg-hover:     rgba(45, 25, 78, 0.65);
    --glass-border:       1px solid rgba(205, 176, 255, 0.14);
    --glass-border-hover: 1px solid rgba(75, 0, 246, 0.5);
    --glass-blur:         blur(20px);
    --glass-blur-heavy:   blur(35px);

    --shadow-glow-sm:     0 4px 20px rgba(75, 0, 246, 0.25);
    --shadow-glow-lg:     0 10px 40px rgba(75, 0, 246, 0.45);
    --shadow-card:        0 20px 50px rgba(0, 0, 0, 0.5);
    --shadow-inset:       inset 0 1px 1px rgba(255, 255, 255, 0.15);

    /* ----------------------------------------------------------------------
       4. TYPOGRAPHY (التايبوغرافي والخطوط)
       ---------------------------------------------------------------------- */
    --font-arabic:        'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-latin:         'Outfit', sans-serif;

    /* Font Sizes Scale */
    --fs-xs:   0.8125rem; /* 13px */
    --fs-sm:   0.9375rem; /* 15px */
    --fs-base: 1.0625rem; /* 17px */
    --fs-md:   1.25rem;   /* 20px */
    --fs-lg:   1.5rem;    /* 24px */
    --fs-xl:   2rem;      /* 32px */
    --fs-2xl:  2.75rem;   /* 44px */
    --fs-3xl:  3.5rem;    /* 56px */
    --fs-hero: 4.5rem;    /* 72px */

    /* ----------------------------------------------------------------------
       5. SPACING & RADIUS (المسافات والانحناءات)
       ---------------------------------------------------------------------- */
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 40px;
    --radius-full: 9999px;

    --transition-fast:   all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-normal: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow:   all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Document Setup */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    direction: rtl;
    font-family: var(--font-arabic);
    background-color: var(--color-dark);
    color: var(--color-light);
    font-size: 16px;
    overflow-x: hidden;
}

body {
    background-color: var(--color-dark);
    background-image: var(--grad-dark-bg);
    min-height: 100vh;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Numbers in Outfit font */
.en-num {
    font-family: var(--font-latin);
    direction: ltr;
    display: inline-block;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--color-deep);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-dark);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}