/* =========================================================
   ملف المتغيرات (الألوان والخطوط والمسافات)
   هنا بنحط كل الإعدادات الأساسية للموقع
   عشان لو غيرنا لون، نغيره من هنا بس
   ========================================================= */

:root {
    /* الألوان الأساسية */
    --color-black: #0D0D0D;
    /* الأسود الأساسي */
    --color-charcoal: #181818;
    /* الأسود الداكن */
    --color-gold: #D4AF37;
    /* الذهبي */
    --color-gold-muted: #B88E52;
    /* الذهبي الهادي */
    --color-white: #FFFFFF;
    /* الأبيض */

    /* ألوان مساعدة */
    --color-surface: #F7F7F5;
    /* رمادي فاتح للخلفيات */
    --color-text-muted: #6B6B6B;
    /* رمادي للنصوص الثانوية */
    --color-border: #E5E5E5;
    /* لون الحدود */

    /* الخطوط */
    --font-main: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    --fs-xs: 0.75rem;
    /* 12px */
    --fs-sm: 0.875rem;
    /* 14px */
    --fs-base: 1rem;
    /* 16px */
    --fs-lg: 1.125rem;
    /* 18px */
    --fs-xl: 1.5rem;
    /* 24px */
    --fs-2xl: 2rem;
    /* 32px */
    --fs-3xl: 2.75rem;
    /* 44px */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    /* المسافات */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* الحدود والظلال */
    --radius-sm: 4px;
    --radius-md: 6px;
    --shadow-soft: 0 2px 8px rgba(13, 13, 13, 0.06);

    /* الأبعاد */
    --header-height: 72px;
    --container-max: 1280px;

    /* الانتقالات */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}