/* =====================================================
   Saree3 — طبقة التوكِنز الموحّدة
   =====================================================
   هذا الملف هو المصدر الوحيد للحقيقة في الهوية البصرية.
   كل بلوك :root آخر في المشروع يجب أن *يُشير* إلى هذه
   المتغيّرات بـ var() لا أن يُعرّف قيماً خاصة به.

   قاعدة: لا تكتب قيمة لون أو زاوية أو ظل يدوياً في أي
   ملف. أضِفها هنا واستخدم var().
   ===================================================== */

:root {

    /* ─────────────────────────────────────────────
       ١) لون العلامة — برتقالي سريع
       المرجع: #FF6B35 = hsl(16, 100%, 60%)
       وهو نفس قيمة theme-color و site.webmanifest
       ───────────────────────────────────────────── */
    --brand-25:   #FFF9F5;
    --brand-50:   #FFF1EB;
    --brand-100:  #FFDDD1;
    --brand-200:  #FFC3AD;
    --brand-300:  #FFA280;
    --brand-400:  #FF8F65;
    --brand-500:  #FF6B35;   /* ← لون العلامة الأساسي */
    --brand-600:  #E85A2A;
    --brand-700:  #C2410C;
    --brand-800:  #9A3412;
    --brand-900:  #7C2D12;

    /* أشكال شفافة من لون العلامة (للظلال والتوهّج) */
    --brand-a12:  rgba(255, 107, 53, 0.12);
    --brand-a20:  rgba(255, 107, 53, 0.20);
    --brand-a32:  rgba(255, 107, 53, 0.32);

    /* ألوان مساندة تظهر فقط داخل التدرّجات مع لون العلامة */
    --accent-amber: #F7931E;
    --accent-rose:  #FF4757;
    --accent-peach: #FFA07A;

    /* ─────────────────────────────────────────────
       ٢) هويّات الأقسام
       لكل قسم لون تعريفي مقصود — ليس تشتّتاً.
       ───────────────────────────────────────────── */
    --mart-25:    #F0FDF4;
    --mart-50:    #DCFCE7;
    --mart-400:   #22C55E;
    --mart-500:   #16A34A;   /* سريع مارت — أخضر */
    --mart-600:   #15803D;
    --mart-700:   #166534;
    --mart-800:   #14532D;
    --admin-50:   #DBEAFE;
    --admin-400:  #3B82F6;
    --admin-500:  #1E40AF;   /* لوحة الإدارة — أزرق */
    --admin-600:  #1D3A9E;
    --driver-50:  #FFF7ED;   /* لوحة السائق — خلفية دافئة */
    --driver-100: #FFF1E8;

    /* ألوان علامات خارجية — تبقى كما هي بحكم كونها ملكاً لغيرنا */
    --whatsapp-500: #25D366;

    /* بنفسجي وبنفسجي مزرق — يظهران في شارات ولوحات ثانوية */
    --violet-50:   #F5F3FF;
    --violet-100:  #EDE9FE;
    --violet-200:  #E9D5FF;
    --violet-300:  #A78BFA;
    --violet-500:  #7C3AED;
    --indigo-50:   #EEF2FF;
    --indigo-500:  #667EEA;
    --indigo-700:  #764BA2;

    /* ─────────────────────────────────────────────
       ٢ب) الحبري — خلفيات العرض الداكنة في الصفحة الرئيسية
       ───────────────────────────────────────────── */
    --ink-500:   #1C1C20;
    --ink-600:   #19191C;
    --ink-700:   #111113;
    --ink-800:   #101012;
    --ink-900:   #0D0D0F;

    /* ─────────────────────────────────────────────
       ٢ج) الليلي — أسطح داكنة مائلة للأزرق
       تستخدمها لوحة السائق الآن، وسيبني عليها
       الوضع الليلي العام في الخطوة ٦.
       ───────────────────────────────────────────── */
    --night-500: #2D2D5E;
    --night-600: #1E2535;
    --night-700: #1C2336;
    --night-800: #1A1A2E;
    --night-850: #161B25;
    --night-900: #0E1117;
    --night-950: #0D1B2E;
    --night-990: #0B1628;

    /* ─────────────────────────────────────────────
       ٣) الرمادي — سلّم واحد لكل المشروع
       ───────────────────────────────────────────── */
    --white:      #FFFFFF;
    --gray-50:    #F9FAFB;
    --gray-100:   #F3F4F6;
    --gray-200:   #E5E7EB;
    --gray-300:   #D1D5DB;
    --gray-400:   #9CA3AF;
    --gray-500:   #6B7280;
    --gray-600:   #4B5563;
    --gray-700:   #374151;
    --gray-800:   #1F2937;
    --gray-900:   #111827;

    /* ─────────────────────────────────────────────
       ٤) ألوان الحالات
       ───────────────────────────────────────────── */
    --success-50:   #ECFDF5;
    --success-100:  #D1FAE5;
    --success-200:  #A7F3D0;
    --success-300:  #6EE7B7;
    --success-400:  #34D399;
    --success-500:  #10B981;
    --success-700:  #059669;
    --success-900:  #065F46;

    --warning-50:   #FFFBEB;
    --warning-100:  #FEF3C7;
    --warning-400:  #FBBF24;
    --warning-500:  #F59E0B;
    --warning-600:  #D97706;
    --warning-700:  #B45309;
    --warning-800:  #92400E;
    --warning-900:  #78350F;

    --danger-50:    #FEF2F2;
    --danger-100:   #FEE2E2;
    --danger-200:   #FECACA;
    --danger-300:   #FCA5A5;
    --danger-400:   #F87171;
    --danger-500:   #EF4444;
    --danger-600:   #DC2626;
    --danger-700:   #B91C1C;
    --danger-800:   #991B1B;
    --danger-900:   #7F1D1D;
    --rose-50:      #FFF1F2;
    --rose-100:     #FFE4E6;
    --rose-700:     #BE123C;

    --info-50:      #EFF6FF;
    --info-100:     #DBEAFE;
    --info-300:     #93C5FD;
    --info-400:     #60A5FA;
    --info-500:     #3B82F6;
    --info-600:     #2563EB;
    --info-700:     #1D4ED8;

    /* سماوي — تُستخدمه لوحة الإدارة للمعلومات */
    --cyan-50:      #CFFAFE;
    --cyan-400:     #22D3EE;
    --cyan-500:     #0891B2;
    --cyan-600:     #06B6D4;

    /* ─────────────────────────────────────────────
       ٤ب) الكحلي — اللون الثانوي
       ───────────────────────────────────────────── */
    --navy-400:     #4A627A;
    --navy-500:     #3A5068;
    --navy-600:     #2E4053;
    --navy-700:     #1A2A3A;

    /* ─────────────────────────────────────────────
       ٥) الطبقة الدلالية
       هذه هي الطبقة التي سيُعيد الوضع الليلي تعريفها
       لاحقاً — لذلك استخدمها بدل الرمادي المباشر.
       ───────────────────────────────────────────── */
    --surface:    var(--white);
    --surface-2:  var(--gray-50);
    --surface-3:  var(--gray-100);
    --line:       var(--gray-200);
    --line-soft:  var(--gray-100);
    --line-strong: var(--gray-300);
    --text-1:     var(--gray-900);   /* عناوين */
    --text-strong: var(--gray-800);
    --text-body:  var(--gray-700);   /* نصّ المتن */
    --text-2:     var(--gray-600);   /* ثانوي */
    --text-3:     var(--gray-400);   /* خافت ومُرشِدات الإدخال */
    --text-on-brand: var(--white);   /* نصّ فوق سطح ملوّن أو داكن — أبيض في الوضعين */

    /* ─────────────────────────────────────────────
       ٦) الزوايا — سلّم واحد
       ───────────────────────────────────────────── */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  24px;
    --radius-3xl:  32px;
    --radius-full: 9999px;

    /* ─────────────────────────────────────────────
       ٧) الظلال — سلّم واحد، مبني على الرمادي لا الأسود
       ───────────────────────────────────────────── */
    --shadow-xs:    0 1px 2px rgba(17, 24, 39, 0.05);
    --shadow-sm:    0 1px 4px rgba(17, 24, 39, 0.06);
    --shadow-md:    0 4px 12px rgba(17, 24, 39, 0.08);
    --shadow-lg:    0 8px 24px rgba(17, 24, 39, 0.12);
    --shadow-xl:    0 18px 40px rgba(17, 24, 39, 0.14);
    --shadow-brand: 0 4px 16px var(--brand-a32);

    /* ─────────────────────────────────────────────
       ٨) المسافات — سلّم ٤px
       ───────────────────────────────────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;

    /* ─────────────────────────────────────────────
       ٩) التدرّجات
       ───────────────────────────────────────────── */
    --gradient-brand:   linear-gradient(135deg, var(--brand-500) 0%, var(--brand-400) 50%, var(--accent-peach) 100%);
    --gradient-hero:    linear-gradient(145deg, var(--brand-500) 0%, var(--accent-rose) 50%, var(--brand-500) 100%);
    --gradient-mart:    linear-gradient(135deg, var(--mart-500) 0%, var(--mart-400) 100%);
    --gradient-success: linear-gradient(135deg, var(--success-500) 0%, var(--success-400) 100%);
    --gradient-warning: linear-gradient(135deg, var(--warning-500) 0%, var(--warning-400) 100%);
    --gradient-danger:  linear-gradient(135deg, var(--danger-500) 0%, var(--danger-400) 100%);

    /* ─────────────────────────────────────────────
       ١٠) الخط والحركة
       ───────────────────────────────────────────── */
    --font-primary: 'Cairo', sans-serif;

    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ─────────────────────────────────────────────
       ١١) طبقات z
       بدل الأرقام العشوائية المنتشرة (99999 وغيرها)
       ───────────────────────────────────────────── */
    --z-sticky:  100;
    --z-header:  200;
    --z-nav:     300;
    --z-overlay: 400;
    --z-modal:   500;
    --z-toast:   600;
}

/* =====================================================
   احترام تفضيل تقليل الحركة على مستوى التوكِنز نفسها.
   بهذا تتوقف كل الانتقالات التي تستخدم var() دفعةً
   واحدة، بلا حاجة لتكرار القاعدة في كل ملف.
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast:   0ms;
        --transition-base:   0ms;
        --transition-slow:   0ms;
        --transition-bounce: 0ms;
    }
}