/* ---------------------------
   0. Local Fonts Import
--------------------------- */

/* الوزن العادي - Regular 400 */
@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal-v12-arabic_latin-regular.woff2') format('woff2'),
         url('../fonts/tajawal-v12-arabic_latin-regular.woff2') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* مهم لتحسين سرعة ظهور النص */
}

/* الوزن المتوسط - Medium 500 */
@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal-v12-arabic_latin-500.woff2') format('woff2'),
         url('../fonts/tajawal-v12-arabic_latin-500.woff2') format('woff');
    font-weight: 500; /* عدل الرقم حسب الوزن الذي حملته */
    font-style: normal;
    font-display: swap;
}

/* الوزن العريض - Bold 700/800 */
@font-face {
    font-family: 'Tajawal';
    src: url('../fonts/tajawal-v12-arabic_latin-700.woff2') format('woff2'),
         url('../fonts/tajawal-v12-arabic_latin-700.woff2') format('woff');
    font-weight: 700; /* اجعله 700 أو 800 حسب الملف */
    font-style: normal;
    font-display: swap;
}
:root {
    /* ---------------------------
       1. Typography (الخطوط)
    --------------------------- */
    --font-primary: 'Tajawal', sans-serif;       /* للعناوين والنصوص العربية */
    --font-secondary: 'Montserrat', sans-serif;  /* للأرقام والكلمات الإنجليزية */
    
    --text-base: 16px;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;   /* H4 */
    --text-2xl: 2rem;    /* H3 */
    --text-3xl: 2.5rem;  /* H2 */
    --text-4xl: 3.5rem;  /* H1 */

    /* ---------------------------
       2. Colors (لوحة الألوان)
    --------------------------- */
    /* اللون الأساسي: ذهبي معدني فاخر */
    --color-gold-light: #D4AF37;   /* ذهبي فاتح للتأثيرات */
    --color-gold-main: #C5A059;    /* الذهبي الأساسي للأزرار والعناوين */
    --color-gold-dark: #9E7E36;    /* ذهبي داكن للحدود والظلال */
    
    /* اللون الثانوي: أسود فحمي ودرجات الرمادي */
    --color-charcoal-900: #121212; /* للخلفيات الرئيسية (Body) */
    --color-charcoal-800: #1E1E1E; /* للكروت والأقسام الفرعية */
    --color-charcoal-700: #2C2C2C; /* للفوتر أو الهيدر */
    --color-grey-500: #888888;     /* للنصوص الثانوية */
    --color-grey-100: #F5F5F5;     /* للنصوص البيضاء */

    /* ألوان الحالة */
    --color-success: #27AE60;
    --color-error: #C0392B;

    /* ---------------------------
       3. Layout & Spacing (الأبعاد)
    --------------------------- */
    --container-width: 1280px;
    --header-height: 90px;
    
    --spacing-xs: 0.5rem;  /* 8px */
    --spacing-sm: 1rem;    /* 16px */
    --spacing-md: 2rem;    /* 32px */
    --spacing-lg: 4rem;    /* 64px (للمسافات بين الأقسام) */
    --spacing-xl: 8rem;    /* 128px (للهيرو سكشن) */

    /* ---------------------------
       4. Effects (التأثيرات)
    --------------------------- */
    --border-radius-sm: 4px; /* حواف حادة قليلاً تناسب الطابع الهندسي */
    --border-radius-md: 8px;
    
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-gold: 0 4px 15px rgba(197, 160, 89, 0.2); /* توهج ذهبي خفيف */
    
    --transition: all 0.3s ease-in-out;
}
/* =========================================
   Light Mode Overrides (الوضع النهاري)
   يتم تفعيله عبر كلاس .light-mode في الـ body
   ========================================= */
body.light-mode {
    /* 1. قلب الخلفيات الرئيسية */
    --color-charcoal-900: #ffffff; /* الخلفية تصبح بيضاء */
    --color-charcoal-800: #f4f4f4; /* خلفية الكروت تصبح رمادي فاتح */
    --color-charcoal-700: #e0e0e0; /* الحدود والفواصل */

    /* 2. قلب النصوص */
    --color-grey-100: #121212;     /* النص الأبيض يصبح أسود فحمي */
    --color-grey-500: #444444;     /* النص الرمادي يصبح أغمق للقراءة */

    /* 3. تعديل الهيدر في الوضع النهاري */
    /* ملاحظة: يتم تطبيق هذا عبر CSS الهيدر، لكن الألوان الأساسية هنا تكفي */
}

/* إصلاحات خاصة للعناصر في الوضع النهاري */
body.light-mode .site-header.scrolled {
    background-color: #ffffff !important; /* الهيدر يصبح أبيض عند النزول */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* ظل خفيف */
}

/* الروابط في الهيدر النهاري */
body.light-mode .site-header.scrolled .main-navigation ul li a,
body.light-mode .site-header.scrolled .tool-btn {
    color: #121212 !important;
}

body.light-mode .mobile-menu-overlay {
    background-color: #ffffff;
}
body.light-mode .mobile-nav a,
body.light-mode .close-mobile-menu {
    color: #121212;
}

/* الحفاظ على فخامة الهيرو (استثناء) */
/* إذا كان خيار "تثبيت الهيرو داكناً" مفعلاً، لن يتأثر الهيرو بالألوان أعلاه */