/* ══════════════════════════════════════════════════════════
   LIC — الرموز التصميمية (Design Tokens)

   ⚠️ **ألوانُ الهويّة هنا الأصلُ المحايد**  (UP-11 · المرحلة 3b). كانت لوحةَ
   المنتدى (ذهبيُّ LCO · كحليُّ NISSA · أحمرُ LIC)، فيرثها كلُّ موقعٍ يُنتَج.
   وألوانُ الحدث **شكلٌ** في assets/css/themes/<name>.css يُحمَّل بعد هذا الملفّ
   (`THEMES` في inc/brand.php) — وألوانُ LIC بقيمها المضبوطة يدوياً في themes/lic.css.
   والمتغيِّراتُ بأسمائها الداخليّة كما هي (--lic-gold …): الدورُ في اسم الخانة
   باللوحة (primary · danger · highlight · accent)، والورقةُ لا يراها أحد.
   ══════════════════════════════════════════════════════════ */

:root {
  /* عناصر النظام — قائمة ‎<select>‎ المنبثقة وأشرطة التمرير ومنتقي
     التاريخ والإكمال التلقائي — يرسمها المتصفِّح لا أنماطنا، وبلا هذا
     السطر يرسمها فاتحةً فوق لوحة داكنة. سطرٌ واحد يقلبها كلَّها. */
  color-scheme: dark;

  /* ── الهوية — الأصلُ المحايد (UP-11) ─────────── */
  /* القيمُ من `brandDerive()` لأصول الخانات في inc/brand.php، وكلُّها اجتازت
     فحصَ التباين: 3:1 للواجهة على الخلفيّتين و4.5:1 للحبر فوق اللون. */
  --lic-red:      #dc2626;   /* الخانة: البيان — الحالاتُ و«اختيارك» ورسائلُ الخطأ */
  --lic-red-lt:   #e97575;
  --nissa-navy:   #0e7490;   /* الخانة: المميَّز */
  --nissa-navy-lt:#16b7e4;
  --ly-green:     #078542;
  --accent:       #f59e0b;   /* الخانة: التمييز */
  --grid-yellow:  #ffe300;

  /* الخانة: الأساسيّ — لون كل ما يُنقر في الواجهة: الأزرار وشريط التقدُّم والتركيز. */
  --lic-gold:     #4f46e5;
  --lic-gold-lt:  #9c96f0;   /* للخلفية الداكنة */
  --lic-gold-dk:  #221ab6;   /* للخلفية الفاتحة */
  --gold-ink:     #17110a;   /* حبرٌ فوق النظير الفاتح في الوضع الداكن */

  /* ── الوضع الداكن (الافتراضي) ──────────────── */
  --bg:           #080d1c;
  --bg-2:         #0d1428;
  --bg-3:         #121b33;
  --surface:      rgba(255 255 255 / .045);
  --surface-2:    rgba(255 255 255 / .075);
  --line:         rgba(255 255 255 / .10);
  --line-2:       rgba(255 255 255 / .18);

  --text:         #eef1f8;
  --text-2:       #b3bcd2;
  --text-3:       #7c88a5;

  --brand:        var(--lic-gold-lt);
  --brand-ink:    var(--gold-ink);

  /* حالات الأجنحة */
  --st-available: #2aa876;
  --st-held:      #d99a1e;
  --st-reserved:  #7a8296;
  /* «اختيارك» يبقى أحمر: الذهبي هنا يلتبس بـ st-held العنبري على الرسم */
  --st-selected:  var(--lic-red-lt);

  /* ── الطباعة ──────────────────────────────── */
  --font-ar: 'Cairo', system-ui, 'Segoe UI', sans-serif;
  --font-en: 'Space Grotesk', system-ui, 'Segoe UI', sans-serif;
  --font:    var(--font-ar);
  --font-num:'Space Grotesk', ui-monospace, monospace;

  --fs-xs:   clamp(.75rem,  .72rem + .15vw, .82rem);
  --fs-sm:   clamp(.85rem,  .82rem + .2vw,  .95rem);
  --fs-base: clamp(.95rem,  .92rem + .25vw, 1.06rem);
  --fs-lg:   clamp(1.08rem, 1rem   + .4vw,  1.28rem);
  --fs-xl:   clamp(1.3rem,  1.15rem + .8vw, 1.75rem);
  --fs-2xl:  clamp(1.6rem,  1.3rem + 1.6vw, 2.6rem);
  --fs-3xl:  clamp(2rem,    1.5rem + 2.8vw, 4rem);

  --lh-tight: 1.2;
  --lh:       1.75;

  /* ── المسافات ─────────────────────────────── */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
  --sp-4: 1rem;    --sp-5: 1.5rem;  --sp-6: 2rem;
  --sp-7: 3rem;    --sp-8: 4rem;    --sp-9: 6rem;

  --shell:        1240px;
  --shell-narrow: 860px;
  --shell-wide:   1440px;        /* نطاق «واسع» — أوسع من الافتراضي دون ملء */
  --gutter:       clamp(1rem, 4vw, 2.5rem);
  --section-y:    clamp(3.5rem, 8vw, 7rem);
  --header-h:     88px;          /* يتَّسع لشعار يحمل الاسم في الترويسة */

  /* أدنى عرضٍ للبطاقة — أربع درجاتٍ بدل سبعة أعدادٍ متفرِّقة.
     كانت في main.css سبع قيم (280·260·240·238·230·220·180) لفكرةٍ
     واحدة، فكانت البطاقات تنكسر عند سبعة عروضٍ للشاشة والصفحة
     تتفكَّك تدريجياً لا دفعةً واحدة. */
  --col-xs: 180px;   /* الإحصاءات وشعارات الشركاء */
  --col-sm: 220px;   /* بطاقةٌ مضغوطة */
  --col:    260px;   /* البطاقة المعيارية */
  --col-lg: 320px;   /* بطاقةٌ بصورة */

  /* ── الأشكال ──────────────────────────────── */
  --r-sm: 8px;  --r: 14px;  --r-lg: 22px;  --r-pill: 999px;

  --sh-1: 0 1px 2px rgb(0 0 0 / .3);
  --sh-2: 0 6px 20px -6px rgb(0 0 0 / .45);
  --sh-3: 0 20px 50px -14px rgb(0 0 0 / .6);
  --sh-glow: 0 0 0 1px var(--line), 0 18px 46px -16px rgb(0 0 0 / .7);

  /* ── الحركة ───────────────────────────────── */
  --t-fast: .16s;
  --t:      .28s;
  --t-slow: .5s;
  --ease:   cubic-bezier(.22, .61, .36, 1);
}

