/* =================================================================
   MAS TAPE — Design Tokens (مصدر الحقيقة البصري الوحيد)
   مطابق لـ DESIGN.md — أي تعديل يحدث في الملفين معاً
   ================================================================= */

:root {

  /* ─── الألوان — من الشعار الأصلي ─── */
  --navy:        #0E1524;   /* الكحلي الأساسي — navbar، footer، خلفيات داكنة */
  --red:         #A01A17;   /* الأحمر — CTA، badges، تمييز */
  --off-white:   #FAF8F7;   /* الأبيض الدافئ — نصوص على داكن، خلفيات فاتحة */

  /* تدرّجات الكحلي */
  --navy-900:    #0B1019;
  --navy-800:    #0E1524;   /* الأساسي */
  --navy-700:    #1A2438;
  --navy-600:    #28354F;

  /* تدرّجات الأحمر */
  --red-800:     #7D1411;
  --red-700:     #A01A17;   /* الأساسي */
  --red-600:     #C02420;
  --red-500:     #D6433F;

  /* المحايدات */
  --gray-50:     #FAF8F7;
  --gray-100:    #F1EEED;
  --gray-200:    #DEDAD8;
  --gray-400:    #9A9290;
  --gray-600:    #5C5654;
  --ink:         #1A1614;

  /* دلالية */
  --success:     #1F8A4C;
  --warning:     #C9821A;
  --danger:      #A01A17;

  /* ─── التباعد (سلّم 4px) ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ─── أنصاف الأقطار ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-full: 999px;

  /* ─── الظلال ─── */
  --shadow-sm:  0 1px 3px rgba(14, 21, 36, .08);
  --shadow-md:  0 4px 16px rgba(14, 21, 36, .10);
  --shadow-lg:  0 12px 40px rgba(14, 21, 36, .16);
  --shadow-red: 0 6px 24px rgba(160, 26, 23, .28);

  /* ─── الطباعة — العائلات ─── */
  --font-head-en:  'Barlow Condensed', sans-serif;
  --font-body-en:  'Barlow', sans-serif;
  --font-head-ar:  'Tajawal', sans-serif;
  --font-body-ar:  'Cairo', sans-serif;

  /* سلّم الأحجام */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;
  --fs-4xl:   48px;
  --fs-hero:  clamp(40px, 6vw, 72px);

  /* الأوزان */
  --fw-body:     400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     800;
  --fw-black:    900;

  /* ارتفاع السطر */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;

  /* ─── الحركة ─── */
  --t-fast:   150ms;
  --t-normal: 300ms;
  --t-slow:   600ms;
  --ease-in:  cubic-bezier(.22, .61, .36, 1);

  /* ─── الـ navbar ─── */
  --nav-height: 68px;
}