@qumra/fanar 0.0.0

package/dist/tokens.css

@@ -0,0 +1,658 @@
+/* ============================================================================
+   توكنز قمرة — تنزل في أي app بـ@import "@qumra/manara/tokens.css"
+   منقولة من v2 — منقولة حرفياً من Qumra Web App v2.dc.html (سطر 16-17).
+   دي مش إعادة تفسير: نفس الأسماء ونفس القيم، عشان أي مقارنة مع الملف
+   الأصلي تطلع مطابقة مش "قريبة".
+   ========================================================================== */
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme static {
+  --font-sans: "Alexandria", system-ui, sans-serif;
+
+  /* الأسطح والنصوص — بتتقلب في الوضع الداكن (تحت) */
+  --color-surface: #ffffff;
+  --color-bg: #f7f9f9;
+  --color-line: #edf1f1;
+  --color-hover: #f2f6f6;
+  --color-ink: #020809;
+  --color-ink2: #3d4545;
+  /* سلّم النص: 20.2 / 9.8 / 5.6 / 4.9 — أربع درجات كلها فوق 4.5:1.
+     muted2 كان #a5b0b0 = 2.23:1، يعني تسميات الرسوم والنص البديل
+     مكانوش بيتقروا. مفيش مساحة لدرجة خامسة تحت — العتبة بتقفل السلّم. */
+  --color-muted: #5f6a6a;
+  --color-muted2: #687373;
+  /* حدّ عناصر التحكّم — لازم 3:1 (المعيار 1.4.11). كان #d9e0e0 = 1.34:1،
+     يعني الشيك بوكس الفاضي مكانش ليه أي وجود بصري. الكروت والفواصل
+     بتستخدم --color-line فمتأثرتش. */
+  --color-border: #7f8c8c;
+  --color-soft: #eaf2f3;
+  --color-soft2: #dceded;
+  --color-brand-ink: #0f4a4e;
+
+  /* ── تعبئة هيكل التحميل ────────────────────────────────────────────────
+     العصا اللي بتقف مكان النصّ لحدّ ما يوصل.
+
+     كانت `--color-hover`، وهو **لون حالة مرور** لا تعبئة — وعلى السطح
+     بيدّي 1.09:1 في الفاتح و1.14:1 في الداكن. فرق زي ده مايتشافش.
+     النتيجة كانت هيكل موجود في الـDOM وغايب عن العين.
+
+     والمدى ضيّق من الطرفين: تحت 1.2 مايتقريش، وفوق 1.6 بيتقري **محتوى**
+     لا انتظاراً — بلوك رمادي صريح بيبان كأنه صورة أو صندوق فاضي، فالعين
+     بتستنّى منه معنى بدل ما تعدّي عليه. القيم مقيسة على السطح:
+
+       فاتح  #d6dcdc على #ffffff = 1.39  ·  1.26 عند حضيض النبض
+       داكن  #2c3232 على #101718 = 1.39  ·  1.24 عند حضيض النبض
+
+     والرقمان متساويان عن قصد: الهيكل لازم يبان بنفس القوة في الوضعين،
+     وإلا الشاشة الواحدة بتتقري «بتحمّل» في وضع و«فاضية» في التاني.
+
+     ── وليه توكن مستقلّ لا `soft2` ────────────────────────────────────────
+     `soft2` مسحته تركوازي — هو سطح العلامة الناعم. الهيكل بيه بياخد لون
+     هوية، وهو المفروض **حياد**: مساحة محجوزة لا عنصر له معنى. ده رمادي
+     مائل للبرودة (R أقلّ من G وB بستّ درجات) فيتناغم مع اللوحة بلا ما
+     ينتمي لها. */
+  --color-skeleton: #d6dcdc;
+
+  /* ألوان ثابتة مكتوبة صراحةً في v2 (مش متغيّرة مع الثيم) */
+  --color-brand: #207982;
+  --color-brand-hover: #1a646c;
+  --color-brand-100: #a5c9cc;
+  --color-brand-900: #0a2528;
+  --color-brand-deep: #0b3b3e;
+  /* خلفية فاتحة بمسحة تركوازي — لوحات العرض وحالة المرور على الكروت
+     الكبيرة. كانت #F4FAF8 مكتوبة بالإيد في شاشات الحسابات. */
+  --color-tint: #f4faf8;
+  /* درجة أعمق شوية — أرضية كروت التسويق في صفحة الهبوط. `tint` أرضية
+     القسم كله و`tint2` الكرت اللي جوّه، فالكرت يبان عليها. كانت
+     #EFF6F3 مكتوبة بالإيد ١٢ مرة في `Qumra Landing.dc.html`.
+     زي `tint` مالهاش قيمة داكنة — الاتنين أرضيات تسويقية فاتحة بالتعريف. */
+  --color-tint2: #eff6f3;
+  --color-mint: #7dd3c0;
+
+  /* ── ألوان الحالة ──────────────────────────────────────────────────────
+     كل واحدة ليها: نص (ink/اللون نفسه) + خلفية (bg) + حدّ (line).
+     التلاتة بيتقلبوا مع الثيم — من غير كده الشارة بتفضل بيضا وبتلمع
+     جوّه شاشة سودة حتى لو التباين جوّاها عدّى. */
+  --color-amber: #f8ac33;
+  --color-amber-bg: #fef6e9;
+  --color-amber-ink: #85570f;
+  --color-amber-line: #fbd79a;
+  --color-amber-900: #3d2a05;
+  /* المرور على تعبئة عنبرية — زرار «ابدأ النمو» والشارات في صفحة الهبوط.
+     كانت #DE9219 مكتوبة بالإيد. مع `amber-900` فوقها بتدّي 5.37:1.
+     ثابت مش بيتقلب — نفس منطق `amber` نفسه كتعبئة. */
+  --color-amber-hover: #de9219;
+  --color-green: #1e7a45;
+  --color-green-bg: #f1faf4;
+  --color-green-bg2: #e9f6ee;
+  --color-green-line: #bfe6ce;
+  --color-violet: #4b3e8e;
+  --color-violet-bg: #edeaf6;
+  --color-violet-line: #ded8ef;
+
+  /* تعبئة صريحة بنص أبيض فوقها — نفس دور --color-danger.
+     `green`/`violet` لوحدهم ألوان نص وبيتقلبوا، فمينفعش يشيلوا أبيض
+     في الوضع الداكن (كان بيدّي 1.90 و2.04). دول ثابتين وبيعدّوا:
+       green-solid  أبيض فوقه 5.35 · كعنصر 3.39–5.35
+       violet-solid أبيض فوقه 5.33 · كعنصر 3.41–5.33 */
+  --color-green-solid: #1e7a45;
+  --color-violet-solid: #6d5eb8;
+
+  /* ── الأحمر: دورين، توكنين ─────────────────────────────────────────────
+     `red` لون نص — لازم يعدّي 4.5:1 على السطح، فبيتقلب في الوضع الداكن (تحت).
+     `danger` لون تعبئة وحدّ — لازم يعدّي 3:1 كعنصر، والنص الأبيض فوقه 4.5:1.
+     قيمة واحدة بتعدّي في الوضعين فمش محتاجة تتقلب:
+       كعنصر 4.90 فاتح / 3.70 داكن · أبيض فوقه 4.90
+     كانت #D6493B مكتوبة بالإيد في ٩ مواضع، والأبيض فوقها 4.31 — تحت العتبة. */
+  --color-red: #8e2b20;
+  --color-red-bg: #fdecea;
+  --color-red-line: #f3c9c4;
+  --color-danger: #c94134;
+  /* ── إضافة فنار — مش في منارة ───────────────────────────────────────────
+     `danger` كان الشاذ الوحيد: `brand` و`amber` كلٌّ منهم له `-hover`
+     مخصّص، و`danger` كان بيستعير `--color-red` في الـhover.
+
+     و`--color-red` **بيتقلب في الوضع الداكن** من `#8e2b20` (أحمر غامق)
+     لـ`#f3a79e` (وردي فاتح) — لأنه لون **نص** هناك لا تعبئة. فزرّ الحذف
+     في الداكن، أول ما الماوس يعدّي عليه، كان بيبقى أبيض على وردي فاتح
+     = **1.94**. نصّه عملياً مش مقروء.
+
+     القيمة مشتقّة لا مختارة: نسب القنوات بتاعة `brand → brand-hover`
+     مطبّقة على `danger`. النتيجة في نفس نطاق النظام (سطوع ٠.٦٤ مقابل
+     ٠.٦٧ و٠.٧٣)، والأبيض فوقها **6.73** بدل 4.9. */
+  --color-danger-hover: #a3362b;
+  /* أحمر فاتح ثابت — للأرضيات الداكنة دايماً (التوست على bg-night).
+     مش بيتقلب لأن أرضيته مش بتتقلب. نفس منطق --color-brand-100. */
+  --color-red-100: #f3a79e;
+  --color-night: #0b0f12;
+  --color-hero-body: #bfd9d8;
+  --color-hero-meta: #8fb3b2;
+  --color-hero-dim: #5e7a79;
+  --color-hero-text: #d7e3e2;
+
+  /* ── سلّم الخط ─────────────────────────────────────────────────────────
+     ١٢ درجة، أعداد صحيحة بس. الـREADME كان بيوعد بالسلّم ده من غير ما
+     يبقى موجود، فالمكوّنات اخترعت ١٦ مقاس منهم ٨ كسرية — و12.5px
+     و13.5px لوحدهم كانوا ٣٥ استخدام. */
+  --text-micro: 11px;
+  --text-caption: 12px;
+  --text-ui: 13px;
+  --text-body: 14px;
+  --text-lead: 15px;
+  /* الحقل الكبير — تحت ١٦ بيخلّي iOS يعمل zoom تلقائي على الحقل */
+  --text-base: 16px;
+  /* ── الدرجة الوحيدة اللي بتصطدم بـTailwind ─────────────────────────────
+     كل أسماء السلّم مخترَعة (micro · ui · body · lead · h4…) إلا `base`
+     — ده اسم مقاس مدمج، وTailwind بيعرّف معاه `--text-base--line-height`
+     بـ1.5. فتجاوز `--text-base` بياخد المقاس ويسيب ارتفاع السطر، وأداة
+     `text-base` بتطبع الاتنين.
+
+     والنتيجة إن الأداة بتغلب قاعدة ارتفاع السطر بتاعة الحقول (تحت في
+     `@layer base`) — الأدوات بتغلب الأساس مهما كانت الأولوية — فيرجع
+     الحقل الكبير لـ1.5 وتتقصّ ذيول «ي» و«ج» ١٫٨٥px. والباقي سليم لأن
+     أسماءه مالهاش نظير مدمج.
+
+     `initial` بتشيل الاقتران فتطبع الأداة المقاس بس زي بقية السلّم. */
+  --text-base--line-height: initial;
+  --text-h4: 17px;
+  --text-h3: 20px;
+  --text-h2: 24px;
+  --text-h1: 30px;
+  --text-display: 36px;
+  --text-hero: 44px;
+  /* ── درجتين تسويقيتين ─────────────────────────────────────────────────
+     صفحة الهبوط سلّمها أكبر من سلّم اللوحة — اللوحة بتعرض بيانات كتير
+     في مساحة ضيقة، والهبوط بيعرض جملة واحدة على شاشة كاملة. المرجع
+     فيه ١٠ مقاسات بره السلّم؛ تمانية منهم بيتقرّبوا لدرجة موجودة
+     (38→display · 34→display · 29→h1 · 27→h2 · 25→h2 · 21→h3 · 19→h3
+     · 18→h4)، والاتنين دول مالهمش أقرب من ٤px فبيتضافوا.
+     مالهمش استخدام جوّه اللوحة — لو ظهروا فيها يبقى فيه غلط. */
+  --text-title: 40px;
+  --text-mega: 54px;
+
+  /* ── نصف القطر ─────────────────────────────────────────────────────────
+     ٨ درجات بأدوار مسمّاة. السلّم ده **مشتقّ من الاستخدام الفعلي** مش
+     مفروض عليه: كان فيه ١٧ قيمة مختلفة في ٣١٧ موضع عبر المونوريبو،
+     والدرجات دي بتبلعهم بإزاحة ٢px كحد أقصى — يعني توحيد مش إعادة تصميم.
+
+     ملف الهوية القديم كان بيوعد بأربع قيم بس (9 · 13 · 18 · كامل)، وده
+     كان هيغيّر شكل ١٥١ استخدام في العنقود ٧–٩ لوحده. الأدوار أهم من
+     عدد الدرجات: الزرار الصغيّر مش كرت، والكرت مش قسم. */
+  /* ── عرض الحاويات ──────────────────────────────────────────────────────
+     مقاسان لا أكثر، وبأسماء لا بأرقام مكتوبة في الصفحات.
+
+     `shell` سقف اللوحة كلّها؛ و`page` عمود القراءة: كل صفحة تُقرأ سطراً
+     بعد سطر — تفصيل، أو نموذج، أو إعدادات — تأخذه، وكل صفحة جدولها هو
+     محتواها تأخذ `shell` كاملاً.
+
+     كان في المشروع أربعة مقاسات (٨٨٠ · ٩٢٠ · ٩٨٠ · ٥٨٠) مكتوبة بالإيد
+     في ستّ عشرة شاشة. الفرق بين ٨٨٠ و٩٢٠ لا يُقرأ سبباً — يُقرأ سهواً،
+     والتنقّل بين صفحتين متجاورتين يُظهر الحافّة وهي تقفز أربعين بكسل.
+     والرقم المكتوب بالإيد يعود يتفرّق: التوكن يمنع عودته. */
+  /* ── الفلسفة اتغيّرت: مفيش عصر ────────────────────────────────────
+     `page` كان ٨٨٠px كعمود قراءة، و`shell` ١٤٤٠. النتيجة إن تفاصيل
+     الطلب ومحرّر المنتج والإعدادات — ٢٤ شاشة — بيتحشروا في تلت الشاشة
+     على ٢٧ بوصة، والفراغ حواليهم بيتقري صفحة مش مخلّصة لا عمود مقصود.
+
+     الاتنين بقوا واحد: الصفحة بتاخد عرضها كامل لحد السقف. والسقف باقي
+     لأن غيابه مش «بلا حاوية» — هو حاوية بعرض الشاشة: صفّ «تسمية ← قيمة»
+     على ٣٤٤٠px بيبعد طرفيه تلات آلاف بكسل، والعين بتلفّ بدل ما تمسح.
+
+     لو رجعنا لعمود القراءة يوماً: `--container-page` يرجع ٨٨٠ وبس —
+     الـ٢٤ شاشة بتقراه من التوكن مش مكتوب فيها. */
+  --container-page: 1600px;
+  --container-shell: 1600px;
+
+  /* عرض السطر لا عرض الحاوية — سقف على النصّ حتى لا يمتدّ السطر
+     فيضيع طرفه على العين. درجتان: `note` للسطر أو السطرين تحت
+     عنوان أو في حالة فارغة، و`lead` للفقرة القائمة بنفسها.
+     كانت ستّ قيم (٣٢٠ · ٣٣٠ · ٣٤٠ · ٣٨٠ · ٤٦٠ · ٥٢٠) لا يفرّق
+     بينها شيء يُقصد. */
+  --container-note: 340px;
+  --container-lead: 520px;
+
+  --radius-mark: 3px;
+  --radius-xs: 5px;
+  --radius-sm: 7px;
+  --radius-field: 9px;
+  --radius-card: 12px;
+  --radius-lg: 14px;
+  --radius-section: 18px;
+  --radius-full: 999px;
+
+  /* ── الظل ──────────────────────────────────────────────────────────────
+     الأربعة الأولى بتستخدم `--shadow-color` فبتتقلب مع الثيم — دي ظلال
+     جوّه الصفحة، ولازم تقوى في الوضع الداكن عشان تفضل مقروءة.
+
+     التلاتة الأخيرة قيمها ثابتة عن قصد: دي طبقات فوق أرضية معتّمة
+     أصلاً (backdrop)، فالخلفية اللي وراها مش بتتغيّر مع الثيم. */
+  --shadow-raise: 0 1px 3px var(--shadow-color);
+  --shadow-tip: 0 6px 18px var(--shadow-color);
+  --shadow-panel: 0 10px 30px var(--shadow-color);
+  --shadow-pop: 0 18px 44px var(--shadow-color);
+
+  --shadow-modal: 0 24px 60px rgb(2 8 9 / 0.28);
+  --shadow-toast: 0 16px 40px rgb(2 8 9 / 0.26);
+  /* طالع من تحت — الإزاحة سالبة، والخط الداخلي بيدّي حافة علوية للشيت */
+  --shadow-sheet: 0 -14px 40px rgb(2 8 9 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.06);
+
+  /* ── ألوان الكود — Visual Studio Code ──────────────────────────────────
+     التوثيق وسط تاني: الكود مش نص عادي، والتلوين فيه **بنية** مش زينة —
+     بيفرّق الوسم عن السمة عن القيمة، وده اللي بيخلّي المطوّر يمسح مقطع
+     من عشر أسطر بنظرة. وعشان كده ليه توكنز مستقلة مش استعارة من ألوان
+     الحالة: `--color-green` معناه «نجح»، ولو النص بين علامتين اقتباس
+     أخضر لنفس السبب يبقى المعنى اتخفّف.
+
+     ── ليه ألوان محرّر جاهز مش ألوان قمرة ──────────────────────────────
+     دي الحتة الوحيدة في النظام اللي **المرجع فيها بره قمرة**، والسبب إن
+     المستخدم هنا مطوّر بيقضّي يومه في محرّر. لوحة قمرة على مقطع كود
+     معناها إنه يقرا بنية بلون مش متعوّد عليه، وبعدين ينسخه فيلاقيه
+     بلون تاني في محرّره. التطابق مع المحرّر بيوفّر الترجمة دي.
+     القيم من `light_plus` و`dark_plus` حرفياً — أي «تقريب» بيضيّع
+     السبب كله.
+
+     ست أدوار مش خمسة: الكلمة المحجوزة (`const` · `import`) اتفصلت عن
+     الوسم لأنها كانت **مش ملوّنة أصلاً**، ودي أوضح فرق بين المقطع هنا
+     وبين نفسه في المحرّر.
+
+     ── وليه داكن حتى في الوضع الفاتح ───────────────────────────────────
+     دي القيم الوحيدة في الملف اللي **مابتتقلبش مع الثيم**، ومعاها سبب
+     زي `--color-tint` و`--color-red-100` بالظبط: أرضيتها مش أرضية
+     الصفحة.
+
+     بلوك الكود مش «فقرة بخط تاني» — هو **نافذة محرّر متحطّة في
+     الصفحة**، والمحرّر داكن عند أغلب اللي هيقروا. لو اتقلب مع الثيم
+     بيبقى قطعة من الصفحة، ولو فضل داكن بيتقري مقتطع من المكان اللي
+     الكود ده رايح ليه.
+
+     والمقطع نفسه بيتنسخ ويتلزق في المحرّر — فالتطابق بيوفّر ترجمة
+     بصرية مرتين: وانت بتقراه، ولما تشوفه هناك.
+
+     التباين على `code-bg` — السبعة كلهم فوق 4.5:
+       11.12 · 5.59 · 8.09 · 11.05 · 6.24 · 9.70 · 4.95 */
+  --color-code-bg: #1f1f1f;      /* أرضية المحرّر نفسها */
+  --color-code-plain: #d4d4d4;   /* النص العادي — لون المحرّر مش لون الصفحة */
+  --color-code-key: #569cd6;     /* `const` · `import` · `return` · `true` */
+  --color-code-tag: #4ec9b0;     /* اسم الوسم والمكوّن — `<Button` */
+  --color-code-attr: #9cdcfe;    /* اسم السمة، اسم الخاصية في JSON */
+  --color-code-str: #ce9178;     /* النص بين علامتين */
+  --color-code-num: #b5cea8;     /* الرقم */
+  --color-code-note: #6a9955;    /* التعليق */
+  /* طاقم البلوك — شريط العنوان وزرار النسخ والفاصل الداخلي.
+     `muted2` و`line` بتوع الصفحة مش شغّالين هنا: أرضيتهم بتتقلب وأرضية
+     البلوك لأ، فـ`muted2` في الوضع الفاتح كان بيدّي 3.37 على الأسود.
+     دول مقاسين على `#1f1f1f` وبس. */
+  --color-code-dim: #858585;     /* 4.47 على code-bg */
+  --color-code-line: #303031;    /* الفاصل الداخلي — حدّ لوحة المحرّر */
+
+  /* أرضية الكود المضمّن جوّه جملة — **بتتقلب** مع الثيم عكس اللي فوق.
+     الكلمة جوّه فقرة عربية مش نافذة محرّر: أرضية سودة حواليها بتقطع
+     السطر وبتسحب العين لها بدل ما تخلّيها تكمّل قراية. الفرق في
+     الدور مش في الوسط. */
+  --color-code-chip: #f4f7f7;
+
+  --animate-qfade: qfade 0.16s ease-out;
+  --animate-qslide: qslidein 0.22s ease-out;
+  /* ظهور من أسفل — للبطاقات التي تُقحم نفسها على المستخدم. أبطأ من
+     `qfade` عمداً: ما يظهر بلا طلب يجب أن يُرى وهو يظهر، لا أن يجد
+     المستخدم نفسه أمامه. */
+  --animate-tip: tip-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
+  /* الشريط السفليّ يطلع من تحت الشاشة — حركة تقول «جئت من هنا» */
+  --animate-tip-up: tip-up 0.3s cubic-bezier(0.2, 0.9, 0.2, 1);
+  /* درج جانبي — نسختان لأن `transform` لا ينقلب مع اتجاه الصفحة:
+     اللوح على الحافّة الطرفية، وهي اليمين في LTR واليسار في RTL. */
+  --animate-drawer: drawer-ltr 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
+  --animate-drawer-rtl: drawer-rtl 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
+  /* شريط الحفظ — ينزلق من فوق ويطلع من فوق. الحركة تقول إنه حلّ محلّ
+     ما كان هنا، لا إنه طبقة جديدة فوقه. أسرع من الدرج لأنه لا ينتظر
+     قراءة: المستخدم يعرف أنه عدّل، والشريط يؤكّد لا يُخبر. */
+  --animate-savebar: savebar-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+
+  /* ── نبض الهيكل ────────────────────────────────────────────────────────
+     `animate-pulse` بتاع Tailwind بينزّل الشفافية لـ**٥٠٪**، وده بياكل
+     نصّ الفرق بين التعبئة والسطح: هيكل بـ1.39 بيوصل 1.12 عند الحضيض —
+     يعني بيختفي ويرجع مع كل دورة.
+
+     السبب إن الشفافية معمولة للعناصر اللي تباينها عالي أصلاً (نصّ، صورة).
+     والهيكل بالتعريف **خافت**، فنسبة النزول لازم تبقى أقلّ.
+
+     ٧٠٪ بتسيب 1.26 عند الحضيض — الحركة لسه بتتشاف والعصا مابتغيبش.
+     و1.6s أبطأ من 2s بتاعة Tailwind لأن الحركة الأضيق محتاجة وقت أطول
+     عشان تتقري كنبض لا كوميض. */
+  --animate-skeleton: skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+:root {
+  /* ── إعلان الوضع للمتصفّح ────────────────────────────────────────────
+     المتصفّح بيرسم أجزاء **مش إحنا اللي بنلوّنها**: قائمة `<select>`
+     المنبثقة، وشريط التمرير، ومنتقي التاريخ، وأرضية الملء التلقائي،
+     وحلقة التركيز الافتراضية. دي بترسمها المنصّة لا الـCSS بتاعنا.
+
+     من غير `color-scheme` المتصفّح بيفترض **فاتح دايماً** — فقائمة
+     `<select>` في الوضع الداكن بتطلع بنصّ غامق على أرضية غامقة، والخيار
+     المحدَّد شريط أزرق فاضي بلا كلام. مافيش أي CSS على `<option>` بيصلّح
+     ده: العنصر بيترسم برّه الصفحة.
+
+     والسطر ده هو الإصلاح الوحيد — وبيشتغل على الخمس حاجات مرّة واحدة. */
+  color-scheme: light;
+
+  --shadow-color: rgb(2 8 9 / 0.14);
+  /* اتجاه محاذاة الأرقام — بيتقلب مع اتجاه الصفحة */
+  --num-align: right;
+  /* ── الرقم اللي ليه لاحقة ──────────────────────────────────────────────
+     `far` = ناحية **نهاية الصفحة**، وهي ناحية اللاحقة.
+     و`pad-right`/`pad-left` **فيزيائيين عن قصد**: الحقل نفسه
+     `direction: ltr` (من `[data-num]`)، فأي حشو منطقي (`pe-`) بيتحسب
+     على LTR ويروح الناحية الغلط — وده اللي كان بيخلّي الرقم يتراكب
+     على «ج.م». */
+  --num-align-far: left;
+  --num-pad-right: 0.875rem;
+  --num-pad-left: 3.5rem;
+  /* ونفس الحكاية مع الأيقونة السابقة: الأيقونة بتتحطّ بحساب اتجاه
+     **الصفحة** (`start-3.5` على الغلاف)، والحشو بحساب `ltr` بتاع الرقم
+     — فالاتنين بيقعوا في ناحية واحدة والرقم بيتراكب على الأيقونة. */
+  --num-icon-pad-right: 2.5rem;
+  --num-icon-pad-left: 0.875rem;
+}
+
+html[dir="ltr"] {
+  --num-align: left;
+  --num-align-far: right;
+  --num-icon-pad-right: 0.875rem;
+  --num-icon-pad-left: 2.5rem;
+  --num-pad-right: 3.5rem;
+  --num-pad-left: 0.875rem;
+}
+
+html[data-theme="dark"] {
+  /* الشرح عند القيمة الفاتحة في `:root` */
+  color-scheme: dark;
+
+  --color-surface: #101718;
+  --color-bg: #0a0f10;
+  --color-line: #1e2829;
+  --color-hover: #1a2425;
+  --color-ink: #f2f6f6;
+  --color-ink2: #c7d1d1;
+  --color-muted: #93a0a0;
+  --color-muted2: #7a8787;
+  --color-border: #5e6b6c;
+  --color-soft: #12363a;
+  --color-soft2: #17454a;
+  --color-brand-ink: #7dd3c0;
+  /* الهيكل — نفس التباين بالظبط (1.39) مقلوباً. الشرح عند القيمة الفاتحة. */
+  --color-skeleton: #2c3232;
+  --shadow-color: rgb(0 0 0 / 0.55);
+
+  /* الأحمر النصّي لازم يتقلب — #8e2b20 على #101718 بيدّي 2.17:1،
+     يعني رسالة الخطأ مكانتش بتتقري أصلاً. البديل 9.36:1. */
+  --color-red: #f3a79e;
+  --color-red-bg: #2c1613;
+  --color-red-line: #5c2a24;
+
+  /* باقي ألوان الحالة — نفس المنطق. الأرقام دي نص على خلفيته. */
+  --color-amber: #f8ac33;      /* 8.33 على amber-bg */
+  --color-amber-bg: #2b2009;
+  --color-amber-ink: #f5c77a;  /* 10.15 */
+  --color-amber-line: #5c4415;
+  --color-green: #6ecf9a;      /* 8.03 على green-bg2 */
+  --color-green-bg: #0d2119;
+  --color-green-bg2: #102a22;
+  --color-green-line: #245140;
+  --color-violet: #b9aeea;     /* 8.24 على violet-bg */
+  --color-violet-bg: #1e1a33;
+  --color-violet-line: #38305c;
+
+  /* ألوان الكود مش هنا — هي ثابتة في `@theme static` فوق ومابتتقلبش.
+     الوحيد اللي بيتقلب هو أرضية الكود المضمّن جوّه الجُمل. */
+  --color-code-chip: #17201f;
+}
+
+/* خطوط رأسية باهتة كل ٧٤px — بتدّي عمق للأرضية الداكنة من غير صورة.
+   موجودة في `Qumra Accounts.dc.html` و`Qumra Landing.dc.html` بنفس القيم،
+   فمكانها هنا مش جوّه تطبيق. تشتغل على الأرضيات الداكنة بس — الخطوط
+   بيضا بشفافية ٣.٥٪. */
+@utility rule-grid {
+  background-image: repeating-linear-gradient(
+    90deg,
+    rgb(255 255 255 / 0.035) 0 1px,
+    transparent 1px 74px
+  );
+}
+
+/* نبض الهيكل — الشرح عند `--animate-skeleton` */
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes qfade {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: none; }
+}
+
+@keyframes sheet-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes drawer-ltr {
+  from { transform: translateX(100%); }
+  to { transform: none; }
+}
+
+@keyframes drawer-rtl {
+  from { transform: translateX(-100%); }
+  to { transform: none; }
+}
+
+@keyframes tip-up {
+  from { transform: translateY(100%); }
+  to { transform: none; }
+}
+
+@keyframes tip-in {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: none; }
+}
+
+@keyframes savebar-in {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: none; }
+}
+
+@keyframes qslidein {
+  from { transform: translateX(-100%); }
+  to { transform: none; }
+}
+
+/* ظهور بسيط — للقوايم المنسدلة والتولتيب والطبقات */
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* التوست بيطلع من تحت شوية — بيربط الحركة بمكانه في الشاشة */
+@keyframes toast-in {
+  from { opacity: 0; transform: translateY(10px) scale(.97); }
+  to { opacity: 1; transform: none; }
+}
+
+/* شريط تحميل غير محدّد — بيروح ويرجع بدل ما يدّعي نسبة مايعرفهاش.
+   منطقيّ الاتجاه: `inset-inline-start` بيتقلب مع الصفحة لوحده. */
+@keyframes qload {
+  0%   { inset-inline-start: -35%; }
+  100% { inset-inline-start: 100%; }
+}
+
+@layer base {
+  html,
+  body {
+    height: 100%;
+  }
+
+  /* ── ذيول الحروف العربية داخل الحقول ──────────────────────────────────
+     الحقل يقصّ ما يخرج عن صندوقه، وصندوق نصّه ارتفاعه ارتفاع السطر. وفي
+     Alexandria ينزل ذيل «ي» و«ج» و«ص» تحت خطّ القاعدة أكثر ممّا يتركه
+     سطر بارتفاع 1.5 — فيُقصّ الذيل قصّاً مستوياً ويُقرأ الحرف ناقصاً.
+     اللاتينية لا تُظهر العيب لأن ذيولها أقصر، ولذلك يمرّ بلا انتباه.
+
+     1.9 يسع أطول ذيل في السلّم كلّه. ولا يزيد ارتفاع الحقل: المتصفّح
+     يوسّط سطر الحقل المفرد في صندوقه، والسطر الأطول يأخذ من الفراغ
+     الموجود أصلاً. والقاعدة على العنصر نفسه لا على الصنف، فتغطّي كل
+     حقل في المشروع — في المكتبة أو مكتوباً بالإيد.
+
+     ── والرقم مقيس لا مختار ────────────────────────────────────────────
+     القصّ يقع عند **صندوق السطر** لا صندوق الحقل — فالحقل قد يكون
+     ٥٦px والسطر ٢٤px فيُقصّ الذيل وحوله فراغ. والحدّ الأدنى:
+
+         الصعود − الهبوط المعلَن + ٢ × هبوط الحبر
+         14 − 4 + 2×7.92 = 25.85px  عند 14px  ≈ 1.85
+
+     لأن نصف الرصاص يوزَّع أعلى وأسفل. و1.9 فوقه بشعرة.
+
+     ── وأداة `leading-*` على حقل تكسر هذا كلّه ─────────────────────────
+     القاعدة في `@layer base`، والأدوات تغلب الأساس مهما كانت الأولويّة.
+     فكل `leading-[…]` أو `text-*` يحمل ارتفاع سطر مقترناً يعيد العيب
+     في مكانه. وقعت مرّتين: `--text-base` (انظر أعلى) و`leading-[1.7]`
+     في `AiComposer` — والاثنتان كانتا تقصّان ذيل «ي». */
+  input:not([type='checkbox']):not([type='radio']):not([type='range']),
+  textarea,
+  select {
+    line-height: 1.9;
+  }
+
+  body {
+    margin: 0;
+    background: var(--color-bg);
+    color: var(--color-ink);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    overflow: hidden;
+  }
+
+  a {
+    color: var(--color-brand);
+    text-decoration: none;
+  }
+  a:hover {
+    color: var(--color-brand-hover);
+  }
+
+  input {
+    font-family: inherit;
+  }
+
+  /* حلقة تركيز موحّدة — v2 مكانش فيها، وده الشيء الوحيد اللي بزوّده
+     على الأصل لأن التصميم من غيره مش قابل للتنقّل بالكيبورد. */
+  :focus-visible {
+    outline: 2px solid var(--color-brand);
+    outline-offset: 2px;
+    border-radius: 6px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: 999px;
+  }
+
+  /* الأرقام جوّه نص عربي.
+     `isolate` بيمنع الرقم من إنه يتلخبط مع اللي حواليه، و`tabular-nums`
+     بيخلّي الخانات بعرض واحد فالأعمدة تفضل مصطفّة. والمحاذاة متثبّتة على
+     اتجاه الصفحة بمتغيّر، ولأنها في @layer base أي كلاس محاذاة
+     (text-end / text-center) لسه بيكسبها.
+
+     ── وليه مافيش `direction: ltr` هنا ──────────────────────────────────
+     كان موجود، وكان بيقلب كل مبلغ في المنصة: «34,330 ج.م» بتتقرا في
+     العربي من اليمين — الرقم يمين والرمز شماله. و`ltr` كان بيحطّ الرقم
+     شمال والرمز يمينه، فتُقرأ «ج.م ثم 34,330» زي «$34,330» الإنجليزية.
+
+     والرقم الخالص مابيفرقش معاه اتجاه العنصر — خانة واحدة بتتعرض LTR
+     في الحالتين. اللي بيحتاج `ltr` فعلاً هو النصّ المركّب اللي فيه أكتر
+     من مقطع: تليفون، ورمز تخزيني، ورقم طلب — ودول مكتوب عليهم
+     `dir="ltr"` صراحةً في مكانهم أصلاً.
+
+     وبيفضل على الحقول، لأن اتجاه الحقل بيحكم حركة علامة الإدخال وهي
+     بتكتب أرقام — ومش مسألة عرض. */
+  [data-num] {
+    unicode-bidi: isolate;
+    font-variant-numeric: tabular-nums;
+    text-align: var(--num-align);
+  }
+
+  input[data-num],
+  textarea[data-num] {
+    direction: ltr;
+  }
+
+  /* ── سهم حقل الرقم ────────────────────────────────────────────────────
+     تحكّم المتصفّح الأصلي مقفول في كل حقل `type="number"`.
+
+     مش تجميل — تلات أسباب:
+
+       ١. **بيصطدم باللاحقة.** الحقل بلاحقة («ج.م») بيحجز مساحة في
+          نهايته بـ`pe-14`، والسهم بيتحطّ في نفس المكان من غير ما يعرف
+          إن فيه حاجة هناك. الاتنين بيتراكبوا.
+
+       ٢. **موضعه بيتلخبط مع `[data-num]`.** الحقل جوّه صفحة عربية
+          والرقم `direction: ltr` — فالسهم بيتحطّ ناحية والقيمة ناحية،
+          والنتيجة سهم في نصّ الحقل زي ما في اللقطة.
+
+       ٣. **مقاسه من نظام التشغيل.** ١٥ بكسل تقريباً وبيتغيّر بين
+          المتصفّحات، ومستحيل يعدّي حدّ الهدف اللمسي (٢٤ بكسل).
+
+     اللي عايز يزوّد وينقّص بزرار بيحطّ زرارين ظاهرين — دي عناصر
+     التحكّم بتاعتنا وليها حجم ومسافة مقروءين، مش أسهم النظام. */
+  input[type='number'] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+
+
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button {
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+/* ── الرقم بلاحقة ────────────────────────────────────────────────────────
+   الرقم لوحده بيتحاذى ناحية بداية الصفحة (`--num-align`) — ده صح في عمود
+   جدول: كل الأرقام بتصطفّ تحت بعضها فالمقارنة بينها بنظرة.
+
+   لكن الحقل اللي ليه لاحقة («ج.م») مختلف: اللاحقة عنصر مطلق في **نهاية**
+   الحقل، والرقم في **بدايته** — فبينهم عرض الحقل كله. النتيجة إنك تقرا
+   «٠» وتقطع ٣٩٠ بكسل عشان تلاقي «ج.م».
+
+   هنا الرقم بيتحاذى ناحية اللاحقة فيلزق فيها، والوحدة بتبقى على شماله في
+   العربي — «١٢٥٠ ج.م» زي ما بتتكتب.
+
+   ── وليه بره `@layer base` ────────────────────────────────────────────
+   الطبقات بتكسب على التخصيص: أي كلاس utility من Tailwind بيغلب أي قاعدة
+   في `base` مهما كان تخصيصها. والحقل عليه `pe-14`، فالقاعدة دي لازم تبقى
+   بعد الطبقات عشان تكسبه. */
+[data-num][data-suffix] {
+  text-align: var(--num-align-far);
+  padding-right: var(--num-pad-right);
+  padding-left: var(--num-pad-left);
+}
+
+[data-num][data-icon] {
+  padding-right: var(--num-icon-pad-right);
+  padding-left: var(--num-icon-pad-left);
+}