/* ── الوضع الفاتح ───────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #f6f7fb;
  --bg-2:      #ffffff;
  --bg-3:      #eef1f7;
  --surface:   rgba(9 14 30 / .035);
  --surface-2: rgba(9 14 30 / .06);
  --line:      rgba(9 14 30 / .10);
  --line-2:    rgba(9 14 30 / .18);

  --text:      #101728;
  --text-2:    #46516b;
  --text-3:    #6e7994;

  --brand:     var(--lic-gold-dk);
  /* الحبر فوق الذهب ينقلب مع انقلاب الذهب: النواة الفاتحة تحتاج حبراً
     داكناً، والذهب الداكن (‎#8a6410‎) يحتاج أبيض. تركُ الحبر الداكن على
     كليهما يعطي ‎3.5:1‎ — دون حدّ القراءة لنصّ صغير، وهو حال كل زرّ
     أساسي في اللوحة بالوضع الفاتح. مع الأبيض يصير ‎5.4:1‎. */
  --brand-ink: #ffffff;
  --st-reserved:#9aa1b2;

  --sh-1: 0 1px 2px rgb(16 23 40 / .07);
  --sh-2: 0 6px 20px -8px rgb(16 23 40 / .16);
  --sh-3: 0 20px 50px -18px rgb(16 23 40 / .22);
  --sh-glow: 0 0 0 1px var(--line), 0 16px 40px -18px rgb(16 23 40 / .28);
}

/* احترام تفضيل النظام حين لا يوجد اختيار صريح */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:        #f6f7fb;
    --bg-2:      #ffffff;
    --bg-3:      #eef1f7;
    --surface:   rgba(9 14 30 / .035);
    --surface-2: rgba(9 14 30 / .06);
    --line:      rgba(9 14 30 / .10);
    --line-2:    rgba(9 14 30 / .18);
    --text:      #101728;
    --text-2:    #46516b;
    --text-3:    #6e7994;
    --brand:     var(--lic-gold-dk);
    --brand-ink: #ffffff;
    --st-reserved:#9aa1b2;
    --sh-1: 0 1px 2px rgb(16 23 40 / .07);
    --sh-2: 0 6px 20px -8px rgb(16 23 40 / .16);
    --sh-3: 0 20px 50px -18px rgb(16 23 40 / .22);
    --sh-glow: 0 0 0 1px var(--line), 0 16px 40px -18px rgb(16 23 40 / .28);
  }
}

/* الخط بحسب اللغة */
html[lang="en"] { --font: var(--font-en); }

/* الاتجاه — قيم منطقية تُغني عن قلب القواعد يدوياً */
[dir="rtl"] { --start: right; --end: left; }
[dir="ltr"] { --start: left;  --end: right; }