@qumra/fanar 0.0.0 → 0.0.2

package/dist/tokens.css

@@ -1,87 +1,42 @@
-/* ============================================================================
-   توكنز قمرة — تنزل في أي 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;
@@ -91,39 +46,16 @@
   --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;
@@ -131,29 +63,14 @@
   --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;
@@ -161,54 +78,13 @@
   --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;
 
@@ -221,12 +97,6 @@
   --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);
@@ -234,124 +104,50 @@
 
   --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-bg: #1f1f1f;
+  --color-code-plain: #d4d4d4;
+  --color-code-key: #569cd6;
+  --color-code-tag: #4ec9b0;
+  --color-code-attr: #9cdcfe;
+  --color-code-str: #ce9178;
+  --color-code-num: #b5cea8;
+  --color-code-note: #6a9955;
+
+  --color-code-dim: #858585;
+  --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 عند الحضيض —
-     يعني بيختفي ويرجع مع كل دورة.
 
-     السبب إن الشفافية معمولة للعناصر اللي تباينها عالي أصلاً (نصّ، صورة).
-     والهيكل بالتعريف **خافت**، فنسبة النزول لازم تبقى أقلّ.
+  --animate-savebar: savebar-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
 
-     ٧٠٪ بتسيب 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;
 }
@@ -366,7 +162,7 @@ html[dir="ltr"] {
 }
 
 html[data-theme="dark"] {
-  /* الشرح عند القيمة الفاتحة في `:root` */
+
   color-scheme: dark;
 
   --color-surface: #101718;
@@ -381,38 +177,29 @@ html[data-theme="dark"] {
   --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: #f8ac33;
   --color-amber-bg: #2b2009;
-  --color-amber-ink: #f5c77a;  /* 10.15 */
+  --color-amber-ink: #f5c77a;
   --color-amber-line: #5c4415;
-  --color-green: #6ecf9a;      /* 8.03 على green-bg2 */
+  --color-green: #6ecf9a;
   --color-green-bg: #0d2119;
   --color-green-bg2: #102a22;
   --color-green-line: #245140;
-  --color-violet: #b9aeea;     /* 8.24 على violet-bg */
+  --color-violet: #b9aeea;
   --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,
@@ -421,7 +208,6 @@ html[data-theme="dark"] {
   );
 }
 
-/* نبض الهيكل — الشرح عند `--animate-skeleton` */
 @keyframes skeleton-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.7; }
@@ -467,20 +253,16 @@ html[data-theme="dark"] {
   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%; }
@@ -492,31 +274,6 @@ html[data-theme="dark"] {
     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 {
@@ -544,8 +301,6 @@ html[data-theme="dark"] {
     font-family: inherit;
   }
 
-  /* حلقة تركيز موحّدة — v2 مكانش فيها، وده الشيء الوحيد اللي بزوّده
-     على الأصل لأن التصميم من غيره مش قابل للتنقّل بالكيبورد. */
   :focus-visible {
     outline: 2px solid var(--color-brand);
     outline-offset: 2px;
@@ -561,24 +316,6 @@ html[data-theme="dark"] {
     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;
@@ -590,30 +327,11 @@ html[data-theme="dark"] {
     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;
@@ -631,21 +349,6 @@ html[data-theme="dark"] {
   }
 }
 
-/* ── الرقم بلاحقة ────────────────────────────────────────────────────────
-   الرقم لوحده بيتحاذى ناحية بداية الصفحة (`--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);

package/dist/tokens.js

@@ -1,20 +1 @@
-import {
-  ANIMATE_SCALE,
-  COLOR_SCALE,
-  CONTAINER_SCALE,
-  DARK_TOKENS,
-  RADIUS_SCALE,
-  SHADOW_SCALE,
-  TEXT_SCALE,
-  TOKENS
-} from "./chunk-SFA2EQFK.js";
-export {
-  ANIMATE_SCALE,
-  COLOR_SCALE,
-  CONTAINER_SCALE,
-  DARK_TOKENS,
-  RADIUS_SCALE,
-  SHADOW_SCALE,
-  TEXT_SCALE,
-  TOKENS
-};
+import{ANIMATE_SCALE,COLOR_SCALE,CONTAINER_SCALE,DARK_TOKENS,RADIUS_SCALE,SHADOW_SCALE,TEXT_SCALE,TOKENS}from"./chunk-3CTGRTYV.js";export{ANIMATE_SCALE,COLOR_SCALE,CONTAINER_SCALE,DARK_TOKENS,RADIUS_SCALE,SHADOW_SCALE,TEXT_SCALE,TOKENS};