:root {
    /* ألوان مشتركة مأخوذة من الشعار */
    --rose-gold: #C59B87;
    --rose-gold-hover: #b08571;
    --gunmetal: #4A4F55;
    --transition: all 0.3s ease-in-out;
    --border-radius: 8px;

    /* 🛠️ تصليح: هدول المتغيرين كانوا مستخدمين بأكتر من 7 ملفات CSS (about/contact/projects/
       subproducts/view/footer/admin) بس ما كانوا معرّفين بأي مكان — فكل عنوان بالموقع كان
       عملياً عم يطلع بخط المتصفح الافتراضي بدل أي خط مقصود. Cairo محمّل أصلاً بكل صفحات الموقع
       (header.php) فمنعتمده كخط أساسي للنصوص، وCormorant Garamond (محمّل هو كمان بس مو مستخدم
       نهائياً) كخط عناوين فخم — توليفة كلاسيكية بمواقع الفخامة/النظارات: خط هندسي واضح للنص +
       خط Serif أنيق للعناوين البارزة. */
    --font-body: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-heading: 'Cormorant Garamond', 'Cairo', 'Segoe UI', serif;
}

/* الوضع الفاتح (Light Mode) */
:root[data-theme="light"] {
    --bg-body: #F9FAFB;
    --bg-navbar: #FFFFFF;
    --bg-card: #FFFFFF;
    --text-primary: #162A45;
    --text-secondary: #5A5F68;
    --border-color: #E5E7EB;
    --shadow: 0 4px 15px rgba(22, 42, 69, 0.05);
    
    /* متغيرات الناف بار للوضع الفاتح */
    --nav-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
    --nav-scrolled-bg: rgba(255, 255, 255, 0.98);
    --nav-text-color: rgba(22, 42, 69, 0.75);
    --nav-text-hover: #162A45;
    --mobile-menu-bg: rgba(249, 250, 251, 0.98);
    
    /* 🟢 متغيرات جديدة تمت إضافتها */
    --nav-topbar-bg: rgba(0, 0, 0, 0.03); /* خلفية فاتحة جداً للشريط العلوي */
    --nav-border: rgba(22, 42, 69, 0.1); /* خطوط تقسيم كحلية شفافة */
    --nav-dropdown-bg: rgba(255, 255, 255, 0.98); /* خلفية بيضاء للقائمة */
    --nav-dropdown-text: rgba(22, 42, 69, 0.8);
    --nav-hover-bg: rgba(22, 42, 69, 0.05);
}
/* الوضع الداكن (Dark Mode) - افتراضي للتصاميم الفاخرة */
:root[data-theme="dark"] {
    --bg-body: #0A1118;
    --bg-navbar: #111C27;
    --bg-card: #162A45;
    --text-primary: #FFFFFF;
    --text-secondary: #A1AAB5;
    --border-color: #1F3046;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.4);

    /* متغيرات الناف بار للوضع الداكن */
    --nav-glass-bg: linear-gradient(180deg, rgba(10, 10, 10, 0.95), rgba(10, 10, 10, 0.6));
    --nav-scrolled-bg: rgba(10, 10, 10, 0.98);
    --nav-text-color: rgba(255, 255, 255, 0.75);
    --nav-text-hover: #ffffff;
    --mobile-menu-bg: rgba(10, 10, 10, 0.98);
    
    /* 🟢 متغيرات جديدة تمت إضافتها */
    --nav-topbar-bg: rgba(0, 0, 0, 0.2);
    --nav-border: rgba(255, 255, 255, 0.08);
    --nav-dropdown-bg: rgba(12, 12, 12, 0.95);
    --nav-dropdown-text: rgba(255, 255, 255, 0.7);
    --nav-hover-bg: rgba(255, 255, 255, 0.05);
}

/* إعدادات عامة */
body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: var(--font-body);
    margin: 0;
    transition: var(--transition);
}