/* ══════════════════════════════════════════════════════════════════════
   tokens.css — نظام تصميم تحفة بصرية · المصدر الواحد
   ══════════════════════════════════════════════════════════════════════
   يُحمَّل **قبل** أنماط الصفحة في index.php و portfolio.php.

   لماذا وُجد (سبتمبر ٢٠٢٦):
     قياسٌ فعليّ للـCSS بعد استخراجه أظهر ٢٥ لوناً مختلفاً في ٣٥٦
     استعمالاً — منها **عشر درجات رمادي**. وكان هناك نظاما متغيّرات
     متوازيان لا يعرف أحدهما الآخر:
       site.css      : --primary-orange · --dark-gray · --medium-gray …
       portfolio.css : --orange · --dark-2 · --gray-1 … --gray-4
     الاسمان مختلفان والقيمة واحدة (#FF4E00 في كليهما). ومعظمهما غير
     مستعمل أصلاً: ٨ معرَّفة و٣ مستعملة في الأول، ١٧ و١١ في الثاني.
     و١٠٢ لون علامة مكتوب **خاماً** يتجاوز النظامين معاً.

   ⚠️ أسماء --vmp-* هي نفسها المستعملة في events/event.php — وهذا
      **مقصود لا تصادم**: تلك الصفحة تُعيد تعريف --vmp-orange من
      قاعدة البيانات لكل مناسبة على حدة. التوكن هو الافتراضي،
      والمناسبة تتجاوزه. وهكذا يُفترض أن يعمل نظام التصميم.

   🔑 لتغيير لون العلامة في الموقع كلّه: سطرٌ واحد أدناه.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    /* ─── العلامة ─────────────────────────────────────────────── */
    --vmp-orange:        #FF4E00;   /* الأساس — ٦٩ استعمالاً */
    --vmp-orange-light:  #FF7700;   /* التدرّج والتحويم — ٣٦ */
    --vmp-orange-alt:    #FF6600;   /* ظهر مرتين فقط — مرشّح للتوحيد */
    --vmp-orange-glow:   rgba(255, 78, 0, 0.35);

    --vmp-gradient:      linear-gradient(135deg, #FF4E00 0%, #ff7700 100%);
    --vmp-gradient-dark: linear-gradient(135deg, #000000 0%, #2a2a2a 100%);

    /* ─── الأرضيات (ثيم داكن) ──────────────────────────────────── */
    --vmp-black:     #000000;
    --vmp-dark:      #0A0A0A;
    --vmp-dark-2:    #111111;
    --vmp-dark-3:    #1A1A1A;
    --vmp-surface:   #141414;

    /* ─── السلّم المحايد ───────────────────────────────────────── */
    /* ✅ دُمجت ست درجات متقاربة في جاراتها (سبتمبر ٢٠٢٦): ١٤ درجة
       محايدة صارت ٨، و١٧ عنصراً تغيّر لونه تغيّراً طفيفاً (أقصى فرق
       إضاءة ١٧ من ٢٥٥ ≈ ٧٪). الاتجاه دائماً: الأقلّ استعمالاً يُدمج
       في الأكثر، فيقلّ عدد ما يتغيّر.
       🔑 وهذا عائد الترميز: الدمج كان سيحتاج ١٧ تعديلاً متفرّقاً في
          ملفين، فصار ست أسطر هنا — والتراجع بإرجاع القيم الأصلية
          المكتوبة في تعليق كل سطر. */
    /* مرتّب بالإضاءة من الأفتح. الرقم بجانب كلٍّ = عدد استعمالاته
       الفعلية في الموقع وقت الترميز — لا تخمين.
       ⚠️ الدرجات الموسومة «≈» متقاربة جداً مع جارتها ومرشّحة للدمج. */
    --vmp-white:     #FFFFFF;   /* ١٠٣ */
    --vmp-gray-50:   var(--vmp-white);      /* دُمج — كان #FAFAFA · ١ استعمال */
    --vmp-gray-200:  #CCCCCC;   /*  ١٢ */
    --vmp-gray-250:  var(--vmp-gray-200);   /* دُمج — كان #BBBBBB · ٢ */
    --vmp-gray-300:  #AAAAAA;   /*  ١٤ */
    --vmp-gray-400:  var(--vmp-gray-300);   /* دُمج — كان #999999 · ٧ */
    --vmp-gray-450:  #888888;   /*  ١١ */
    --vmp-gray-600:  #666666;   /*  ١٠ */
    --vmp-gray-650:  var(--vmp-gray-600);   /* دُمج — كان #555555 · ٣ */
    --vmp-gray-800:  #333333;   /*   ٦ */

    /* ─── الأرضيات الداكنة ─────────────────────────────────────── */
    --vmp-dark-3b:   #1A1A1A;   /*  ١٣ */
    --vmp-dark-2b:   var(--vmp-darkest);    /* دُمج — كان #111111 · ٣ */
    --vmp-darkest:   #0A0A0A;   /*   ٩ */
    --vmp-pure-black:#000000;   /*  ٢٧ */

    /* ─── كريمي (خلفيات دافئة) ─────────────────────────────────── */
    --vmp-cream:     #F5F0E8;   /*   ٢ */
    --vmp-cream-2:   #E8E2D5;   /*   ٢ */
    --vmp-cream-3:   var(--vmp-cream-2);    /* دُمج — كان #EBE4D6 · ١ */

    /* ─── منصّات خارجية ────────────────────────────────────────── */
    --wa-green:      #25D366;
    --wa-green-dark: #128C7E;

    /* ─── الهندسة والحركة ──────────────────────────────────────── */
    --vmp-radius:     16px;
    --vmp-radius-sm:  10px;
    --vmp-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --vmp-shadow:     0 8px 32px rgba(0, 0, 0, 0.4);
}