/* =========================================================
   كيان الإمداد — متغيرات التصميم (Design Tokens)
   كل الألوان والخطوط والمقاسات تُعدَّل من هنا فقط.
   ========================================================= */

:root {
  /* الألوان الأساسية */
  --navy: #0f2c4a;          /* كحلي الزي — النصوص والخلفيات الداكنة */
  --navy-soft: #1f4266;     /* كحلي أفتح للحدود على الخلفيات الداكنة */
  --gold: #c9994e;          /* ذهبي الشعار — أزرار الإجراء الرئيسية والتحديد */
  --gold-light: #e9c57f;    /* لمعة الذهبي — للتحويم وعلى الكحلي */
  --gold-deep: #8a5f22;     /* برونزي — للنص الذهبي فوق الخلفيات الفاتحة */
  --gold-tint: #fbf4e7;     /* خلفية الأيقونات والخيار المحدد */
  --tile: #f6f9fb;          /* أبيض البلاط — خلفية الصفحة */
  --white: #ffffff;
  --grout: #dce6ec;         /* لون فواصل البلاط — الحدود والخطوط */
  --grout-strong: #b9c9d4;  /* حدود عند التحويم */
  --slate: #4a5e72;         /* نص ثانوي */
  --muted: #7b8c9c;         /* نص الخيارات غير المتاحة */
  --on-dark: #c5d2de;       /* نص ثانوي فوق الكحلي */
  --haze: #c4bcac;          /* غبار الافتتاحية قبل المسح */

  /* ألوان الحالة */
  --focus: #1b6db5;
  --danger: #b42318;
  --success: #1e7a4c;
  --whatsapp: #117f41;      /* أغمق من أخضر واتساب ليقرأ النص الأبيض فوقه بوضوح */
  --whatsapp-hover: #0d6b36;

  /* الخط: عائلة واحدة للموقع كله */
  --font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;

  /* السماكات: 400 للنصوص، 600 للأزرار والتسميات، 700 للعناوين والأرقام */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* سلّم الأحجام */
  --fs-xs: 0.8125rem;                                   /* 13px  شارات وتسميات صغيرة */
  --fs-sm: 0.875rem;                                    /* 14px  نص مساعد */
  --fs-base: 1rem;                                      /* 16px  النص الأساسي */
  --fs-md: 1.125rem;                                    /* 18px  عناوين البطاقات */
  --fs-lg: 1.25rem;                                     /* 20px  عناوين فرعية */
  --fs-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);   /* عناوين المجموعات */
  --fs-2xl: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);    /* عناوين الأقسام */
  --fs-3xl: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);    /* عنوان الرئيسية */

  --lh-heading: 1.45;
  --lh-body: 1.8;

  /* الأيقونات: كلها خطية بمربع 24، بسماكة واحدة ومقاسات ثلاثة */
  --icon-stroke: 1.75;
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --badge-size: 2.75rem;    /* المربع الذي يحمل الأيقونة في البطاقات */
  --badge-size-sm: 2.25rem;

  /* المسافات */
  --gutter: 16px;
  --container: 1200px;
  --section-space: clamp(4rem, 3rem + 5vw, 7rem);
  --tile-size: 64px;

  /* الحواف: البلاط حاد، العناصر التفاعلية أنعم */
  --radius-tile: 3px;
  --radius-control: 10px;
  --radius-card: 14px;

  --shadow-card: 0 1px 2px rgb(15 44 74 / 0.05), 0 16px 36px -22px rgb(15 44 74 / 0.32);

  --header-height: 76px;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 32px; --tile-size: 72px; }
}