/* =========================================================
   وقف تبجيل — variables.css
   جميع رموز التصميم (Design Tokens) في مكان واحد.
   عدّل القيم هنا فقط لتغيير الهوية البصرية للموقع كاملاً.
   ========================================================= */

:root{

  /* ===== ألوان الهوية (معايَنة بدقة بكسل من الشعار الرسمي) ===== */
  --color-primary:#213f96;        /* أزرق ملكي — اللون الأساسي */
  --color-primary-light:#7391ca;  /* أزرق فاتح — تمييز وحدود */
  --color-primary-dark:#1b3078;   /* أزرق أغمق — تدرجات */
  --color-dark:#0f1131;           /* كحلي غامق — خلفيات داكنة ونصوص أساسية */
  --color-dark-soft:#1b1b45;      /* كحلي أفتح قليلاً — تدرجات */
  --color-white:#ffffff;
  --color-paper:#f8f9fc;          /* خلفية فاتحة عامة */
  --color-paper-alt:#eef1fa;      /* خلفية فاتحة بديلة للأقسام المتناوبة */
  --color-text:#0d1526;           /* لون النص الأساسي */
  --color-text-soft:#4c5570;      /* لون النص الثانوي */
  --color-text-faint:#828aa0;     /* لون النص الخافت (تلميحات) */
  --color-line: rgba(15,17,49,.09); /* لون الحدود الخفيفة */

  /* ===== الخطوط ===== */
  --font-display:'Cairo', sans-serif;         /* العناوين */
  --font-body:'IBM Plex Sans Arabic', sans-serif; /* النصوص */
  --font-utility:'Tajawal', sans-serif;       /* الأرقام والتفاصيل والأزرار */

  /* أحجام الخطوط — تتدرج تلقائيًا بين الجوال والكمبيوتر عبر clamp() */
  --fs-h1: clamp(28px, 6vw, 54px);
  --fs-h2: clamp(24px, 4.5vw, 38px);
  --fs-h3: clamp(17px, 3vw, 19px);
  --fs-body: 15.5px;
  --fs-body-lg: clamp(15px, 2.2vw, 17.5px);
  --fs-sm: 13.5px;
  --fs-xs: 12px;

  /* ===== المسافات (Spacing Scale) ===== */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;

  /* ===== الحواف الدائرية ===== */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* ===== الحاويات ===== */
  --container-width: 1200px;
  --container-padding: 20px;

  /* ===== الظلال ===== */
  --shadow-sm: 0 2px 10px -4px rgba(15,17,49,.10);
  --shadow-md: 0 14px 34px -14px rgba(15,17,49,.22);
  --shadow-lg: 0 20px 46px -18px rgba(15,17,49,.45);

  /* ===== الحركة ===== */
  --ease: cubic-bezier(.22,.61,.36,1);
  --transition-fast: .25s var(--ease);
  --transition-base: .35s var(--ease);

  /* ===== أهداف اللمس (Touch Targets) ===== */
  --touch-target-min: 44px;

  /* =========================================================
     نقاط الكسر (Breakpoints) — للرجوع إليها في التعليقات فقط.
     القيم الفعلية مطبَّقة داخل responsive.css عبر min-width
     (منهجية Mobile First: القاعدة مبنية للجوال، ثم تتوسّع).
     --bp-sm: 480px   (جوال كبير)
     --bp-md: 768px   (تابلت)
     --bp-lg: 1024px  (تابلت أفقي / كمبيوتر صغير)
     --bp-xl: 1280px  (كمبيوتر)
     ========================================================= */
}