/* ================================================================
   ROLLEX — نظام التصميم الموحّد (Design System)
   ================================================================
   المرجع: هوية "حراء" الكحلي/الذهبي المستخدمة في index.html و sales.html.
   الملف ده بيتحمّل في كل صفحات المشروع (<link rel="stylesheet"
   href="theme.css">) بدل ما كل صفحة تكرر تعريف نظام الألوان بنفسها.

   ليه فيه "أسماء بديلة" (aliases) كتير تحت؟
   لأن كل صفحة قديمة كانت مسمّية نفس الفكرة (اللون الذهبي، اللون
   الكحلي، لون النص، لون الحدود...) بأسماء متغيرات مختلفة (--gold,
   --primary, --text-primary, --gray-900...). بدل ما نعيد كتابة آلاف
   أسطر الـ CSS في كل صفحة عشان تستخدم الاسم الموحّد، بنخلي كل الأسماء
   القديمة دي "تشاور" على نفس القيمة الموحّدة الجديدة. النتيجة: أي
   صفحة تربط الملف ده وتشيل تعريف :root المحلي بتاعها، تتحول تلقائيًا
   لنفس هوية الألوان — من غير ما نلمس باقي الكود بتاعها.
   ================================================================ */

:root {
    /* ------------------------------------------------------------
       1) الألوان الأساسية (المصدر الوحيد للحقيقة)
       ------------------------------------------------------------ */
    --primary:       #0e1c2e;   /* كحلي أساسي */
    --primary-light: #1a2e46;
    --primary-dark:  #08131f;

    --accent:        #9c7a3c;   /* ذهبي أساسي */
    --accent-light:  #c9a86a;
    --accent-dark:   #755a29;
    --accent-tint:   rgba(156, 122, 60, 0.08);

    --text-inverse:  #f5f3ec;   /* نص أبيض دافئ فوق الكحلي */

    --canvas:      #f3f1eb;     /* خلفية الصفحة */
    --surface:     #ffffff;     /* خلفية الكروت */
    --surface-2:   #faf8f3;     /* خلفية ثانوية (هوفر/شرائط) */
    --line:        rgba(14, 28, 46, 0.10);
    --line-soft:   rgba(14, 28, 46, 0.05);

    --ink:         #181712;     /* نص أساسي */
    --ink-2:       #5c5648;     /* نص ثانوي */
    --ink-3:       #928c79;     /* نص باهت */
    --ink-4:       #e0dccf;     /* حدود فاتحة جدًا */

    /* ألوان فئات الدهانات (بطاقات إحصائيات وشرائح ألوان) */
    --prussian:        #1f4e6b;
    --prussian-tint:   #e7eef1;
    --terracotta:      #b14b2b;
    --terracotta-tint: #f7e7df;
    --ochre:           #b98a1e;
    --ochre-tint:      #f6efdd;
    --viridian:        #2e7a5c;
    --viridian-tint:   #e7f1ec;
    --oxide:           #a63a31;
    --oxide-tint:      #f5e4e1;

    /* ألوان الحالة (نجاح/خطر/تحذير/معلومة) — موحّدة لكل الصفحات */
    --success:     #1e7856;
    --success-bg:  rgba(30, 120, 86, 0.09);
    --danger:      #ad3f30;
    --danger-bg:   rgba(173, 63, 48, 0.09);
    --warning:     #a5701f;
    --warning-bg:  rgba(165, 112, 31, 0.09);
    --info:        #1f6b8a;
    --info-bg:     rgba(31, 107, 138, 0.09);

    /* ------------------------------------------------------------
       2) القياسات المشتركة
       ------------------------------------------------------------ */
    --sidebar-w:   270px;
    --header-h:    68px;
    --r-sm:        8px;
    --r-md:        12px;
    --r-lg:        18px;
    --r-xl:        20px;
    --ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --transition:  0.25s cubic-bezier(0.4, 0, 0.2, 1);

    --shadow-sm: 0 2px 8px rgba(14, 28, 46, 0.06);
    --shadow-md: 0 4px 20px rgba(14, 28, 46, 0.08);
    --shadow-lg: 0 12px 48px rgba(14, 28, 46, 0.10);
    --shadow-xl: 0 20px 60px rgba(14, 28, 46, 0.14);
    --shadow-gold: 0 8px 22px rgba(156, 122, 60, 0.28);

    --display: 'Bricolage Grotesque', 'Cairo', sans-serif;
    --font: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-display: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --skeleton-gradient: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    --skeleton-size: 100%;

    /* ------------------------------------------------------------
       3) أسماء بديلة (Aliases) للتوافق مع الكود القديم في كل صفحة
       ------------------------------------------------------------ */

    /* عائلة "الذهبي" بكل أسمائها القديمة */
    --gold:            var(--accent);
    --gold-light:      var(--accent-light);
    --gold-dark:       var(--accent-dark);
    --gold-deep:       var(--accent-dark);
    --gold-glow:       var(--accent-tint);
    --gold-bg:         var(--accent-tint);
    --gold-gradient:   linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 50%, var(--accent-dark) 100%);
    --shadow-gold-lg:  0 14px 34px rgba(156, 122, 60, 0.34);
    --secondary:       var(--accent);
    --secondary-dark:  var(--accent-dark);
    --secondary-light: var(--accent-light);
    --accent-ink:      var(--accent-dark);
    --accent-soft:     var(--accent-tint);

    /* عائلة "الكحلي" بكل أسمائها القديمة */
    --navy:            var(--primary);
    --navy-bg:         var(--primary);
    --navy-bg-2:       var(--primary-dark);
    --navy-light:      var(--primary-light);
    --navy-glow:       rgba(14, 28, 46, 0.07);
    --navy-gradient:   linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    --card:            var(--surface);
    --field:           var(--surface-2);
    --field-border:    var(--line);

    /* عائلة خلفيات الصفحة/الكروت */
    --bg-primary:      var(--canvas);
    --bg-page:         var(--canvas);
    --bg-body:         var(--canvas);
    --bg-secondary:    var(--surface);
    --bg-card:         var(--surface);
    --bg-card-hover:   var(--surface-2);
    --bg-input:        var(--surface-2);
    --bg-field:        var(--surface-2);
    --paper:           var(--canvas);
    --surface-muted:   var(--surface-2);
    --white:           var(--surface);

    /* عائلة النصوص */
    --text-primary:    var(--ink);
    --text-secondary:  var(--ink-2);
    --text-muted:      var(--ink-3);
    --text-light:      var(--ink-3);
    --text-faint:      var(--ink-3);
    --text-dim:        var(--ink-3);
    --text-mid:        var(--ink-2);
    --text-highlight:  var(--ink);
    --ink-mute:        var(--ink-3);
    --ink-soft:        var(--ink-2);

    /* عائلة الحدود */
    --border-color:    var(--line);
    --border-hover:    var(--ink-4);
    --line-strong:     var(--ink-4);

    /* عائلة الرمادي (Gray scale) اللي كانت مستخدمة في employees.html وغيرها */
    --gray-50:  var(--surface-2);
    --gray-100: var(--surface-2);
    --gray-200: var(--ink-4);
    --gray-300: var(--ink-4);
    --gray-400: var(--ink-3);
    --gray-500: var(--ink-3);
    --gray-600: var(--ink-2);
    --gray-700: var(--ink-2);
    --gray-800: var(--primary-light);
    --gray-900: var(--primary);

    /* --primary القديمة (كانت بتتلخبط أحيانًا مع كحلي غامق مختلف) */
    /* ✅ بنسيبها هي نفسها --primary الموحّدة فوق، مفيش داعي alias هنا */

    /* ألوان إضافية كانت مستخدمة بشكل حر في بعض الصفحات */
    --teal:            var(--viridian);
    --teal-soft:       var(--viridian-tint);
    --rust:            var(--terracotta);
    --rust-soft:       var(--terracotta-tint);
    --blue:            var(--prussian);
    --green:           var(--success);
    --green-dark:      var(--success);
    --red:             var(--danger);
    --red-dark:        var(--danger);
    --purple:          #6a4c93;
    --neon-green:      var(--success);
    --neon-green-dark: var(--success);

    /* عائلة الحواف الدائرية (radius) بأسماء مختلفة */
    --radius:      var(--r-md);
    --radius-sm:   var(--r-sm);
    --radius-md:   var(--r-md);
    --radius-lg:   var(--r-lg);
    --radius-xl:   var(--r-xl);
    --radius-2xl:  22px;

    /* عائلة الظلال بأسماء مختلفة (كلها بترجع لنفس المستوى الموحّد فوق) */
    /* --shadow-sm/md/lg/xl معرّفين فوق بالفعل */
    --shadow: var(--shadow-md);

    /* أبعاد الشريط الجانبي/الهيدر بأسماء مختلفة */
    --sidebar-width:      var(--sidebar-w);
    --header-height:      var(--header-h);
    --mobile-nav-height:  56px;
    --sticky-top-height:  0px;

    --font-serif: 'Marcellus', 'Cairo', serif;
    --scale-factor: 1;
}