/* ═══════════════════════════════════════════════════════════════════════════
   🎨 رموز نظام تصميم MKW — الأصل الواحد
   D:\Web Apps\_shared\design-system\tokens.css
   ═══════════════════════════════════════════════════════════════════════════

   ⛔ **ما ليس هنا عمدًا: ألوان الهوية.** لكل تطبيق لونه (ذهبيّ جرام فلو ·
   أخضر مسلم كاش · تيل فرصة · …) وهو **فرقٌ مقصود لا انحراف**. الرموز هنا
   **بنيويّة** — مقاسات وطبقات وإيقاع — وهي وحدها ما ثبت أنه يتباعد حين يُنقل
   يدويًّا أربع مرّات (جرد البار 2026-08-01: مقاس 18 عند واحد و16 عند ثلاثة،
   ومربّعات دائمة عند اثنين وعند التحويم عند اثنين).

   🔌 **التبنّي:** استورده قبل أنماطك، ثم **استعمل المتغيّر لا الرقم**:
       @import './ds-tokens.css';          ← أوّل `index.css` / `globals.css`
       .bar-icon-btn { width: var(--ds-bar-btn); height: var(--ds-bar-btn); }
   وفي `Tailwind` يكفي `w-[var(--ds-bar-btn)]` أو توسعةٌ في `theme`.

   ⚠️ **ولا يُعدَّل في مستودع تطبيق**: هذا ملفٌّ **مُوزَّع** — يُعدَّل في
   `_shared` ثم `sync.ps1 -Apply`. تعديلٌ محلّيّ يُدهَس في التوزيع التالي.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── ① البار العلويّ ────────────────────────────────────────────────────
     الصندوق ثابت والأيقونة داخله متغيّرة الرسم: حشوٌ يتبع رسم الأيقونة
     (`p-1`) يجعل أيقونةً بحرفين (`Aa`) أعرض من جارتها ⇒ **صفٌّ غير منتظم
     المراكز**. المربّع الثابت يوحّد المراكز أفقيًّا وعموديًّا. */
  --ds-bar-btn: 28px;        /* صندوق كل أيقونة في البار */
  --ds-bar-icon: 16px;       /* أيقونات التفضيلات: عين · لغة · وضع · حجم خطّ */
  --ds-bar-nav-icon: 18px;   /* البيت والرجوع وحدهما — أثقل لأنهما المخرج */
  --ds-bar-gap: 4px;         /* بين أيقونات التفضيلات */
  --ds-bar-gap-nav: 6px;     /* داخل مجموعة التنقّل (بيت + رجوع + الحسابات) */
  --ds-bar-pad-x: 8px;
  --ds-bar-pad-y: 6px;
  --ds-bar-radius: 8px;
  --ds-bar-brand-icon: 20px; /* شعار العلامة في وسط البار */

  /* هدف اللمس خارج البار (أزرار الإغلاق في المودالات وأزرار الشاشة).
     🔑 و**لا يُقاس عليه البار**: 44 هناك صحيحٌ وهنا يكسر الصفّ. */
  --ds-tap-min: 44px;

  /* ── ② الطبقات (z-index) ───────────────────────────────────────────────
     سُلّمٌ واحد يمنع «بارٌ يختفي تحت بار». الأعلى رقمًا هو الأعلى بصريًّا. */
  --ds-z-topbar: 30;   /* الهيدر الملتصق */
  --ds-z-systembar: 40; /* بار التحديث وبار الإشعارات */
  --ds-z-install: 50;  /* بار التثبيت — يعلوها لأنه نداءٌ لمرّةٍ واحدة */
  --ds-z-modal: 60;

  /* ── ③ حجم الخطّ — قائمة مغلقة ──────────────────────────────────────────
     ثلاث مراحل بلا رابعة: 1.2 يكفي لأصغر خطّ عندنا (9px ⇒ ~11px)، وما بعدها
     يبدأ التفاف الصفوف الكثيفة. والتكبير **متناسب** (‏`zoom`) فيكبر النصّ
     والأيقونة والصندوق معًا ولا ينهار صفّ.
     🔴 والقيمة المحرَّفة في التخزين تُقعِد التطبيق بلا رجعةٍ ظاهرة — فالقائمة
     تُقرأ في موضعين (الزرّ + المُطبِّق قبل الرسم) وتُحرَس باختبار. */
  --ds-zoom-1: 1;
  --ds-zoom-2: 1.1;
  --ds-zoom-3: 1.2;
  --app-zoom: 1; /* الحيّ — يكتبه المُطبِّق المبكّر قبل أوّل رسم */

  /* ── ④ البارات الثلاثة فوق الهيدر ──────────────────────────────────────
     ثوابتٌ في كل تطبيق (أمر محمد 2026-08-01). التفاصيل في `shell-contract.md`.

     📌 والحشو **8px بقرار محمد 2026-08-02** بعد جردٍ عبر الأربعة: كُتب هنا
     `6px` أوّلَ يومٍ، ثم تبيّن أن **الأربعة كلَّها على 8** (‏`py-2` في جرام فلو
     ومسلم كاش، و`padding: 0.5rem 0.75rem` في حصة وفرصة) ⇒ **الأصل هو الشاذّ
     لا هُم**. والقاعدة الحاكمة: *ما يثبت أنه تباعد في أكثر من تطبيق يصعد
     للأصل* — وهنا لم يتباعد شيء، بل **انفرد الأصل بما لم يُقَس**. */
  --ds-sysbar-pad-y: 8px;
  --ds-sysbar-font: 11px;
  --ds-sysbar-icon: 13px;
  --ds-install-icon: 18px;

  /* ── ⑤ إيقاع الصفحة ────────────────────────────────────────────────────
     عرضُ المحتوى ثلاث درجات: نموذجٌ ضيّق · صفحة عضو · جدول أدمن. */
  --ds-page-md: 28rem;
  --ds-page-2xl: 42rem;
  --ds-page-3xl: 48rem;
  --ds-page-pad-x: 14px;
}