/* ==========================================================================
   طيف (tayf) — نظام التصميم (Design Tokens)
   ==========================================================================
   كل الألوان والخطوط والمسافات المستخدمة في الموقع معرّفة هنا كمتغيرات CSS.
   الفكرة: لو المبرمج أو المصمم احتاج يغيّر اللون الأساسي أو الخط، يغيّره من
   مكان واحد بس هنا، وينعكس التغيير على كل صفحات الموقع تلقائيًا.

   مصدر اللون الذهبي: تم استخراجه مباشرة من ملف الشعار الرسمي
   (assets/logo/tayf-logo-source.svg) بالكود اللوني #F8CB25.
   ========================================================================== */

:root {
  /* -------------------- الهوية / الألوان الأساسية -------------------- */
  --color-primary: #f8cb25; /* الذهبي — لون الشعار الأساسي */
  --color-primary-600: #dcae0a; /* درجة أغمق — تُستخدم في hover/active */
  --color-primary-700: #b78d04; /* أغمق للنصوص فوق خلفية فاتحة (تباين أفضل) */
  --color-primary-100: #fdf3d2; /* خلفية فاتحة جدًا لشارات/تمييز بسيط */

  /* اللون الأزرق — خلفية قسم الـ Hero (نفس لون خلفية صورة محاكاة الجوال assets/logo/tayf-mobile.png
     حتى تندمج الصورة مع خلفية القسم بدون أي حدود ظاهرة) */
  --color-brand-blue: #3164f5;

  /* -------------------- الخلفيات الداكنة (Hero / الأقسام الغامقة / الفوتر) -------------------- */
  --color-ink-900: #0e0e14; /* الأغمق — الفوتر */
  --color-ink-800: #14141c; /* الأساسي — خلفية الهيدر/الأقسام الداكنة */
  --color-ink-700: #1e2029; /* خلفية بطاقات فوق قسم داكن */
  --color-ink-600: #2a2c38; /* حدود/فواصل فوق خلفية داكنة */

  /* -------------------- الحياد (نصوص وخلفيات فاتحة) -------------------- */
  --color-white: #ffffff;
  --color-gray-900: #333333; /* نص أساسي */
  --color-gray-700: #55565c;
  --color-gray-500: #afafaf; /* نص ثانوي / وصفي */
  --color-gray-300: #e0e0e0; /* حدود */
  --color-gray-100: #f4f4f4; /* خلفية بديلة فاتحة (بدل الأبيض) */
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fb;

  /* -------------------- ألوان دلالية -------------------- */
  --color-success: #2fae60;
  --color-danger: #e11a2c;
  --color-warning: #f59e0b; /* برتقالي — حالات "قيد الانتظار/التحضير" بلوحات التحكم */
  --color-info: #0ea5b0; /* تركوازي — حالات إعلامية محايدة بلوحات التحكم */

  /* -------------------- الخطوط -------------------- */
  --font-primary: "Tajawal", "Tahoma", "Arial", sans-serif;

  /* -------------------- المسافات (Spacing Scale) -------------------- */
  --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: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(20, 20, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 20, 28, 0.1);
  --shadow-lg: 0 20px 48px rgba(20, 20, 28, 0.16);
  --shadow-gold: 0 12px 28px rgba(248, 203, 37, 0.35);

  /* -------------------- التخطيط -------------------- */
  --container-width: 1200px;
  --header-height: 76px;

  /* -------------------- الانتقالات -------------------- */
  --transition-fast: 0.18s ease;
  --transition-base: 0.28s ease;
}