/* ══════════════════════════════════════════════════════════════
   عقد المتغيّرات — كل قسم بالمكتبة بيشير لهاي الأسماء وبس.
   🔴 القاعدة: ولا لون hex واحد جوّا ملف قسم. اللون بيعيش هون.
   موقع جديد = ملف ثيم جديد بيبدّل القيم، والأقسام ما بتنلمس.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* ── الأسطح والنص ── */
  --bg:#1B2A4A;            /* خلفية الصفحة */
  --bg-2:#16233E;          /* خلفية بديلة لأقسام متناوبة */
  --surface:rgba(255,255,255,.05);  /* أسطح مرفوعة (كروت، كبسولات) */
  --fg:#E8EDF7;            /* نص أساسي */
  --muted:#A9B6CE;         /* نص ثانوي */
  --line:rgba(232,237,247,.14);     /* حدود محايدة */
  --header-bg:rgba(27,42,74,.72);   /* خلفية الهيدر (شفافة — بتشتغل مع blur) */
  --scrim:rgba(15,24,48,.52);       /* تعتيم فوق الصور العريضة */
  /* نفس لون `--scrim` بس **قنواته مفكوكة** — لازمة للتدرّجات اللي بدها
     أكتر من شفافية بنفس اللون (`rgb(var(--scrim-rgb)/.6)`).
     🔴 معرَّف هون **وبكل ثيم**: `var()` لمتغيّر غير موجود بتلغي التصريح
     كله ⇒ تدرّج التعتيم بيختفي والنص فوق الفيديو بيصير غير مقروء. */
  --scrim-rgb:15 24 48;
  --on-scrim:#FFFFFF;               /* نص فوق التعتيم — يُفحص تباينه لكل ثيم */
  --on-scrim-rgb:255 255 255;       /* قنواته مفكوكة — لنص ثانوي مخفَّف فوق التعتيم */

  /* ── لون التمييز ── */
  --accent:#E8632A;
  --accent-lite:#F5915E;
  --on-accent:#0F1830;              /* نص فوق التمييز — يُفحص تباينه لكل ثيم */
  --accent-dim:rgba(232,99,42,.14);  /* تعبئة الحالة الفعّالة */
  --accent-soft:rgba(232,99,42,.08); /* تعبئة hover */
  --accent-line:rgba(232,99,42,.34); /* حدّ ملوّن */

  /* ── الخطوط ── */
  --ar:"Cairo",system-ui,sans-serif;          /* الخط العربي */
  --lat:"Space Grotesk","Cairo",sans-serif;   /* اللاتيني/الأرقام */

  /* ── الإيقاع (ثابت بالمكتبة، نادراً بيتغيّر بالثيم) ── */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-6:48px; --s-8:64px;
  --r:14px;                /* استدارة الحواف — جزء من شخصية البراند */
  --nav-h:68px;

  /* ── الظلال ── لون، فبتعيش هون لا بملف القسم (نفس قاعدة الـhex) */
  --shadow-1:0 6px 18px rgba(0,0,0,.34);    /* كبسولة/كرت مرفوع */
  --shadow-2:0 10px 26px rgba(0,0,0,.40);   /* زر عائم */
  --shadow-3:0 22px 54px rgba(0,0,0,.30);   /* صورة كبيرة مرفوعة — واسع وخفيف */
}

/* ── أساسيات مشتركة لكل الأقسام ── */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--ar);
     font-size:16.5px;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,a[href]{cursor:pointer}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--s-3)}
:focus-visible{outline:3px solid var(--accent-lite);outline-offset:3px;border-radius:6px}
.lat{font-family:var(--lat)}