/* رموز تصميم سافيو — **التعريف الوحيد**.

   فُصلت عن `style.css` لأن الأخير يحمل مع التصميم **سلوك قشرة التطبيق**:
   `user-select: none` يمنع تحديد النصّ، و`overscroll-behavior: none` يمنع
   الارتداد. وهما صحيحان في تطبيقٍ مثبَّت، وخطأ في صفحة تسويق أو شروط
   يَنسخ منها الناس نصًّا.

   فكانت النتيجة أن أربع صفحات من الموقع العام نسخت الرموز بيدها — ستّة
   مصادر حقيقة لا واحد. وهذا الملف يُنهيها: كل سطح يحمّله، ومن أراد سلوك
   التطبيق حمّل `style.css` بعده.

   **لا يُضاف هنا إلا رمز.** أي قاعدة مكوّن مكانها `style.css`. */

:root {
  /* الوضع الداكن مشال بالكامل: الهوية مبنية على خلفية رملية فاتحة، والليموني
     المحجوز للتوفير يفقد معناه لما ينقلب لون نص عادي بالداكن. color-scheme
     يمنع iOS من قلب حقول الإدخال ومربّعات الاختيار لداكن من عنده. */
  color-scheme: light;

  /* الزمرديّ والحبر كانا **قيمةً واحدة بِاسمين** (‎#14231F‎) — وقد سُجّل
     ذلك في `DESIGN_AUDIT.md`. ومع تقليص اللوحة صارا الأسود نفسه، فبقيا
     اسمين للتوافق لا لونين. */
  --emerald: #000000;
  --emerald-deep: #1C1C1C;
  --lime: #C6F432;
  --coral: #FF7A45;
  /* أقوى من `--coral` وأعمق — لشريط الوجبة السادسة وحده. طُلب صراحةً
     «برتقالي أقوى». ولم يُغيَّر `--coral` نفسه لأنه يحمل رسومًا وشارات
     أخرى معايرةً عليه. */
  --coral-strong: #F2540C;
  /* ولحبر السطر نظيرٌ أعمق. `--coral-strong` يبلغ 3.46:1 على الأبيض —
     يكفي **شريطًا** (حدّ العناصر الرسومية 3:1) ولا يكفي **نصًّا**
     (4.5:1)، والعنوان ‎15px‎ ثقيلٌ لا يبلغ عتبة النصّ الكبير. */
  --coral-ink: #B8420A;
  --danger: #B4491C;
  /* **التحذير** — مستوًى ثالث بين السليم والخطأ. أُضيف لأن لوحة الأدمن
     كانت تخترعه بيدها (`#B8860B` في ثمانية مواضع): إنذاراتها ثلاث درجات
     — حرجٌ وتحذيرٌ وسليم — ولم يكن في اللوحة إلا الخطأ. والقاعدة «لا رمز
     جديد بلا معنًى جديد» تُجيزه: التحذير ليس خطأً.
     و`#96690C` لا `#B8860B`: الثاني تباينه ‎3.25:1‎ على أبيض — دون حدّ AA
     (‎4.5‎) — وهو **مستعملٌ نصًّا** في اللوحة. والمقترح ‎4.86‎. */
  --warning: #96690C;
  --warning-soft: color-mix(in srgb, var(--warning) 9%, var(--surface));
  --danger-soft: color-mix(in srgb, var(--danger) 8%, var(--surface));
  /* أبيض نقيّ لا كريميّ: النصّ على الأسطح الداكنة كان يميل للرمليّ. */
  --on-emerald: #FFFFFF;
  --on-lime: #12211C;
  --on-coral: #FFF8F3;

  /* أبيض نقي لا رملي: الرملي كان يعطي دفئًا لكنه يقرأ "غير رسمي" بجانب
     التطبيقات البنكية. والدفء لم يُفقد — انتقل إلى الرملي الثانوي
     (surface-2) وإلى الرسومات، حيث يكون اختيارًا لا خلفية عامة.

     البطاقات كانت تُفصل عن الصفحة بفرق التعبئة (أبيض على رملي). على أبيض
     يسقط هذا الفرق، فبديله ظل ناعم وحدّ شعرة — انظر .rcard. */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  /* خُفِّف عن #F0EEE6: على صفحة رملية كان يقرأ هادئًا، وعلى أبيض صار
     يصرخ بيجًا. هنا يبقى محسوسًا بلا أن يسحب العين. */
  /* ---------- اللوحة المحايدة: أبيض وأسود لا غير ----------
     طُلب صراحةً تقليصها: «أحسّ عندنا ألوان كثيرة في الأساس للخطوط
     والباك قراوند، والمفروض يكون أبيض وأسود والليموني والتأثير الزجاجي».

     فكل محايدٍ هنا صار **رماديًّا خالصًا مشتقًّا من الأسود** بدل الأخضر
     المسحوب والرمليّ. والألوان الدلاليّة تبقى — الخطأ أحمر لأنه خطأ،
     والعرض مرجانيّ، والتوفير ليمونيّ — فهذه معانٍ لا زينة.

     و`--surface-2` صار رماديًّا محايدًا لا كريميًّا: الكريميّ كان أكبر
     مصدرٍ لإحساس «ألوان كثيرة» في الخلفيات. */
  --surface-2: #F2F2F2;
  --text: #000000;
  /* ‎#6B6B6B‎ يبلغ ‎5.13:1‎ على الأبيض — فوق حدّ AA للنصّ العادي. وكان
     ‎#5C6D64‎ أخضرَ مسحوبًا. */
  --text-muted: #6B6B6B;
  /* الحدود والظلال من الأسود لا من الأخضر المسحوب: حدٌّ أخضر بشفافية
     ‎12٪‎ يلوّن كل بطاقةٍ في التطبيق تلوينًا لا يُسمّى ويُحسّ. */
  --border: rgba(0, 0, 0, 0.12);
  --border-soft: rgba(0, 0, 0, 0.08);
  --shadow: rgba(0, 0, 0, 0.10);

  /* ---------- مادة الزجاج ----------
     الضبابية وحدها لا تكفي فوق خلفية بيضاء: أبيضٌ شفّاف فوق أبيض لا فرق
     فيه مهما بلغت الضبابية. فالمادة تتمايز بذاتها لا بما خلفها —
     تلوين خفيف بلون النص يعطيها كثافة، وحافّة علوية مضيئة تكسر الضوء،
     وظلّ يرفعها فتطفو ولا تلتصق. */
  --glass-bg-top: color-mix(in srgb, var(--text) 5%, var(--surface));
  --glass-bg-bottom: color-mix(in srgb, var(--text) 9%, var(--surface));
  --glass-border: color-mix(in srgb, var(--text) 13%, transparent);
  --glass-sheen: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 10px 30px -10px rgba(20, 35, 31, 0.30), 0 2px 6px -2px rgba(20, 35, 31, 0.12);

  /* ---------- المادّة الزجاجية ----------
     الزجاج السابق كان معتمًا تقريبًا (‎76%‎ تعبئة) فيُقرأ لوحًا مصمتًا لا
     زجاجًا. وApple تعرّفه بثلاثة معًا — والثالث هو المفقود عندنا:

     ١ · شفافيةٌ يمرّ منها المحتوى فعلًا («allows content to scroll and
         peek through from beneath»). فالتعبئة نزلت إلى الثلث.
     ٢ · **تشبّعٌ** يرفع ألوان ما خلفه («adjusts the luminosity of
         background content»). ‎saturate(180%)‎ لا ‎1.8‎ المبهمة.
     ٣ · **حافّة لامعة** تكسر الضوء عند الحدّ — وهي ما يجعل السطح يُقرأ
         مادّةً لا طبقةَ لون. شعرةٌ ساطعة أعلى، وأخرى خافتة أسفل.

     وعلى أرضيةٍ بيضاء لا يكفي البياض الشفّاف وحده — لا فرق فيه. فالتلوين
     من `--text` يعطيه كثافةً، والحافّة تعطيه حدًّا. */
  /* تمويهٌ أوسع وتشبّعٌ أعلى: زجاج iOS يُعرَف بأن ما خلفه **يُرى مذابًا**
     لا محجوبًا — لونه يصل والشكل لا يصل. و‎40px‎ هو ما يُذيب حرفًا مقروءًا
     إلى لطخةِ لون عند هذه الكثافة. و‎200%‎ يعيد للألوان المارّة حيويّتها،
     فالتمويه وحده يبهتها. */
  --lg-blur: blur(40px) saturate(200%);
  --lg-fill: linear-gradient(180deg,
    color-mix(in srgb, var(--text) 3%, transparent) 0%,
    color-mix(in srgb, var(--text) 7%, transparent) 100%);
  /* ‎20/12‎ بعد مقارنةٍ بمرجعٍ حيّ (شريط «جاهز»): هناك **يُقرأ النصّ من
     خلف الشريط** — لا يُلمح لونه بل تُقرأ حروفه مذابةً. وهذا لا يبلغه
     إلا خفضٌ حادّ للتعبئة مع تمويهٍ واسع. والحافّة اللامعة هي ما يمنعه
     أن يختفي، لا التعبئة. */
  /* **المادّة تُعتّم، لا تُبيّض.** كانت تعبئةً بيضاء (‎20٪→12٪‎) — وأبيضُ
     شفّاف فوق صفحةٍ بيضاء لا فرق فيه إطلاقًا، فلا يبقى من الزجاج إلا
     ظلُّه الخارجي. ولهذا كان الشريط يُقرأ حبّةً بيضاء مصمتة في اللقطات
     التي لا محتوى تحتها.
     وزجاج أبل يُرى **بذاته** لا بما خلفه: عدسةٌ أكثف قليلًا من أرضيّتها،
     وحافّةٌ لامعة تقول إن لها سُمكًا. فالتعبئة صارت من الحبر لا من
     البياض — ‎4٪→9٪‎ — فتُعتّم الأبيضَ درجةً محسوسة وتبقى شفّافةً بما
     يكفي لمرور اللون من تحتها. */
  --lg-fill-strong: linear-gradient(180deg,
    color-mix(in srgb, var(--text) 4%, transparent) 0%,
    color-mix(in srgb, var(--text) 9%, transparent) 100%);
  /* الحافّة اللامعة تحمل الوزن كلّه الآن بعد أن خفّت التعبئة: شعرةٌ ساطعة
     أعلى حيث يسقط الضوء، وأخرى أهدأ أسفل حيث ينعكس عن الحافّة الداخلية.
     وهي ما يجعل السطح يُقرأ **مادّةً لها سُمك** لا طبقةَ لون. */
  --lg-edge: inset 0 1px 0 rgba(255, 255, 255, 0.92),
             inset 0 -1px 0 rgba(255, 255, 255, 0.30),
             inset 1px 0 0 rgba(255, 255, 255, 0.22),
             inset -1px 0 0 rgba(255, 255, 255, 0.22);
  /* حلقةٌ أوضح: هي حدّ العدسة، وعليها يقع أكثر ما يُقرأ «زجاجًا». */
  --lg-ring: inset 0 0 0 0.5px color-mix(in srgb, var(--text) 22%, transparent);
  --lg-lift: 0 12px 28px -14px rgba(20, 35, 31, 0.32),
             0 2px 8px -4px rgba(20, 35, 31, 0.14);
  /* الأخدود: المسار الذي تقف فيه الرقاقة. غائرٌ لا مسطّح — لونٌ من الحبر
     لا `--surface-2` المسطّح، وحافّةٌ داخلية تقول إنه محفور. */
  --lg-groove: color-mix(in srgb, var(--text) 7%, transparent);
  --lg-groove-ring: inset 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent),
                    inset 0 0 0 0.5px color-mix(in srgb, var(--text) 8%, transparent);

  /* رقاقة الاختيار: ما يحمل «هذا هو المحدَّد» داخل شريطٍ مقسَّم.
     كانت لوحًا كحليًّا مصمتًا — والمصمت يسحب العين إلى الخلفية فيسرق
     الانتباه من الأيقونة ويجعل لون الهوية يذهب للوح لا للمحتوى. الرقاقة
     الزجاجية تعكس الضوء وترتفع بظلّها، فيبقى اللون في النصّ والأيقونة.
     وهي أفتح من مسارها (`--surface` فوق `--surface-2`) فتُقرأ مرفوعة. */
  /* الرقاقة ترتفع من الأخدود: أفتح ممّا تحتها، وحافّتها اللامعة هي ما
     يقول «مرفوعة» — لا الظلّ وحده. */
  /* قاعدة الاختيار: أثرٌ خفيف لا لوحٌ ساطع. في المرجع الحيّ هي **ظلّ
     رماديّ هادئ** تحت التبويب النشط، لا حبّة بيضاء تنافس الشريط. */
  --glass-chip-bg: linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 52%, transparent) 0%,
    color-mix(in srgb, var(--surface) 34%, transparent) 100%);
  --glass-chip-border: color-mix(in srgb, var(--text) 9%, transparent);
  /* الحدّ حلقةٌ داخلية لا `border`: الحدّ الحقيقي يقضم بكسلين من صندوق
     المحتوى في `border-box`، فيصير للتبويب النشط ٤٦ بكسلًا من الارتفاع
     الداخلي بينما لجيرانه ٤٨ — ومحتواه يحتاج ٤٥٫٨٨. فرقُ فائضٍ قدره
     ٠٫١٣ عنده مقابل ٢٫١٣ عندهم، ومع خطّ النظام على iOS (نازله أعمق من
     خطّ كروم) ينقلب الفائض سالبًا فيُقصّ المحتوى ويُدفع لأعلى — وهو ما
     رُئي «نازلًا من فوق، غير متساوٍ». الحلقة تُرسم ولا تقيس. */
  --glass-chip-ring: inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent);
  --glass-chip-shadow: var(--lg-edge),
                       var(--lg-ring),
                       0 2px 8px -3px rgba(20, 35, 31, 0.18);

  /* ---------- تلوين دلاليّ: يعرّف بالشكل قبل القراءة ----------
     أربعة ألوان تُصرف على أيقونات التصنيفات وبطاقات الموقع — أي على
     "نوع الشيء" لا على حالته. مفصولة عن --danger عمدًا: الطوبيّ هناك
     يعني خطأً، وهنا يعني صنفًا؛ ودمجهما يجعل «العمل» يُقرأ تحذيرًا.
     ولا واحد منها ليمونيّ — الليمونيّ للحظة التوفير وحدها.

     --tint-emerald هو زمرديّ الهوية الأصلي (#0E6B5C) من design.md، وقد
     صار --emerald كحليًّا مسوّدًا فبقي الزمرديّ بلا موضع. هذا موضعه. */
  /* ---------- الأرضية الحبرية ----------
     `--emerald` كان يحمل دورين: **حبرًا** للنصّ و**أرضيةً** للرؤوس. وفي
     الضوء استقام بالمصادفة لأن اللون نفسه يصلح للاثنين؛ وفي الظلام
     ينكسر — لا قيمة واحدة تكون نصًّا مقروءًا وأرضيةً داكنةً معًا.
     فالأرضيات انتقلت إلى رمزها. */
  /* ---------- درجات أرضية البطاقات ----------
     أربعٌ تتناوب على المطاعم بلا صورة غلاف. كانت مثبَّتةً في جافاسكربت
     فبقيت فاتحةً في الظلام — لوحٌ نعناعيّ ساطع وسط صفحةٍ سوداء. */
  --thumb-0: #E1EDE9;
  --thumb-1: #F0EDE1;
  --thumb-2: #E7EEDF;
  --thumb-3: #F2E6E0;

  /* الأسطح الداكنة: أسودٌ لا أخضر داكن. هذه أكبر مساحةٍ ملوّنة في
     التطبيق — رأس الرئيسية وبطاقتا البنر ولوح التوفير — وكانت خضراء
     مائلةً للأسود، فتُقرأ لونًا ثالثًا بين الأبيض والليمونيّ. */
  --surface-ink: #0A0A0A;
  --promo-deep: #000000;
  --surface-ink-2: #1C1C1C;

  /* كان زمرديّ الهوية الأصلي (‎#0E6B5C‎) وتحمله **أحد عشر** موضعًا:
     أيقونة البحث، وحلقة التركيز، وأيقونات «حسابي»، ورقم التوفير، ودوّار
     التحميل. وهو أكثر ما يُقرأ «لونًا ثالثًا» في شاشةٍ يُراد لها الأبيض
     والأسود والليمونيّ. فصار أسودَ الحبر نفسه، وتبقى الدلالة من الشكل
     والوزن لا من صبغةٍ إضافية. */
  --tint-emerald: #000000;

  /* ---------- عائلة الخطّ ----------
     `-apple-system` أولًا: على آيفون وماك وحدهما يُحلّ إلى **SF Pro**
     ومعه **SF Arabic** — وهو الخطّ الذي في لقطة «جاهز» بالضبط. قيس
     بالحروف: الـ`g` في «Burger» مزدوجة الطابق بذيل SF، ولا يطابقها خطٌّ
     من جوجل. وجاهز لا يشحن خطًّا أصلًا؛ يستعمل خطّ النظام.

     ولا يمكن شحن SF: رخصته تقصره على منصّات Apple — نفس قيد SF Symbols.
     لكن **استدعاءه من النظام مباح**، وهو ما تفعله كل صفحة ويب.

     ثم `IBM Plex Sans Arabic` لمن ليس على Apple: `-apple-system` لا
     يُحلّ إلا هناك، فيسقط أندرويد وويندوز على خطّنا الحالي — عربيّةٌ
     واحدة متّسقة بدل نسخة النظام المختلفة في كل جهاز.

     **الأثر:** التطبيق يصير أصيلًا على آيفون ومتّسقًا على غيره. وApple
     توصي بهذا صراحةً: «prefer platform-native patterns». */
  /* **IBM Plex Sans Arabic أوّلًا.** كان `-apple-system` في الصدارة،
     وهو يُحلّ على آيفون إلى SF Arabic — فلا يصل المتصفّح إلى IBM Plex
     أبدًا على جهاز المالك، والخطّ المحمَّل من Google Fonts يُنزَّل ولا
     يُستعمل. أي أن `design/typography.md` كان يقول خطًّا والشاشة ترسم
     غيره، وهو ما قيل صراحةً: «الخط لم يتم تغييره».
     ونظام الجهاز يبقى بديلًا بعده لا قبله. */
  --font-ar: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Tahoma, sans-serif;
  --font-num: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;

  /* ---------- أزرق الدعوة ----------
     لونٌ **خارج لوحة الهوية** أُدخل لغرضٍ واحد: زر المتابعة قبل الضغط.
     السبب أن كل ما في البطاقة زمرديّ أو رماديّ، فزرٌّ بأيٍّ منهما يذوب
     في جاره ولا يُرى — وقد كان كذلك. والأزرق هو اللون الوحيد الذي لا
     يحمل معنًى آخر في هذا التطبيق: الليمونيّ للتوفير، والمرجانيّ للعرض،
     والطوبيّ للخطأ. فلا يلتبس.
     ومحصورٌ في هذه الحالة وحدها — بعد المتابعة يعود اللون إلى الهوية. */
  /* زجاج الفعل: أرضيّة كل زرٍّ يُضغط لينفَّذ شيء. رمزٌ واحد لأن الأزرار
     موزّعة على عشر شاشات، ونسخُ التدرّج في كلٍّ منها يعني أن تعديل اللون
     مرّةً واحدة يترك نصفها وراءه. */
  --action-glass: linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 72%, transparent) 0%,
    color-mix(in srgb, var(--surface) 48%, transparent) 100%);
  /* أثقل من رقاقة الاختيار عمدًا: الاثنتان زجاج، والفرق بينهما يجب أن
     يبقى مقروءًا — فزرّ الفعل يرتفع أكثر بظلٍّ أوسع وحلقةٍ أظهر. اللون
     لم يعد يحمل الأولوية، فالارتفاع والمقاس هما ما يحملانها. */
  --action-glass-shadow: var(--lg-edge),
                         var(--lg-ring),
                         0 8px 20px -8px rgba(20, 35, 31, 0.30),
                         0 2px 6px -3px rgba(20, 35, 31, 0.16);
  /* حبر الأزرار: لا أسود ولا زمرديّ — الدرجة نفسها التي يحملها التبويب
     النشط، فالطقم كلّه يتكلّم بلونٍ واحد. */
  --action-ink: color-mix(in srgb, var(--text-muted) 88%, var(--text));

  /* ---------- سلّم الفراغات ----------
     السلّم المعلَن في المشروع كان صائبًا؛ المكسور هو الالتزام به: ‎23‎ قيمة
     حشوة مفردة و‎12‎ قيمة `gap`، منها ‎9‎ و‎11‎ و‎13‎ و‎22‎ و‎28‎ خارج أيّ سلّم.
     فالعلاج تصفية الشوارد لا اختراع سلّمٍ ثالث — ودرجاتٌ يستعملها الملف
     فعلًا (‎4‎ سبعًا وعشرين مرّة، و‎10‎ ستًّا وعشرين) تبقى.
     و‎44‎ ليست فراغًا بل هدف لمس، و‎62‎ مشتقّةٌ من ارتفاع الشريط — كلتاهما
     تبقى رقمًا مقصودًا. */
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 6px;
  --s-4: 8px;
  --s-5: 10px;
  --s-6: 12px;
  --s-7: 16px;
  --s-8: 20px;
  --s-9: 24px;
  --s-10: 32px;
  --s-11: 48px;

  /* ---------- السلّم الطباعيّ ----------
     كان ‎35‎ حجمًا مختلفًا في ‎214‎ إعلانًا — منها ‎0.84‎ و‎0.85‎ و‎0.86‎ و‎0.88‎
     أربعةٌ متجاورة لا يفرّق بينها بصر، لكنها تمنع أيّ تعديلٍ عامّ على
     الطباعة لأن كل موضعٍ صار حالةً خاصّة.
     وApple تعرّف text styles محدودة يحملها التدرّج كلّه. هذه مقابلها.
     `--t-caption` هو الحدّ الأدنى: Apple تضع أدنى مقاسٍ على iOS عند ‎11pt‎. */
  --t-display: 2.4rem;
  --t-title: 1.6rem;
  --t-heading: 1.15rem;
  --t-body-lg: 1rem;
  --t-body: 0.92rem;
  --t-callout: 0.85rem;
  --t-footnote: 0.78rem;
  --t-caption: 0.7rem;
  /* Apple (Right to left): «Arabic or Hebrew text can appear too small when
     next to uppercased Latin text… it often works well to **increase the RTL
     font size by about 2 points**». يُصرف حيث يجاور العربيُّ لاتينيًّا في
     السطر نفسه — صفّ المجموع والأسعار. */
  --ar-balance: 1.12;

  /* ---------- سلّم الاستدارة ----------
     كان ‎15‎ قيمةً مختلفة في ‎117‎ إعلانًا، منها ‎4‎ و‎9‎ و‎11‎ و‎13‎ تظهر مرّةً
     واحدة لكلٍّ — أي أنها سهوٌ لا قرار. وستٌّ تكفي، وما خرج عنها يُقرَّب
     لأقربها بفارقٍ لا يتجاوز بكسلين.
     والقاعدة المتداخلة: استدارة الداخل = استدارة الخارج ناقص الحشوة
     بينهما — ومخالفتها تُرى فجوةً هلاليّة عند الركن، وقد وقعت فعلًا. */
  --r-hair: 2px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  /* أزرق الدعوة، وزرّ المتابعة على بطاقة المطعم. أُقرّ من المالك صراحةً
     بعد أن عُرض عليه أنه خارج اللوحة — فهو قرارٌ لا سهو. */
  --invite-blue: #1B6FE0;
  --on-invite-blue: #FFFFFF;
  --tint-clay: #C2622E;
  --tint-coral: #FF7A45;
  --tint-sand: #B08833;

}