/* ═══════════════════════════════════════════════════════════════════════
   وَصل — طبقة الـtokens المشتركة.  v4.0

   **الاتجاه (٢٠٢٦-٠٩-٠٤): أبيضٌ دافئ وعنّابيٌّ عميق — «مركزُ قيادة مطعم».**
   يحلّ محلّ الكُحليّ/الأزرق (v3.0) على كل سطح، بقرار المالك ومرجعٍ بصريّ
   للوحة تشغيل مطعمٍ فاخرة: أسطحٌ محايدةٌ دافئة (لا بيضاءَ سريريّة)، وحبرٌ
   عاجيٌّ بميلٍ دافئ، **والعنّابيُّ إشارةٌ لا طلاء** — للعلامة والفعل الأساسي
   والحالة المختارة والتأكيد وحدها. الوثيقة:
   `design/07_DIRECTION_WARM_BURGUNDY.md`.

   والتاريخ قبله: بنفسجي (v2.0) ← كُحليّ/أزرق (v3.0 · `design/06`).

   **يُحمَّل قبل أي ملف سطح.** كل سطح (تسويق · طاقم · عميل · مطبخ · منصّة)
   يبني على هذه المتغيّرات ولا يعيد تعريف لونًا خامًا. القيمة الخام في ملف
   سطحٍ واحد تعني لونًا يتباعد بصمت عن بقية النظام بعد ثلاثة أشهر.

   **والأسماء القديمة باقيةٌ كلها** (`--brand-*` · `--ink-*` · `--ok-*` …)
   وقيمُها وحدها تغيّرت: ٢٣٠ كيلوبايت من قواعد الأسطح تشير إليها، وإعادةُ
   تسميةٍ كبرى تعني رمزًا واحدًا منسيًّا يسقط بلا لون ولا خطأ — وهو العطل
   الذي أوجد `DesignTokensResolveTest` أصلًا. الأسماء الجديدة (`--color-*`
   · `--neutral-*` · `--space-*` · `--text-*`) تُضاف بجوارها للمكوّنات
   الجديدة، ولا تُنسَخ قيمةٌ مرّتين: كلها `var()` إلى نفس الأصل.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── العلامة: عنّابيٌّ للفعل والسلطة معًا — على صبغةٍ واحدة (٣٥٢°) ──────
     الدرجةُ ٥٠٠ هي الفعل: كل زرٍّ أساسي ورابطٍ حيّ وحالةٍ مختارة وخطٍّ
     رئيسيّ في مبيان. والسلّمُ يزداد عتمةً بالرقم كما كان (٥٠٠ فعلٌ ·
     ٦٠٠ تمريرٌ فوقه · ٧٠٠ ضغطٌ عليه)، و٩٠٠ أعمقُ ما في النظام. والأربعُ
     المسمّاةُ في لوحة الهوية (#4A1118 · #641720 · #7D1D28 · #961F2D) تقع
     على ٩٠٠ و٧٠٠ و٦٠٠ و٥٠٠ بالترتيب — فالسلّمُ من اللوحة لا اجتهادٌ حولها.

     **ولا يُطلى به سطحٌ كبير**: العنّابيُّ إشارةٌ، ومساحتُه الكبيرة تُذهب
     معناه. الأسطحُ محايدةٌ دافئة وهو ما يُقرأ فيها أوّلًا.

     أبيضُ على ٥٠٠ = ٨٫٣٣ · ٦٠٠ على الأبيض (رابط) = ١٠٫١ · ٥٠٠ على الأبيض
     (حلقةُ التركيز) = ٨٫٣ — كلُّها فوق أرضيّات `design/verify_contrast.py`. */
  --brand-900: #4A1118;   /* أعمق العنّابيّ — سلطةٌ وحبرُ الطاولة الحرّة */
  --brand-850: #55141C;
  --brand-800: #5C161F;
  --brand-700: #641720;   /* المضغوط */
  --brand-600: #7D1D28;   /* التمرير فوق الأساسي — ونصُّ الرابط */
  --brand-500: #961F2D;   /* الأساسي — الفعل */
  --brand-400: #B5303F;   /* أحمرُ أنيق — رسمٌ وحدودٌ لا نصّ */
  --brand-300: #D26472;
  --brand-200: #EAB3BA;
  --brand-100: #F8E4E6;   /* الظِّلّ الفاتح — الحالة المختارة والظِّلال الرقيقة */
  --brand-50:  #FCF3F4;

  /* ── نقطةُ العلامة ───────────────────────────────────────────────────
     أحمرُ الهوية (#EF4136). العلامةُ نفسُها `currentColor` فتأخذ لونَ
     محيطها — كحليًّا على سطحٍ فاتح، أبيضَ على الشريط الكحليّ. والنقطةُ
     وحدها ثابتة: هي ما يجعل العلامةَ تُعرَف، فلا تتبع سِمةً ولا سطحًا. */
  --mark-dot: #EF4136;

  /* ── العنّابيُّ الثابت — لا يتبع السِمة ─────────────────────────────
     السلّمُ `--brand-*` ينقلب على الداكن (الأفتحُ هو الأقوى) وهذا صحيحٌ
     للنصّ والفعل. لكنّ كتلًا بعينها عنّابيّةٌ عميقةٌ **في السِمتين** —
     بطاقةُ قدم الشريط، عدّادُ «يحتاجك»، شارةُ الرتبة — والسلّمُ المقلوبُ
     كان يجعلها ورديّةً. فهذه ثلاثُ درجاتٍ ثابتة وحبرُها الأبيض. */
  --brand-fixed-600: #7D1D28;
  --brand-fixed-900: #4A1118;
  --brand-fixed-950: #3A1016;
  --brand-fixed-500: #961F2D;
  --on-brand-fixed:  #FFFFFF;

  /* ── الحبر: محايدٌ **دافئ** بميلٍ خفيفٍ إلى البنّيّ ──────────────────
     كان رماديًّا بميلٍ أزرق فقرأ باردًا على الأرضية الدافئة الجديدة
     (لونان من عائلتين على شاشةٍ واحدة). الصبغةُ الآن ٢٠°–٣٠° بتشبّعٍ ضئيل:
     يُقرأ رماديًّا على البطاقة ويتآلف مع الأرضية.

     و٤٠٠ **للنائب والزخرفة وحدهما** — ٢٫٦ على الأبيض. أدنى درجةٍ تصلح
     لنصٍّ ثانوي هي ٥٠٠: ٥٫٣١ على الأبيض و**٥٫٢٦ على أرضية الصفحة الدافئة**
     — والأرضيةُ الدافئة أغمقُ من الأبيض قليلًا، فحُسب الزوجُ عليها هي. */
  --ink-900: #181719;   /* العناوين — الأوبسيديان من لوحة الهوية */
  --ink-800: #2A2527;
  --ink-700: #3D3735;   /* النص القوي */
  --ink-600: #57504D;
  --ink-500: #6F6763;   /* النص الثانوي — أدنى ما يُقرأ */
  --ink-400: #A39B96;   /* نائبُ الحقل والزخرفة — لا نصّ */
  --ink-300: #D8D2CC;   /* حدّ الحقل */
  --ink-200: #E9E4DF;   /* حدّ البطاقة */
  --ink-100: #F1EDE9;
  --ink-50:  #F7F4F1;   /* رأس الجدول */
  --white:   #FFFFFF;

  /* حبرُ ما يُكتب **فوق** لونِ العلامة — أبيضُ هنا، وكحليٌّ في السِمة
     الداكنة. وسببُ وجوده أن `--brand-500` يقلب دورَه بين السِمتين: على
     الفاتحة أزرقٌ عميقٌ يحمل نصًّا أبيض، وعلى الداكنة أزرقٌ فاتحٌ يُقرأ
     نصًّا بنفسه — ونصٌّ أبيضُ فوقه يعطي ٢٫١. فالاسمُ يتبع اللون. */
  --on-brand: var(--white);

  /* أدوارُ أسطح الوردية — على الفاتح هي الدرجةُ نفسُها التي كانت مكتوبةً في القاعدة. */
  --act:          var(--ink-900);   /* الفعلُ الأساسيُّ على الوردية «حبرٌ لا أزرق» */
  --on-act:       var(--white);
  --th-active-bg: var(--ink-900);   /* رأسُ التذكرة الجارية */
  --th-active-fg: var(--white);
  --ok-fill:      var(--ok-600);    /* تعبئةٌ صلبةٌ تحمل حبرًا أبيض */
  --warn-fill:    var(--warn-600);
  --danger-fill:  var(--danger-600);
  --late-line:    var(--warn-500);  /* حدُّ التذكرة المتأخّرة */
  --live-dot:     var(--brand-500); /* نقطةُ «مباشر» */

  /* الاختيارُ و«أين أنا» دورٌ واحد: الحدُّ والحلقةُ والخطُّ تحت اللسان،
     والمعبَّأُ (شريحةٌ مختارة · الصفحةُ الحاليّة · لسانُ التقارير). على
     الفاتح هي الدرجةُ نفسُها التي كانت مكتوبةً في القاعدة. */
  --pick-line:    var(--brand-500);
  --pick-bg:      var(--brand-500);
  --pick-ink:     var(--on-brand);

  /* حالةُ الطاولة حدًّا على البطاقة — على الصالة ونقطة البيع. */
  --floor-live:   var(--brand-500); /* جلسةٌ جارية · بيطلبوا */
  --floor-seated: var(--ok-500);    /* قاعدين */
  --floor-clean:  var(--info-500);  /* بتتنضّف */

  /* الرابطُ دورٌ مستقلّ — على الفاتح كما كان (`--brand-600`)، وعلى «تشغيل»
     أزرقُ البيانات: الكهرمانيُّ هناك للفعل وحده. */
  --link: var(--brand-600);
  --link-hover: var(--brand-500);
  /* **نصُّ التمييز وحدُّه دوران مستقلّان عن تعبئة العلامة** (٢٠٢٦-١٠-٠٣). سلّمُ `--brand-*`
     كان يحمل الثلاثة معًا — تعبئةً ونصًّا وحدًّا — وهذا يصحّ للعنّابيّ على الأبيض وللكهرمانيّ
     على الداكن، ولا يصحّ للكهرمانيّ على الأبيض (٢:١). فالسعرُ المميَّز والإجماليُّ يقرآن
     `--brand-ink`، وحلقةُ التركيز وخطُّ «جديد» ونقاطُ الرقم السرّيّ `--brand-line`؛ وهنا قيمتُهما
     ما كانت القواعدُ تكتبه، وعلى «تشغيل» الفاتح بنّيٌّ كهرمانيٌّ يُقرأ. */
  --brand-ink: var(--brand-600);
  --brand-line: var(--brand-500);
  /* والاختيارُ دورٌ ثالث: على الفاتح عنّابيٌّ كما كان، وعلى «تشغيل» أبيضُ
     محايد — «أين أنا» ليس فعلًا. */
  --selected-ink: var(--brand-600);
  --selected-ink-strong: var(--brand-700);

  /* ── الحالة ─────────────────────────────────────────────────────────
     لكل حالةٍ ثلاث درجات بالضبط: `500` للرسم والمؤشّر، و`600` **للنصّ**
     على ظِلٍّ فاتح، و`tint` للظِّلّ نفسه. والدرجة الصلبة (`solid`) لِما
     يحمل نصًّا أبيض: الأخضر ٥٠٠ مع أبيض ٣٫٢٤:١ — يسقط تحت AA، فالزرّ
     المصمت يأخذ `solid` لا `500`. */
  /* ── ذهبُ «ليل» ──
     مُعرَّفٌ هنا لا في `layl.css` وحدها: `design/04 §7` تنصّ على أن قسم
     «ليل» يُزاد إلى الرموز عند بدء النقل. ولوحةُ المطعم تحتاجه أيضًا —
     شاشةُ الإعدادات تعرض عيّنةَ لون أزرار الضيف، ولونٌ خامٌ مكتوبٌ هناك
     يتباعد عن مصدره أوّلَ مرّةٍ يُعدَّل. */
  --gold-300: #E5B95C;
  --gold-500: #D9A441;   /* على `layl-950` ٨٫٧:١ */
  --gold-700: #B77A1F;

  --ok-500:      #16A36A;
  --ok-600:      #047857;
  --ok-tint:     #ECFDF5;
  --ok-solid:    #047857;   /* أبيض عليه ٥٫٤٨:١ */
  --warn-500:    #F59E0B;
  --warn-600:    #B45309;
  --warn-tint:   #FFFBEB;
  --warn-solid:  #B45309;   /* أبيض عليه ٥٫٠٢:١ */
  --info-500:    #3B82F6;
  --info-600:    #1D4ED8;
  --info-tint:   #EFF6FF;
  --info-solid:  #1D4ED8;
  --danger-500:  #EF4444;
  --danger-600:  #B91C1C;
  --danger-tint: #FEF2F2;
  --danger-solid:#DC2626;   /* أبيض عليه ٤٫٨٣:١ — و#EF4444 لا يكفي (٣٫٧٦) */

  /* حدُّ السطح المصبوغ: الظِّلّ الفاتح بلا حدٍّ يسبح في البطاقة البيضاء،
     وحدُّ `--line` الرمادي عليه يُقرأ غريبًا عن دلالته. */
  --ok-line:     #A7F3D0;
  --warn-line:   #FDE8B8;
  --danger-line: #FBD5D5;
  --info-line:   #BFDBFE;

  /* ── نظام مبيانات وَصل — حبرُ البيانات ──────────────────────────────
     لوحةٌ مستقلّةٌ عن لون الفعل: العلامةُ العنّابيّة للأفعال والروابط،
     والبياناتُ في كُحليٍّ ← نيليٍّ ← أزرقٍ كهربائيّ ← بنفسجيٍّ هادئ. رسمٌ
     بلون الفعل يجعل كلَّ عمودٍ يبدو زرًّا، وشاشةٌ كلُّها عنّابيّ لا تميّز
     ما يُنقَر ممّا يُقرأ. والعنّابيُّ في المبيان للدلالة وحدها (هبوطٌ أو
     خسارة) — `--chart-emphasis`.

     والأوجه: الواجهةُ بالدرجة، والسطحُ أفتحُ (يلتقط الضوءَ من أعلى
     اليسار)، والجانبُ أغمقُ — في السِمتين. */
  --chart-ink:      #0B1354;   /* أرقامُ الذروة والقيمُ فوق الرسم — ١٦٫٦ على الأبيض */
  --chart-700:      #1E2A8A;
  --chart-600:      #2F45C9;   /* أبيض عليه ٦٫٦:١ — حبرُ البطاقة العائمة */
  --chart-500:      #4364F7;   /* بطلُ البيانات: الذروةُ والمنحنى وآخرُ قراءة */
  --chart-400:      #6E8BFF;   /* التمرير */
  --chart-300:      #A9B8FF;
  --chart-200:      #CBD4FF;   /* العمودُ الهادئ */
  --chart-100:      #E6EBFF;   /* سطحُ العمود الهادئ · الهالةُ الباهتة */
  --chart-50:       #F3F5FF;
  --chart-face:       var(--chart-200);
  --chart-face-top:   #DDE3FF;
  --chart-face-side:  #AEBBF7;
  --chart-hover:      var(--chart-400);
  --chart-hover-top:  #93A8FF;
  --chart-hover-side: #4E6BE6;
  --chart-peak:       var(--chart-500);
  --chart-peak-top:   #7A92FF;
  --chart-peak-side:  var(--chart-700);
  --chart-glow:     rgba(67, 100, 247, .30);
  --chart-shadow:   rgba(11, 19, 84, .16);   /* ظِلُّ الارتفاع تحت العمود والخطّ */
  --chart-grid:     rgba(11, 19, 84, .07);   /* خطوطُ الدليل — تكاد لا تُرى */
  --chart-emphasis: var(--brand-500);
  /* البطلُ بالعنّابيّ الداكن — لونُ وَصل نفسُه: الذروةُ وشريطُ المسار وآخرُ
     قراءة. والقاعدةُ الهادئة (الأعمدةُ الصامتة والدليلُ والتمرير) على العائلة
     الباردة فوق — فالعينُ تجد الأحمرَ حيث الخبر لا في كل عمود. */
  --chart-hero-700:    #641720;
  --chart-hero-600:    #7D1D28;
  --chart-hero-500:    #961F2D;
  --chart-hero-400:    #B54452;
  --chart-hero-300:    #E4A8AF;
  --chart-hero-glow:   rgba(150, 31, 45, .26);
  --chart-hero-shadow: rgba(100, 23, 32, .18);

  /* ── شرائحُ التركيبة ──────────────────────────────────────────────────
     حلقةٌ تقول «ممّ يتكوّن هذا الرقم؟»: الأكبرُ بالبطل العنّابيّ، وما بعده
     ينزل على العائلة الباردة درجةً درجة. **والترتيبُ هو الدلالة** — لا
     ستّةُ ألوانٍ متساويةِ الصوت تجعل العينَ تبحث عن المفتاح.

     و«أخرى» بحبرٍ محايد: هي بقيّةٌ لا فئة، ولونٌ لها من العائلة يجعلها
     تُقرأ شريحةً سادسةً لها اسم. وكلُّها أسماءٌ مستعارةٌ لرموزٍ موجودة،
     فتنقلب مع السِمة بلا كتلةٍ داكنةٍ ثانية. */
  --slice-1: var(--chart-hero-500);
  --slice-2: var(--chart-600);
  --slice-3: var(--chart-500);
  --slice-4: var(--chart-400);
  --slice-5: var(--chart-300);
  --slice-rest: var(--ink-300);
  --slice-track: var(--ink-100);

  /* ── الأسطح والحدود ──────────────────────────────────────────────────
     ثلاثة أسطح لا أكثر: البطاقة بيضاء، والصفحة تحتها أفتحُ رمادٍ أزرق،
     و`alt` للرأس والشريط الغائر داخل البطاقة. */
  --surface:       var(--white);
  /* ── أرضيةُ التطبيق دافئة — #FAF9F7 من لوحة الهوية ─────────────────────
     أبيضُ الورق لا أبيضُ الشاشة: البطاقةُ البيضاء تطفو عليه بفرقٍ يُرى
     ولا يُحسّ ثقلًا، والصفحةُ لا تُقرأ سريريّة. والحبرُ الثانويّ حُسب
     عليها لا على الأبيض (انظر `--ink-500`) فلا زوجَ معلَنًا يسقط تحتها. */
  --surface-sunk:  #FAF9F7;   /* أرضية التطبيق */
  --surface-alt:   #F4F1EE;   /* سطحٌ ثانوي داخل البطاقة — من اللوحة */
  --surface-hover: #FAF9F7;
  --surface-brand: var(--brand-100);
  --line:          var(--ink-200);   /* حدّ البطاقة — #E9E4DF */
  --line-strong:   var(--ink-300);   /* فواصلُ وحدودٌ زخرفية — #D8D2CC */

  /* حدُّ الحقل — **قيمةٌ خاصّة لأن الحدَّ هنا هو ما يُعرّف العنصر.**
     الحقلُ أبيضُ على بطاقةٍ بيضاء، فحدُّه وحده يقول «هذا حقلٌ يُكتب فيه»؛
     و WCAG 1.4.11 تطلب ٣:١ لما يُعرّف عنصرَ واجهة. و`--ink-300` كان يعطي
     **١٫٤٧** — فالحقلُ بلا حدٍّ مرئيّ عمليًّا.

     و`#928A85` أخفُّ رمادٍ دافئٍ يعبر (٣٫٣٩ على الأبيض): تغميقٌ أكثر يثقّل
     كلَّ نموذجٍ في المنتج بلا مقابل. ولم يُغمَّق `--line-strong` نفسُه لأنه
     يحمل جداولَ وخطوطًا متقطّعة لا تُعرّف عنصرًا. */
  --line-field:    #928A85;
  --line-soft:     var(--ink-100);

  /* ── الظلال ──────────────────────────────────────────────────────────
     أدنى ما يكفي، والعمق يُبنى بالحدّ والسطح. **وبميلٍ دافئ (أوبسيديان)
     لا كُحليّ ولا أسود**: ظلٌّ باردٌ على أرضيةٍ دافئة يُقرأ لطخةً زرقاء،
     والأسودُ الصافي حافّةً متّسخة. و`--shadow-md` هو ما تطفو به البطاقة
     المرفوعة في اللوحة — ناعمٌ وعريض لا قصيرٌ وحادّ. */
  --shadow-xs: 0 1px 2px rgba(36, 33, 36, .04);
  --shadow-sm: 0 1px 2px rgba(36, 33, 36, .04),
               0 1px 3px rgba(36, 33, 36, .06);
  --shadow-md: 0 2px 4px rgba(36, 33, 36, .03),
               0 10px 28px rgba(36, 33, 36, .07);
  --shadow-lg: 0 4px 8px rgba(36, 33, 36, .04),
               0 24px 56px rgba(36, 33, 36, .12);
  --shadow-brand: 0 6px 16px rgba(150, 31, 45, .24);   /* ظِلُّ `--brand-500` */

  /* ── مشهدُ الصالة («نبض الصالة» على لوحة المطعم) ──────────────────────
     غرفةٌ كُحليّة **مجسَّمة** داخل بطاقةٍ بيضاء، فلها لوحتُها هي. والقاعدة
     فيها: **لكلِّ مجسّمٍ لونان** — سطحٌ علويٌّ يقابل الضوء وجانبٌ أعتم منه —
     فالعمقُ يُقرأ من الفرق بينهما ومن الظلّ، لا من تدرّجٍ مرسومٍ يوهم به.
     ولذلك لا تدرّجَ واحدًا في المشهد كلِّه: ما يبدو ثلاثيَّ الأبعاد فيه
     **هندسةٌ فعليّة** (أوجهٌ وإزاحاتٌ في `translateZ`) لا رسمٌ مسطّح.

     ولا تتبع سِمةَ الإدارة الداكنة — **صالةٌ نهاريّةٌ دافئة في الحالَين**
     — فرموزُها من الدرجات التي لا تنقلب مع `data-scheme`.

     ── v4: من غرفةٍ كُحليّةٍ ليليّة إلى صالةٍ حجريّةٍ دافئة ──
     المرجعُ البصريّ صالةٌ بأرضيةٍ حجريّةٍ فاتحة وطاولاتٍ بيضاء ونباتٍ —
     تُقرأ «مطعمًا» قبل أن تُقرأ «رسمًا». وآمنٌ لأن حبرَ كل طاولةٍ يقع على
     **سطحها هي** (`--tw-ink` لكل حالة) لا على الأرضية، فلا زوجَ تباينٍ
     يتحرّك بتغيير الأرض. والكرسيُّ أغمقُ من سطح الطاولة كما كان. */
  --twin-bg:           #EFE9E2;   /* ما خارج الغرفة — أغمقُ من البطاقة قليلًا فتُقرأ الغرفةُ غائرة */
  --twin-panel:        rgba(255, 255, 255, .92);
  --twin-panel-line:   #E4DDD5;
  --twin-ground:       #E6DDD2;   /* أرضيةُ الصالة — حجرٌ دافئ */
  --twin-ground-edge:  #D8CDBF;   /* حافّتُها عند الجدار */
  --twin-wall:         #C9BCAE;   /* جانبُ الجدار */
  --twin-wall-top:     #DDD2C5;   /* سطحُه العلويّ */
  --twin-vignette:     rgba(70, 50, 38, .14);
  --twin-shadow:       rgba(70, 50, 38, .38);
  --twin-cast:         rgba(70, 50, 38, .30);
  --twin-fixture:      #A99684;   /* جانبُ التجهيزات */
  --twin-fixture-top:  #C4B3A1;   /* سطحُها */
  --twin-bar-top:      #B9A691;
  --twin-metal:        #8D7B69;   /* آلاتٌ وحوافُّ معدنية */
  --twin-plant:        #3E9B69;
  --twin-plant-core:   #2A6B47;
  --twin-chair:        #7E6E62;   /* كرسيٌّ محايد — أغمقُ من سطح الطاولة كي
                                     يُقرأ كرسيًّا لا امتدادًا لها */
  --twin-chair-side:   #635549;
  --twin-top-side:     #C9BCAE;   /* سماكةُ الطاولة الفاتحة */
  --twin-muted-side:   #9E8F80;   /* سماكةُ المحجوزة وظهرُ كرسيّها */
  /* حبرُ لوحات المشهد (اللسانُ · المفتاحُ · لافتةُ المنطقة · نصُّ الفراغ) —
     **دورٌ مستقلّ**: كان أبيضَ على الغرفة الليليّة، ومع صالةٍ نهاريّة صار
     أبيضَ على أبيض (١٫٠١ — قِيس ٢٠٢٦-٠٩-٠٤). فالحبرُ يتبع ما رُسم فوقه لا
     اسمَ الصنف، ولا يتبع سِمةَ الإدارة لأن المشهدَ لا يتبعها. */
  --twin-ink:          #2A2527;
  --twin-ink-quiet:    #6F6763;
  --twin-glow-busy:    rgba(150, 31, 45, .55);
  --twin-glow-bill:    rgba(217, 164, 65, .55);
  --twin-glow-off:     rgba(220, 38, 38, .50);

  /* أدوارُ الطاولة في المشهد — على الفاتح هي نفسُ درجات العلامة التي كانت
     مكتوبةً في القاعدة، وعلى «تشغيل» تأخذ معانيَها: المشغولةُ زرقاء (بيانٌ
     حيّ) لأن الكهرمانيَّ هناك للفعل ولمن ينتظر الحساب — كانتا لونًا واحدًا. */
  --twin-table-ink:      var(--brand-900);
  --twin-busy:           var(--brand-500);
  --twin-busy-ink:       var(--on-brand);
  --twin-busy-side:      var(--brand-800);
  --twin-busy-seat:      var(--brand-400);
  --twin-busy-seat-side: var(--brand-700);
  --twin-tool-bg:        var(--white);
  --twin-tool-ink:       var(--brand-900);
  --twin-tool-on-bg:     var(--brand-500);
  --twin-tool-on-ink:    var(--on-brand);

  /* الخطُّ المصغّر تحت رقم المؤشّر — بيانٌ لا فعل. */
  --spark:      var(--brand-500);
  --spark-soft: var(--brand-400);

  /* ── الاستدارة ───────────────────────────────────────────────────────
     الحاوية أوسع نصفًا من الضابط الذي فيها: ١٦ للبطاقة و١٠ للزرّ والحقل.
     الشكل وحده يفرّق بين ما يُنقر وما يحتوي. */
  --r-xs: 8px;
  --r-sm: 10px;    /* الأزرار والحقول والقوائم المنسدلة */
  --r-md: 12px;
  --r-card: 16px;  /* البطاقات وبطاقات المؤشرات */
  --r-ctl: var(--r-sm);  /* كل ما يُنقر أو يُكتب فيه */
  --r-lg: 20px;    /* النوافذ والأدراج */
  --r-xl: 28px;
  --r-full: 999px;

  /* ── المسافات ────────────────────────────────────────────────────────
     `--space-*` هو سلّم المواصفة حرفيًّا (٤ ← ٦٤) وعليه يُبنى الجديد.
     و`--s*` سلّم v1/v2 باقٍ لأن التسويق وسطح الزبون مبنيّان عليه —
     والقفزات الكبيرة (١٠٤ ← ١٤٠) إيقاعُ صفحةٍ تسويقية لا لوحةِ بيانات. */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 48px;  --space-10: 64px;

  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 64px; --s9: 104px; --s10: 140px;

  /* ── الطباعة ─────────────────────────────────────────────────────────
     **القاهرة (Cairo)، مستضافة ذاتيًا، متغيّرة الوزن.** ملفٌ واحد لكل
     نطاقٍ محرفيّ يغطّي ٤٠٠←٨٠٠ — لا CDN ولا خمسة طلبات. وهي أوسع عدادًا
     من المرّاعي وأكثر حيادًا، وهو المطلوب في لوحةٍ تُقرأ بالمسح.
     والمرّاعي تبقى معرَّفةً كاحتياطيّ حقيقي: ملفاتها على القرص. */
  --font: "Cairo", "Tajawal", "Almarai", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
  /* خطُّ العرض — للعناوين والرقم الواقف وحده. افتراضُه خطُّ النصّ نفسُه، فلا يتغيّر
     سطحٌ لم يطلبه (التسويق والضيف). */
  --font-display: var(--font);

  /* سلّم القياس — من §٠٧ في المواصفة. المتغيّر يمنع «١٧٫٥px» التي تظهر
     في ملفٍ واحد ثم تنتشر. */
  --text-h1:   32px;  --lh-h1:   40px;
  --text-h2:   24px;  --lh-h2:   32px;
  --text-h3:   20px;  --lh-h3:   28px;
  --text-h4:   18px;  --lh-h4:   26px;
  --text-body: 15px;  --lh-body: 1.7;
  --text-sm:   13px;
  --text-xs:   12px;
  --text-kpi:  clamp(28px, 3.4vw, 40px);
  /* v4 — درجتان فوق العنوان: `display` لتحيّة اللوحة («صباح الخير، أحمد»)،
     و`metric` لرقم المؤشّر. **الرقمُ المهمُّ يُقرأ مهمًّا** — ٣٦ صافيًا لا
     ٢٢ كما كانت البطاقةُ المسطّحة، فيسبق العينَ إلى ما جاءت لأجله. */
  --text-display: clamp(26px, 2.6vw, 34px);
  --text-metric:  clamp(26px, 2.2vw, 32px);
  --text-metric-lead: clamp(34px, 3vw, 44px);

  --weight-bold: 700;   /* العناوين الكبيرة والأرقام */
  --weight-semi: 600;   /* العناوين الصغيرة والتسميات */

  /* ── الحركة ──────────────────────────────────────────────────────────
     ١٥٠←٢٥٠ مللي: المواصفة تطلب «سريعًا وهادئًا». والزنبرك باقٍ لسطح
     الزبون وحده — لوحةُ بياناتٍ تقفز عناصرُها تُقرأ رخيصة. */
  --ease:   cubic-bezier(.4, 0, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --fast: .15s; --base: .22s; --slow: .32s;

  /* ── الهدف اللمسي ────────────────────────────────────────────────────
     ٤٤ أرضيةً في اللوحات (WCAG 2.5.5 ومواصفة الأزرار ٤٠←٤٤)، و٦٤ على
     أسطح المطبخ بحكم الكتلة أدناه: الشاشة تُلمس بإبهامٍ مبلول لا بمؤشّر. */
  --touch: 44px;
  --focus: var(--brand-500);

  /* **إعلانُ السِمة — ليس تفصيلًا.** بلا `color-scheme` يعتبر كروم الصفحةَ
     بلا تصميمٍ مُعلَن، فيقلبها قسرًا بـAuto Dark Mode حين يكون النظام
     داكنًا: البطاقاتُ البيضاء تصير رمادًا داكنًا، والحبرُ يُقلب، والظِّلال
     الفاتحة (الكهرمانيّ والأخضر) تصير لطخًا زيتونية. والتصميمُ سليمٌ في
     الورقة ومقلوبٌ على الشاشة، ولا شيء في السجلّات.

     وقد وقع فعلًا: كتلةُ سطح المنصّة قبل v3 كانت تعلن `dark` فتحميه،
     فلمّا حلّ محلَّها الشريطُ الكُحليّ وحده بقي النظامُ كلُّه بلا إعلان.
     والإعلانُ هنا يعطّل القلب القسري ويُلوّن أدواتَ المتصفّح (شرائطَ
     التمرير ومنتقيَ التاريخ) بما يوافق السطح. */
  color-scheme: light;

  /* ── أسماء المواصفة ──────────────────────────────────────────────────
     مرادفاتٌ لا قيمٌ ثانية: المكوّنات الجديدة تقرأ `--color-primary`
     والقديمة `--brand-500`، والأصل واحد فلا يتباعدان. */
  --color-primary:       var(--brand-500);
  --color-primary-hover: var(--brand-600);
  --color-primary-soft:  var(--brand-100);
  --color-electric:      var(--brand-400);
  --color-navy:          var(--ink-900);
  --color-navy-900:      var(--brand-900);
  --color-bg:            var(--surface-sunk);
  --color-surface:       var(--surface);
  --color-border:        var(--line);
  --color-success:       var(--ok-500);
  --color-warning:       var(--warn-500);
  --color-danger:        var(--danger-500);
  --color-info:          var(--info-500);

  --neutral-900: var(--ink-900);  --neutral-800: var(--ink-800);
  --neutral-700: var(--ink-700);  --neutral-600: var(--ink-600);
  --neutral-500: var(--ink-500);  --neutral-400: var(--ink-400);
  --neutral-300: var(--ink-300);  --neutral-200: var(--ink-200);
  --neutral-100: var(--ink-100);  --neutral-50:  var(--ink-50);
}

/* الخطوط — مستضافة ذاتيًا. `swap` كي لا يبقى النص غير مرئي أثناء التحميل.
   والقاهرة ملفٌ متغيّرٌ واحد لكل نطاق: `font-weight: 400 800` تعني أن
   المتصفّح يشتقّ كل وزنٍ بينهما من نفس الملف. */
@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-var-arabic.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                 U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-var-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Almarai";
  src: url("/fonts/almarai-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Almarai";
  src: url("/fonts/almarai-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Almarai";
  src: url("/fonts/almarai-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* خطّا «تشغيل» (v5) — Alexandria للنصّ والأعمدة، وChanga للعناوين والرقم الواقف وحده.
   مستضافان ذاتيًّا (OFL · Google Fonts)، ملفٌّ متغيّرٌ لكل نطاق. */
@font-face {
  font-family: "Alexandria";
  src: url("/fonts/alexandria-var-arabic.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                 U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Alexandria";
  src: url("/fonts/alexandria-var-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Changa";
  src: url("/fonts/changa-var-arabic.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                 U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Changa";
  src: url("/fonts/changa-var-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── «تشغيل» يحكم أسطحَ الإدارة والدخول والمنصّة والوردية — وخطّاه معه ──
   والأعمدةُ الرقميّة (`.mono` · `.num`) على Alexandria لا Changa: أرقامُ Changa
   متناسبةُ العرض (قِيس: «1111» ٧٧px و«0000» ١٠٤px)، فعمودُ مبالغ بها لا يُحاذى. */
[data-surface="admin"],
[data-surface="platform"],
[data-surface="auth"],
[data-surface="kds"],
[data-surface="host"] {
  --font: "Alexandria", "Cairo", "Tajawal", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --font-display: "Changa", "Alexandria", "Cairo", ui-sans-serif, system-ui, sans-serif;
  --mono: "Alexandria", "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
}

/* ── إعادة ضبط ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* العناوين: ٧٠٠ للكبيرين و٦٠٠ للصغيرين كما في §٠٧ — وكان الكل ٨٠٠.
   والوزن الأثقل في العربي يسدّ عيون الحروف عند ١٨px وأقل، فيُقرأ العنوان
   كتلةً لا كلمات. ولا `letter-spacing` سالب: العربي متّصلٌ أصلًا، وتضييقه
   يلصق الحروف. الأرقام اللاتينية تأخذ تضييقها في ملف السطح حيث تُعرض. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

h1 { font-size: var(--text-h1); line-height: calc(var(--lh-h1) / var(--text-h1)); }
h2 { font-size: var(--text-h2); line-height: calc(var(--lh-h2) / var(--text-h2)); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-semi); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-semi); }

p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
/* **ولا ميلَ من ورقة المتصفّح** (جولة الاستخدام الثانية ٢٠٢٦-١٠-٠٤): هذه الستّةُ مائلةٌ فيها افتراضًا
   (قسمُ العرض في مواصفة HTML)، والعربيةُ بلا خطٍّ مائلٍ حقيقيّ فيُميل المتصفّحُ الحروفَ بنفسه فتخرج
   مشوّهة. و`:where` بلا وزن: صنفٌ يعيد ضبطَ عنصرٍ منها يغلبها كما كان. */
:where(address, cite, dfn, em, i, var) { font-style: normal; }

/* علامةُ وَصل المجسَّمة (v4) — صورةٌ تملأ بلاطتَها: `.mk` في الشريطين
   وشاشة الدخول، و`.brand-mk` في التسويق. الأرضيةُ السوداءُ المتوهّجةُ من
   الصورة نفسِها، فالبلاطةُ لوحٌ داكنٌ لامعٌ مهما كانت خلفيّتُها. */
.wasl-mark { display: block; object-fit: cover; border-radius: inherit; }
.mk > .wasl-mark, .brand-mk > .wasl-mark { inline-size: 100%; block-size: 100%; }

/* الأرقام لاتينية بخطٍّ أحاديّ حتى في نصٍّ عربي: العمود المحاذي يُقرأ
   بالمسح لا بالقراءة، والعرض المتغيّر يكسر المحاذاة. */
.mono, .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* **الأيقوناتُ الاتجاهيّة مرسومةٌ للعربيّة وتنعكس في الإنجليزية** (PR 1b): «السابق» بسهمٍ يمينًا لأن
   البدايةَ يمين، فيشير في `dir="ltr"` إلى عكس معناه. هنا لا في `ui.css` لأن `<x-ui.icon>` يُرسَم على
   كل سطح — سطحُ الضيف وسطحُ الطاقم يحمّلان `tokens.css` ولا يحمّلان `ui.css`. */
[dir="ltr"] .ic-dir { transform: scaleX(-1); }

/* التركيز مرئيٌّ دائمًا — لوحة المفاتيح ليست حالةً استثنائية. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ═══════════════════════════════════════════════════════════════════════
   حالة الانتظار — §٥٦ يعدّ الميزة ناقصةً بدونها.

   ضغطةٌ بلا أثرٍ مرئي تُقرأ «ما اشتغلتش»، فتُضغط ثانيةً وثالثة. على شبكة
   مطعمٍ بطيئة هذا ليس إزعاجًا: الكاشير يضغط «اقبض» مرّتين، والنادل يبعت
   نفس التذكرة للمطبخ مرّتين.

   **آليةٌ واحدة لكل الأسطح** لا `wire:loading` منثورًا في ٦٥ قالبًا: ما
   يُكتب في كل قالبٍ على حدة يُنسى في القالب السادس والستين، ثم في كل
   قالبٍ جديد بعده. `busy.js` يعلّم العنصر الذي ضُغط، وهذه القواعد تعرضه.
   ═══════════════════════════════════════════════════════════════════════ */

/* الشريط العلوي: الصفحة كلها تنتظر ردًّا. */
.wasl-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--fast) ease;
}
.wasl-bar > span {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: var(--brand-500);
  transition: inline-size var(--base) ease-out;
}
[data-wasl-wait] .wasl-bar { opacity: 1; }
[data-wasl-wait] .wasl-bar > span { inline-size: 92%; }

/* العنصر المضغوط: دوّارةٌ مكانه، ولا تُقبل ضغطةٌ ثانية عليه. */
[data-wasl-busy] {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
[data-wasl-busy]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 15px;
  block-size: 15px;
  margin-block-start: -8px;
  margin-inline-start: -8px;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  color: var(--ink-600);
  animation: wasl-spin .6s linear infinite;
}
@keyframes wasl-spin { to { transform: rotate(360deg); } }

/* من يطلب تقليل الحركة يحصل على الصفحة بلا حركةٍ واحدة — لا نسخةً أبطأ. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* والدوّارة تصير حلقةً ثابتة: القاعدة أعلاه توقف دورانها، فتبقى
     نصفَ حلقةٍ مبتورة بلا هذا. الحالة تصل بالشكل لا بالحركة. */
  [data-wasl-busy]::after {
    border-block-start-color: currentColor;
    opacity: .55;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   الشريط الجانبي — رموزُه هنا لأن **قيمته تفرّق بين لوحتين**.

   الافتراض أبيض: لوحة المطعم شريطها فاتحٌ نظيف كما في مرجع الاتجاه.
   ولوحة المنصّة تقلبه كُحليًّا — وهذا ليس ذوقًا:

   لوحة المنصّة تعدّل أسعارًا وحدودًا وأعلامًا **تسري على كل المطاعم**،
   ولوحة المطعم تعدّل مطعمًا واحدًا. والخلط بينهما تغييرٌ عالميّ يظنّه
   صاحبه محليًّا. كان الفارق قبل v3 **سِمةً داكنةً كاملة** للمنصّة، وقد
   طلب الاتجاه الجديد سطحًا فاتحًا في كل مكان؛ فبقيت الإشارة ونُقلت إلى
   حيث لا تُفقَد: **الشريط نفسه كُحليّ، ونطاقُه مكتوبٌ فيه بالكهرماني،
   وشريطٌ للنطاق في رأس الصفحة**. ثلاث إشاراتٍ إحداها نصٌّ صريح — أقوى من
   لونٍ وحده كان يعمل بالذاكرة العضلية فقط.

   ولذلك لا `prefers-color-scheme` هنا ولا مبدّل سِمة: «فاتح أو داكن بحسب
   الذوق» يُلغي الإشارة، وأوّلُ تعديلٍ يقع في الخطأ يمسّ كل المطاعم.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --rail-bg:        var(--surface);
  --rail-line:      var(--line);
  --rail-ink:       var(--ink-700);   /* نصّ عنصر الملاحة الساكن */
  --rail-ink-quiet: var(--ink-500);   /* عنوان المجموعة والتلميح */
  --rail-ink-loud:  var(--ink-900);   /* العلامة والعنصر الحالي */
  --rail-hover:     var(--surface-alt);
  /* v4 — **العنصرُ الحاليُّ كتلةٌ عنّابيّةٌ مصمتة بحبرٍ أبيض**، لا تعبئةٌ
     هادئة. المرجعُ البصريّ يفعلها والسببُ وظيفيّ: في شريطٍ من عشرين
     بندًا، «أين أنا» يجب أن يُقرأ من الزاوية قبل أن يُقرأ نصّ. وهي
     الكتلةُ المشبعةُ **الوحيدة** في الشريط، فلا تنافس المحتوى. */
  --rail-active-bg: var(--brand-500);
  --rail-active-ink:var(--on-brand);
  --rail-icon:      var(--ink-400);
  --rail-scope:     var(--warn-600);
  --rail-card-line: var(--brand-200);
}

/* الشريطُ الداكنُ إشارةُ نطاق: «أنت في المنصّة، وما تعدّله يسري على كل
   المطاعم». v4 نقلته من الكُحليّ إلى **الأوبسيديان الدافئ** — الوظيفةُ
   (شريطٌ داكنٌ مقابل شريطٍ أبيض) باقية، واللونُ صار من عائلة النظام لا
   ضيفًا عليها. والكهرمانيُّ باقٍ نصًّا للنطاق: ١٠:١ على الأوبسيديان. */
[data-surface="platform"] {
  --rail-bg:        #181719;
  --rail-line:      #2A2628;
  --rail-ink:       #C9C2BC;
  --rail-ink-quiet: #8F8781;
  --rail-ink-loud:  var(--white);
  --rail-hover:     #242124;
  --rail-active-bg: #4A1118;
  --rail-active-ink:#F6D8DC;
  --rail-icon:      #8F8781;
  --rail-scope:     #FBBF24;   /* كهرمانيّ يُقرأ على الأوبسيديان — ١٠:١ */
  --rail-card-line: #3A3436;
}

/* ═══════════════════════════════════════════════════════════════════════
   سطحا المطبخ والمضيف — **لوحةٌ فاتحة على أرضيةٍ داكنة، لا سِمةٌ داكنة.**

   الفرق ليس لفظيًّا: السِمة الداكنة تجعل البطاقة داكنة والنص فاتحًا،
   وشاشة المطبخ عكسها بالضبط — **تذكرةٌ فاتحة على أرضيةٍ داكنة**
   (`design/04 §النطاق`). والأرضية الداكنة غرضها العزل لا الأناقة: تذكرةٌ
   بيضاء على أسود تُقرأ من مترين أبعد مما تُقرأ على رمادي فاتح، وحوافّها
   تُفصَل بلا حدود.

   وبقيّة القيود وظيفية كذلك:
   · **`--touch: 64px`** لا ٤٤ — الزرّ يُضغط بإبهامٍ مبلول لا بمؤشّر.
   · **الحركة صفر.** التذكرة التي تتلاشى تعني احتمال رؤية حالةٍ كاذبة
     لجزءٍ من الثانية، والطاقم يتصرّف على ما رآه. وهذا ليس تفضيلًا
     يُترك لـ`prefers-reduced-motion` — الحارس المطلق في `kds.css`.
   · **الحالات مرفوعة الدرجة**: لونٌ باهت على أرضيةٍ داكنة يُقرأ رماديًّا
     من مترين، فتُفقَد الحالة وهي كل ما في الشاشة.

   والأرضية في v3 كُحليّة (#0B1220) لا بنفسجية-سوداء: سطحٌ واحد في نظامٍ
   واحد — والأرضية أعمق من كُحليّ الشريط كي يُقرأ الشريط فوقها لا فيها.
   ═══════════════════════════════════════════════════════════════════════ */
/* سطح الزبون داكنٌ بقصد (اتجاه «ليل» · `design/04`) — فيعلن `dark`:
   إعلانُ `light` عليه يجعل المتصفّح يرسم شريطَ تمريرٍ فاتحًا على صفحةٍ
   سوداء، ومنتقيَ تاريخٍ أبيضَ في نموذجٍ داكن. */
[data-surface="customer"] { color-scheme: dark; }

[data-surface="kds"],
[data-surface="host"] {
  /* الأرضية وحدها داكنة — الحبر والأسطح تبقى كما في `:root`، فالسِمة
     المعلَنة فاتحةٌ كما في الجذر: التذكرةُ بيضاء وما فيها من حقولٍ فاتح. */
  /* v4: الأرضيةُ أوبسيديان دافئ لا كُحليّ — نفسُ عائلة الشريط الداكن
     وسطح الليل. والتباينُ فوقها يزيد لا ينقص (أعمقُ بقليل). */
  --ground: #131113;

  /* ── حبرُ الأرضية — **دورٌ مستقلٌّ عن حبر الأسطح** ──

     كان النصُّ على الأرضية يستعمل طرفَ السلّم الفاتح مباشرةً
     (`--ink-100..400`)، وهي **نفسُها** حدودُ الحقول والبطاقات على الأسطح
     البيضاء (`--ink-300` هو «حدّ الحقل»). فالرمزُ الواحد يخدم دورين
     متناقضين عند أوّل محاولةِ تفتيحٍ للأرضية: قلبُه يسوّد كلَّ حدّ،
     وإبقاؤه يُخفي كلَّ نصّ. وهو ما ردّه حارسُ التباين مرّتين في المرحلة ١٠.

     فالدورُ يُفصَل: هذه أربعةٌ **للحبر على الأرضية وحدَها**، وتنقلب مع
     السِمة؛ وحدودُ الأسطح تبقى على سلّمها كما هي. */
  --on-ground:        var(--ink-100);   /* عنوانٌ ونصٌّ أساسيّ */
  --on-ground-strong: var(--white);     /* أقوى ما يُقرأ من مترين */
  --on-ground-soft:   var(--ink-200);   /* تسميةٌ وزرٌّ شبحيّ */
  --on-ground-quiet:  var(--ink-400);   /* ثانويٌّ وبيانات */
  --on-ground-line:   var(--ink-700);   /* فاصلٌ على الأرضية */

  /* وعناصرُ التحكّم التي تقف **على الأرضية** (البحث · المسح · الشرائح ·
     مبدّلُ العرض) لها سطحُها هي: داكنٌ على الداكن، ويقلب مع السِمة.
     وهي غيرُ حقول البطاقات البيضاء — تلك على سلّمها كما هي. */
  --on-ground-field:      var(--ink-900);
  --on-ground-field-line: var(--ink-800);

  --touch: 64px;
  --fast: 0s; --base: 0s; --slow: 0s;

  --ok-500:     #16A36A;
  --warn-500:   #F59E0B;
  --info-500:   #3B82F6;
  --danger-500: #EF4444;

  /* درجاتٌ فاتحة **للحبر على الأرضية الداكنة** — لا للأسطح.
     `--danger-500` يُقرأ داكنًا كنصٍّ فوق الأرضية، والدرجة الفاتحة هي ما
     يُقرأ من مترين. وكانت هذه القيم مكتوبةً كاحتياطيٍّ لأسماءٍ غير
     معرَّفة (`var(--danger-300, #ffb4ae)`)، فتعمل ويبدو الاسم صحيحًا. */
  --danger-300: #FCA5A5;
  --danger-400: #F87171;
  --warn-400:   #FBBF24;
}

/* ── سِمةُ أسطح الوردية الفاتحة (المرحلة ١١) ──

   الأرضيةُ تفتح، وحبرُ الأرضية ينقلب معها — ولا يُمَسّ سلّمُ الحدود ولا
   الأسطحُ البيضاء ولا ألوانُ الحالة. وهذا كلُّ ما تحتاجه اللوحةُ الفاتحة
   بعد فصلِ الدور أعلاه.

   و`system` تبقى داكنةً: القرارُ التشغيليّ (تُقرأ من مترين) هو الافتراض،
   والفاتحُ **طلبٌ صريح**. */
:root[data-surface="kds"][data-scheme="light"],
:root[data-surface="host"][data-scheme="light"] {
  /* باردةٌ منذ «تشغيل» الفاتح (٢٠٢٦-١٠-٠٣) — كانت `#ECE7E1` حجرًا دافئًا تحت حبرٍ بارد. */
  --ground: #E7EBF0;

  --on-ground:        var(--ink-900);
  --on-ground-strong: var(--ink-900);
  --on-ground-soft:   var(--ink-700);
  --on-ground-quiet:  var(--ink-600);
  --on-ground-line:   var(--ink-300);
  --on-ground-field:      var(--white);
  --on-ground-field-line: var(--ink-300);

  /* والخطُّ الشعريُّ على الأرضية يُرى: `--ink-200` على أرضيةٍ فاتحة
     يعطي ١٫٠٤ — خطٌّ غيرُ موجود. وهذه القيمةُ تعطي ١٫٤٣ (الأرضيةُ ١٫٣). */
  --line: #BFC7D4;

  /* ودرجاتُ الحالة ترجع إلى ما يُقرأ على فاتح — **على هذه الأرضية لا على الأبيض**
     (٢٠٢٦-١٠-٠٨): `#B45309` تعطي ٥٫٠ على أبيض و٤٫١٦ على `#E7EBF0`، و«منطقة من غير نادل»
     نصٌّ على الأرضية. وهذه ٥٫٩ هنا و٧٫١ على البطاقة. */
  --danger-300: #B91C1C;
  --danger-400: #DC2626;
  --warn-400:   #92400E;
}

/* ── أسطحُ الوردية على «تشغيل» (v5) — **السِمةُ الداكنةُ صارت تُختَم هنا** ──
   كانت التذكرةُ بيضاءَ على أرضيةٍ داكنة، والقالبُ لا يختم `dark` لأن سلّمَ الحبر
   المقلوب كان سيُخفي نصَّها. فصارت الأسطحُ تقرأ `--surface` والتعبئاتُ أدوارًا،
   فختمُ الداكن آمن: التذكرةُ لوحٌ داكنٌ بحبرٍ فاتح (١٥:١)، والأرضيةُ أعمق.
   وحبرُ الأرضية هنا قيمٌ صريحة لا إشاراتٌ إلى السلّم — السلّمُ مقلوبٌ تحته. */
:root[data-surface="kds"][data-scheme="dark"],
:root[data-surface="host"][data-scheme="dark"] {
  --ground: #0B0E13;

  --on-ground:        #E9EEF4;
  --on-ground-strong: #FFFFFF;
  --on-ground-soft:   #CCD5DF;
  --on-ground-quiet:  #8696A8;
  --on-ground-line:   #253040;
  --on-ground-field:      #0D1117;
  --on-ground-field-line: #2E3A4A;

  --danger-300: #FF9E9E;
  --danger-400: #FF7272;
  --warn-400:   #FFCB75;
}

/* ── تاريخُ التأجيل ومحضرُ حلِّه ──

   المرحلةُ ١٠ وصلت **تفضيلَ السِمة** إلى هذه الأسطح: `SetsSurfaceTheme`
   تكتبه في الجلسة، و`staff.blade.php` يعلن `data-theme`/`data-scheme`
   كأسطح الإدارة. فالتفضيلُ يعبر الدخولَ ولا يضيع.

   **ولوحةٌ فاتحةٌ فعليّةٌ لم تُشحن — بدليلٍ لا برأي.** جُرّبت هنا بتبديل
   `--ground` وحدَه، فردّها `design/verify_contrast.py`:

       نصٌّ خفيت على أرضية المحطّة: 1.30 < 4.5  (#D1D5DB على #EEF1F6)

   والسببُ بنيويّ: `--ink-100` و`--ink-300` تخدمان **دورين**: حبرًا فاتحًا
   على الأرضية الداكنة، **وحدودًا على الأسطح البيضاء** (`--ink-300` هو
   «حدّ الحقل»). فقلبُهما للفاتح يسوّد كلَّ حدٍّ في الشاشة، وإبقاؤهما
   يُخفي كلَّ نصٍّ على الأرضية.

   فاللوحةُ الفاتحة تحتاج **فصلَ حبر الأرضية عن حبر الأسطح** — رمزًا
   جديدًا و٢٧ موضعًا تستعمل `var(--white)` حبرًا على الأرضية، عبر خمسة
   أسطحِ ورديةٍ (مطبخ · كاشير · صالة · إكسبو · نقطة بيع) مع إعادةِ إثبات
   التباين لكلٍّ منها. وهو ما يمنعه توجيهُ المرحلة صراحةً («لا معماريّةَ
   سِمةٍ كبيرة»)، فوُثِّق ولم يُنفَّذ.

   **وشُحن في المرحلة ١١ بإذنٍ صريح**، بالتشخيص نفسِه: سبعةُ رموزِ
   `--on-ground-*` أعلاه، و٤٦ إعلانًا أُعيد توجيهُها في `kds.css`
   و`host.css`، وكتلةٌ فاتحةٌ واحدة. ولم يُقلَب سلّمُ `--ink-*`، فحدودُ
   الأسطح البيضاء لم تتحرّك — وهي النقطةُ التي أسقطت المحاولتين.

   وثلاثةُ حرّاسٍ عُلِّموا الحالةَ الثالثة: `sync_tokens.py` يستخرج
   لوحتَي `kds-light`/`host-light`، و`verify_contrast.py` يقيس
   `--on-ground*` بدل `--ink-*` (فتلك لم تعد تُرسَم على الأرضية)،
   و`prove-viewport.py` يمسح المرسومَ كما هو. */

/* ═══════════════════════════════════════════════════════════════════════
   السِمة الفاتحة على «تشغيل» (v5) — **بقرار المالك ٢٠٢٦-١٠-٠٣**

   كان الفاتحُ يحفظ بكسلاتِ v4 العنّابيّة الدافئة («كلُّ دورٍ قيمتُه الفاتحة هي
   الدرجةُ التي كانت تكتبها القاعدة»)، فمن يبدّل بين السِمتين يرى منتجين: داكنٌ
   كهرمانيٌّ بارد، وفاتحٌ عنّابيٌّ دافئ. فصار للفاتح قاعدةُ الداكن نفسُها —
       · الكهرمانيّ = الفعلُ الأساسيّ الواحد، **تعبئةً بحبرٍ داكن** (٩٫١) كما في الداكن؛
       · الأزرقُ = بياناتٌ وروابط؛ والأخضرُ سليمٌ والمرجانيُّ مشكلة؛
       · و«أين أنا» والاختيارُ **محايدان**: كتلةُ حبرٍ داكنةٌ بنصٍّ أبيض (١٨).
   والفرقُ الوحيد الذي يفرضه الضوء: الكهرمانيُّ لا يُكتب نصًّا ولا حدًّا على الأبيض
   (٢:١)، فلنصّ التمييز وحدّه دوران (`--brand-ink` بنّيٌّ ٦٫٢ · `--brand-line` ٤٫٢).

   **ونطاقُها أسطحُ `data-scheme` وحدها** (الإدارة · الدخول · المنصّة · الوردية):
   صفحةُ البيع وسطحُ الزبون بلا سِمةٍ مختومة فيبقيان على لوحتيهما. والفاحصان
   (`verify_live_surfaces` · `sync_tokens`) يطويان هذه الكتلة عن غير تلك الأسطح.
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-scheme="light"] {
  /* الأسطح والحبر — باردان (٢١٠°) لا دافئان، كالداكن مقلوبًا. و٥٠٠ أدنى ما يُقرأ:
     ٥٫٧ على اللوح و٥٫٢ على الأرضية. */
  --surface:       #FFFFFF;
  --surface-sunk:  #F3F5F8;
  --surface-alt:   #F7F9FB;
  --surface-hover: #EEF2F6;
  --surface-brand: #E9EEF4;   /* الاختيار — محايدٌ لا كهرمانيّ */

  --ink-900: #0F1720;
  --ink-800: #1D2733;
  --ink-700: #2F3B49;
  --ink-600: #465363;
  --ink-500: #5B6878;
  --ink-400: #93A0AE;   /* زخرفةٌ لا نصّ */
  --ink-300: #CBD3DC;
  --ink-200: #E1E6EC;   /* حدُّ البطاقة */
  --ink-100: #EDF1F5;
  --ink-50:  #F5F7FA;   /* رأسُ الجدول */
  --line-field: #7E8A98; /* ٣٫٥ على اللوح */

  /* العلامةُ = الفعل: تعبئةٌ كهرمانيّةٌ بحبرٍ داكن — ٩٫١ ثم ٧٫٧ عند التمرير ثم ٦٫٥
     عند الضغط. و٨٠٠–٩٠٠ بنّيٌّ داكنٌ يُكتب على الفاتح وعلى الكهرمانيّ نفسه، و١٠٠/٥٠
     محايدان كالداكن: الاختيارُ ليس فعلًا. و٣٠٠/٤٠٠ لحدودِ التمرير وحدها. */
  --on-brand:  #1B1306;
  --brand-900: #3D2705;
  --brand-850: #4A3006;
  --brand-800: #5A3A08;
  --brand-700: #D8870F;   /* المضغوط */
  --brand-600: #E8961A;   /* التمرير فوق الأساسي */
  --brand-500: #F5A623;   /* الأساسي — الفعل */
  --brand-400: #C98A1C;
  --brand-300: #E3AA45;
  --brand-200: #FCE3B8;
  --brand-100: #E9EEF4;
  --brand-50:  #F3F6F9;
  --brand-ink:  #8F5200;  /* السعرُ المميَّز والإجماليّ — ٦٫٢ على اللوح */
  --brand-line: #B26A00;  /* حلقةُ التركيز وخطُّ «جديد» — ٤٫٢ */
  --focus: var(--brand-line);
  --link:       #1A63A8;  /* الرابطُ بيانٌ لا فعل — ٦٫٢ */
  --link-hover: #124D85;
  --selected-ink: var(--ink-900);
  --selected-ink-strong: var(--ink-900);

  /* البطلُ في المبيان أزرقُ كالداكن، والقاعدةُ الهادئة كما هي. */
  --chart-hero-700:    #124D85;
  --chart-hero-600:    #1A63A8;
  --chart-hero-500:    #2672C2;
  --chart-hero-400:    #5C9BE0;
  --chart-hero-300:    #B9D5F2;
  --chart-hero-glow:   rgba(38, 114, 194, .26);
  --chart-hero-shadow: rgba(18, 77, 133, .18);
  --spark:      var(--chart-hero-500);
  --spark-soft: var(--chart-hero-400);
  /* ظِلٌّ محايد: يقع تحت «أين أنا» الداكنة وشعارِ الشريط لا تحت الفعل وحده —
     ووهجٌ كهرمانيٌّ تحت كتلةِ حبرٍ يقول «فعل» عن شيءٍ ليس فعلًا. */
  --shadow-brand: 0 6px 16px rgba(15, 23, 32, .14);

  /* الشريطُ أبيض، و«أين أنا» كتلةُ حبرٍ داكنةٌ بنصٍّ أبيض — الكهرمانيُّ للفعل وحده. */
  --rail-active-bg: var(--ink-900);
  --rail-active-ink:#FFFFFF;
  --rail-card-line: var(--ink-200);

  /* الكتلُ «الثابتة» ألواحٌ محايدةٌ داكنة بحبرٍ أبيض — هي نفسُها في السِمتين. */
  --brand-fixed-950: #121820;
  --brand-fixed-900: #18202A;
  --brand-fixed-600: #1E2733;
  --brand-fixed-500: #2A3644;
  --on-brand-fixed:  #FFFFFF;

  /* الوردية: الفعلُ كهرمانيٌّ بحبرٍ داكن، والرأسُ الجاري أزرقُ (٧٫٢)، والمتأخّرةُ
     مرجانيّة، و«مباشر» أخضر. والاختيارُ حبرٌ داكنٌ بنصٍّ أبيض. */
  --act:          var(--brand-500);
  --on-act:       var(--on-brand);
  --th-active-bg: #DCEBFA;
  --th-active-fg: #0E4C85;
  --late-line:    var(--danger-500);
  --live-dot:     var(--ok-500);
  --pick-line:    var(--ink-900);
  --pick-bg:      var(--ink-900);
  --pick-ink:     #FFFFFF;
  --floor-live:   var(--info-500);
  --floor-seated: var(--info-500);
  --floor-clean:  var(--ink-500);

  /* مشهدُ الصالة: غرفةٌ من خرسانةٍ باردة لا حجرٍ دافئ، والمشغولةُ زرقاءُ بحبرٍ أبيض (٤٫٩)
     كما في الداكن، والأداةُ المختارةُ حبرٌ داكن. */
  --twin-bg:           #E9EDF2;
  --twin-panel-line:   #DDE3EA;
  --twin-ground:       #E1E6EC;
  --twin-ground-edge:  #D3DAE2;
  --twin-wall:         #C3CCD6;
  --twin-wall-top:     #D6DDE5;
  --twin-vignette:     rgba(20, 32, 46, .12);
  --twin-shadow:       rgba(20, 32, 46, .34);
  --twin-cast:         rgba(20, 32, 46, .26);
  --twin-fixture:      #97A3B1;
  --twin-fixture-top:  #B6C0CB;
  --twin-bar-top:      #A7B2BE;
  --twin-metal:        #7C8896;
  --twin-chair:        #6B7787;
  --twin-chair-side:   #535E6C;
  --twin-top-side:     #C3CCD6;
  --twin-muted-side:   #8C97A4;
  --twin-ink:          #1D2733;
  --twin-ink-quiet:    #536070;   /* ٥٫١ على أرضية الغرفة */
  --twin-table-ink:    var(--ink-900);
  --twin-tool-ink:     var(--ink-900);
  --twin-tool-on-bg:   var(--ink-900);
  --twin-tool-on-ink:  #FFFFFF;
  --twin-busy:           #2672C2;
  --twin-busy-ink:       #FFFFFF;
  --twin-busy-side:      #1B5899;
  --twin-busy-seat:      #5C9BE0;
  --twin-busy-seat-side: #2672C2;
  --twin-glow-busy:      rgba(38, 114, 194, .45);
  --twin-glow-bill:      rgba(245, 166, 35, .55);
}

/* والمنصّةُ تبقى شريطًا داكنًا — **إشارةُ النطاق لا ذوق** — باردًا الآن، وعنصرُها
   الحاليّ كهرمانيٌّ كما في الداكن (٩٫٥). بلا `:root` في أوّل المحدِّد: وزنُه يساوي
   الكتلة أعلاه وترتيبُه بعدها فيغلبها، ولا يلتقطه تعبيرُ الجذر في الفاحصين. */
[data-surface="platform"][data-scheme="light"] {
  --rail-bg:        #0F141B;
  --rail-line:      #1E2630;
  --rail-ink:       #C2CDD9;
  --rail-ink-quiet: #8392A4;
  --rail-ink-loud:  #FFFFFF;
  --rail-hover:     #18202A;
  --rail-active-bg: #3A2B08;
  --rail-active-ink:#FCD34D;
  --rail-icon:      #8392A4;
  --rail-scope:     #FCD34D;
  --rail-card-line: #2A3644;
}

/* ═══════════════════════════════════════════════════════════════════════
   السِمة الداكنة — **أسطحُ الإدارة وحدها، وبإشارةِ نطاقٍ محفوظة.**

   ── الاعتراضُ الذي كان مكتوبًا في §الشريط أعلاه، وجوابُه ──

   قيل هناك: «لا مبدّلَ سِمة — فاتحٌ أو داكنٌ بحسب الذوق يُلغي الإشارة».
   والإشارةُ هي ما يفرّق لوحةَ المنصّة (تعدّل أسعارًا وحدودًا **تسري على
   كل المطاعم**) عن لوحة المطعم الواحد؛ وكانت شريطًا كُحليًّا مقابل شريطٍ
   أبيض. والاعتراضُ صحيحٌ حرفيًّا: على أرضيةٍ داكنة يصير الشريطان داكنَين
   ويذوب الفرق.

   **فنُقلت الإشارةُ إلى ما لا تبتلعه السِمة: الصبغة.** على الداكن يصير
   عنصرُ الملاحة الحالي **كهرمانيًّا** في المنصّة وأزرقَ في لوحة المطعم —
   والكهرمانيّ لا يظهر في لوحة المطعم في أيّ حال، فرؤيتُه وحدها تقول
   «أنت في المنصّة». والنصُّ الصريح («نطاق: المنصّة») وشريطُ النطاق في
   الرأس باقيان كما هما: ثلاث إشاراتٍ كما كانت، إحداها نصّ.

   ── ولماذا كتلةٌ واحدة بلا `prefers-color-scheme` ──

   «حسب الجهاز» يحلّها سطرُ جافاسكربت في `<head>` إلى `data-scheme`
   (`components/theme-head`). والبديلُ — كتلةٌ ثانية داخل استعلامِ وسائط —
   نسخةٌ ثانية من كلّ قيمةٍ هنا، وهو ما تمنعه أوّلُ فقرةٍ في هذا الملفّ.

   ── وما لا يدخل ──

   `kds` و`host` أرضيتُهما داكنةٌ **بقرارٍ تشغيليّ** لا بذوق (تُقرأ من
   مترين)، وسطحُ الزبون «ليل» داكنٌ بقصد، والسطحُ التسويقيّ صفحةُ بيعٍ
   لها لوحتُها. فلا `data-scheme` على أيٍّ منها ولا مبدّل.

   ── والسلّمُ يُقلَب لا يُستبدَل ──

   `--ink-900` عنوانٌ و`--ink-50` رأسُ جدول: الاسمان دورٌ لا إضاءة، فقلبُ
   السلّم يبقي كلَّ قاعدةٍ في النظام صحيحةً بلا تعديل. وما شذّ عن ذلك
   موضعان صُحّحا في الأوراق: خلفيةٌ مكتوبةٌ `--white` (وهي `--surface`)،
   ونصٌّ أبيضُ فوق لون العلامة (وهو `--on-brand`).
   ═══════════════════════════════════════════════════════════════════════ */
/* **ومنذ «تشغيل» (v5) تصل أسطحُ الوردية إلى هنا أيضًا.** كانت لا تُختَم
   بالداكن لأن تذكرتَها مكتوبةٌ `var(--white)` والسلّمُ المقلوبُ يُخفي نصَّها؛
   فصارت أسطحُها `--surface` وتعبئاتُها أدوارًا، وكتلتُها الداكنةُ الخاصّة
   (`:root[data-surface="kds"][data-scheme="dark"]` في قسم الوردية أعلى) تضع أرضيتَها وحبرَ
   أرضيتها فوق هذه. والدرسُ القديم باقٍ: لا استثناءَ بـ`:not()` — جُرِّب
   فسمّم جدولَ الرموز (الفاحصُ يجد `[data-surface="kds"]` **داخل** `:not(…)`). */
:root[data-scheme="dark"] {
  color-scheme: dark;

  /* ── v5 «تشغيل» (٢٠٢٦-١٠-٠١) — **داكنٌ باردٌ يُقرأ تحت أيّ إضاءة** ──
     اختاره المالك من ثلاثة اتجاهات (كانفاس «وَصل من الصفر»)، وصار الافتراضَ
     لأسطح الإدارة والدخول والمنصّة (`SetsSurfaceTheme`). والقاعدةُ التي
     تحكمه: **لكلّ لونٍ معنى واحد** —
       · الكهرمانيّ (`--brand-*`) = الفعلُ الأساسيّ الواحد وما ينتظر إنسانًا؛
       · الأزرقُ (`--link` و`--info-*` و`--chart-*`) = بياناتٌ حيّةٌ وروابط؛
       · الأخضرُ تمّ أو سليم، والمرجانيُّ مشكلة — ولا لونَ وحده أبدًا؛
       · و«أين أنا» والاختيارُ **محايدان** (`--rail-active-*` و`--brand-100`).
     الأسطحُ بلا ظلّ تقريبًا: العمقُ من درجة اللوح والخطّ الفاصل. */
  --surface:       #11161D;   /* اللوح */
  --surface-sunk:  #0B0E13;   /* الأرضية */
  --surface-alt:   #18202A;   /* المرفوع داخل اللوح */
  --surface-hover: #1C2530;
  --surface-brand: #1E2833;   /* الاختيار — محايدٌ لا كهرمانيّ */

  /* الحبر — باردٌ مقلوب. و٥٠٠ أدنى ما يُقرأ: ٦٫٠ على اللوح و٦٫٤ على الأرضية. */
  --ink-900: #F2F6FA;
  --ink-800: #E3E9F0;
  --ink-700: #CCD5DF;
  --ink-600: #B0BCCA;   /* النصّ العاديّ — ٩٫٤ على اللوح */
  --ink-500: #8696A8;   /* الوقت والملاحظات وحدهما */
  --ink-400: #566477;   /* زخرفةٌ لا نصّ */
  --ink-300: #364252;
  --ink-200: #253040;   /* حدُّ اللوح */
  --ink-100: #1B2430;
  --ink-50:  #151C25;   /* رأسُ الجدول */

  /* حدُّ الحقل يبقى قاعدتَه: ٣:١ على اللوح (٣٫٤). */
  --line-field: #5E6C80;

  /* العلامةُ = الفعل: كهرمانيٌّ بحبرٍ داكن (١٠٫٥). والأفتحُ أقوى كما كان.
     و١٠٠/٥٠ (الاختيارُ والظِّلّ الرقيق) **محايدان**: الاختيارُ ليس فعلًا. */
  --on-brand:  #1B1306;
  --brand-700: #FFD089;   /* المضغوط */
  --brand-600: #FFC266;   /* التمرير فوق الأساسي */
  --brand-500: #FFB547;   /* الأساسي — الفعل */
  --brand-400: #E9A23A;
  --brand-300: #B57A22;
  --brand-200: #5A4318;
  --brand-100: #1E2833;
  --brand-50:  #18202A;
  --link:      #62C3FF;   /* الرابطُ بيانٌ لا فعل — ٩٫٣ على اللوح */
  --link-hover: #8AD3FF;
  --selected-ink: var(--ink-900);
  --selected-ink-strong: var(--ink-900);

  --ok-500:      #52D69E;
  --ok-600:      #7FE3B6;
  --ok-tint:     #0F2A21;
  --ok-line:     #1E5A43;
  --warn-500:    #FFB547;
  --warn-600:    #FFCB75;
  --warn-tint:   #2B2110;
  --warn-line:   #5C4519;
  --info-500:    #62C3FF;
  --info-600:    #94D6FF;
  --info-tint:   #0F2436;
  --info-line:   #1E4A6B;
  --danger-500:  #FF7272;
  --danger-600:  #FF9E9E;
  --danger-tint: #321619;
  --danger-line: #6B2B2F;

  /* البيانات: البطلُ أزرقُ سماويّ (المنحنى والذروة وآخرُ قراءة)، والقاعدةُ
     الهادئة فولاذٌ داكن — فالعينُ تجد الضوءَ حيث الخبر. والهبوطُ مرجانيّ. */
  --chart-ink:      #E6F4FF;
  --chart-700:      #2A86C7;
  --chart-600:      #3FA9EE;
  --chart-500:      #62C3FF;
  --chart-400:      #8AD3FF;
  --chart-300:      #2E4A63;
  --chart-200:      #233649;
  --chart-100:      #1A2836;
  --chart-50:       #141F2A;
  --chart-face:       var(--chart-200);
  --chart-face-top:   #2E4A63;
  --chart-face-side:  #18242F;
  --chart-hover:      var(--chart-600);
  --chart-hover-top:  #6CC0F5;
  --chart-hover-side: #2A7DB8;
  --chart-peak:       var(--chart-500);
  --chart-peak-top:   #A9DFFF;
  --chart-peak-side:  var(--chart-700);
  --chart-glow:     rgba(98, 195, 255, .32);
  --chart-shadow:   rgba(0, 0, 0, .55);
  --chart-grid:     rgba(160, 190, 225, .09);
  --chart-emphasis: var(--danger-500);
  --chart-hero-700:    #3FA9EE;
  --chart-hero-600:    #8AD3FF;
  --chart-hero-500:    #62C3FF;
  --chart-hero-400:    #A9DFFF;
  --chart-hero-300:    #1F4A68;
  --chart-hero-glow:   rgba(98, 195, 255, .30);
  --chart-hero-shadow: rgba(0, 0, 0, .55);

  --slice-1: var(--chart-hero-500);
  --slice-2: #A9DFFF;
  --slice-3: var(--chart-600);
  --slice-4: var(--chart-700);
  --slice-5: #1F5A80;
  --slice-rest: var(--ink-300);
  --slice-track: var(--ink-100);

  /* بلا ظلٍّ تحت اللوح — الخطُّ يكفي؛ والظلُّ للطبقات الطافية وحدها. */
  --shadow-xs: 0 0 0 transparent;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .40),
               0 8px 20px rgba(0, 0, 0, .44);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, .44),
               0 24px 48px rgba(0, 0, 0, .55);
  --shadow-brand: 0 10px 26px -12px rgba(255, 181, 71, .55);

  /* الشريط أعمقُ من الأرضية، و«أين أنا» كتلةٌ محايدةٌ بحبرٍ أبيض (١٥:١) —
     الكهرمانيُّ محجوزٌ للفعل، وفي المنصّة وحدها لإشارة النطاق (تحت). */
  --rail-bg:        #080A0E;
  --rail-line:      #1A222C;
  --rail-ink:       #C2CDD9;
  --rail-ink-quiet: #8392A4;
  --rail-ink-loud:  #F2F6FA;
  --rail-hover:     #121820;
  --rail-active-bg: #1E2733;
  --rail-active-ink:#FFFFFF;
  --rail-icon:      #8392A4;
  --rail-scope:     var(--warn-600);
  --rail-card-line: #1E2733;

  /* الكتلُ «الثابتة» (بطاقةُ قدم الشريط وعدّادُ «يحتاجك» وشارةُ الرتبة والاختيارُ
     في التقارير) كانت عنّابيّةً في السِمتين؛ على «تشغيل» ألواحٌ محايدةٌ مرفوعة
     بحبرٍ أبيض — الاختيارُ ليس فعلًا. */
  --brand-fixed-950: #121820;
  --brand-fixed-900: #18202A;
  --brand-fixed-600: #1E2733;
  --brand-fixed-500: #2A3644;
  --on-brand-fixed:  #FFFFFF;

  --spark:      var(--chart-hero-500);
  --spark-soft: var(--chart-hero-400);

  /* مشهدُ الصالة: غرفةٌ باردةٌ داكنة على لوحٍ داكن، والطاولاتُ بلون حالتها. */
  --twin-bg:           #0E131A;
  --twin-panel:        rgba(17, 22, 29, .94);
  --twin-panel-line:   #253040;
  --twin-ground:       #18212C;
  --twin-ground-edge:  #1E2935;
  --twin-wall:         #2A3644;
  --twin-wall-top:     #344252;
  --twin-vignette:     rgba(0, 0, 0, .35);
  --twin-shadow:       rgba(0, 0, 0, .55);
  --twin-cast:         rgba(0, 0, 0, .45);
  --twin-fixture:      #2A3442;
  --twin-fixture-top:  #3A4859;
  --twin-bar-top:      #44546A;
  --twin-metal:        #566477;
  --twin-plant:        #2F8F62;
  --twin-plant-core:   #1F6A47;
  --twin-chair:        #4A5A6E;
  --twin-chair-side:   #364252;
  --twin-top-side:     #AEB9C6;
  --twin-muted-side:   #566477;
  --twin-ink:          #E9EEF4;
  --twin-ink-quiet:    #93A1B2;
  --twin-glow-busy:    rgba(98, 195, 255, .55);
  --twin-glow-bill:    rgba(255, 181, 71, .55);
  --twin-glow-off:     rgba(255, 114, 114, .50);
  --twin-table-ink:      #11161D;
  --twin-busy:           #62C3FF;
  /* الوردية على «تشغيل»: الفعلُ كهرمانيّ، والرأسُ الجاري أزرقُ داكن (٨٫٤)،
     والتعبئاتُ الصلبةُ درجاتٌ داكنةٌ يُقرأ الأبيضُ عليها (٥٫٠ ← ٦٫٥). */
  --act:          var(--brand-500);
  --on-act:       var(--on-brand);
  --th-active-bg: #16324A;
  --th-active-fg: #94D6FF;
  --ok-fill:      #047857;
  --warn-fill:    #B45309;
  --danger-fill:  #B91C1C;
  --late-line:    var(--danger-500);   /* المتأخّرةُ مشكلةٌ لا انتظار — مرجانيّ */
  --live-dot:     var(--ok-500);       /* «مباشر» سليمٌ — أخضر */
  /* المختارُ أبيضُ الحبر بحبرِ الأرضية فوقه (١٨) — «أين أنا» ليس فعلًا،
     والكهرمانيُّ هنا لمن ينتظر إنسانًا وحده. */
  --pick-line:    var(--ink-900);
  --pick-bg:      var(--ink-900);
  --pick-ink:     var(--surface-sunk);
  /* المشغولةُ زرقاء (بيانٌ حيّ) كما في المشهد، و«مستنيين الحساب» تبقى
     كهرمانيّةً (`warn`) — كانتا لونًا واحدًا. والتنضيفُ رماديٌّ هادئ: لا
     مشكلةَ ولا زبونَ ينتظر. */
  --floor-live:   var(--info-500);
  --floor-seated: var(--info-500);
  --floor-clean:  var(--ink-600);
  --twin-busy-ink:       #06121C;
  --twin-busy-side:      #2A86C7;
  --twin-busy-seat:      #3FA9EE;
  --twin-busy-seat-side: #1F6EA6;
  --twin-tool-bg:        #18202A;
  --twin-tool-ink:       #E9EEF4;
  --twin-tool-on-bg:     #E9EEF4;
  --twin-tool-on-ink:    #11161D;
}

/* إشارةُ النطاق على الداكن — **الصبغةُ هي الفارق**. الكهرمانيُّ لا يظهر
   في لوحة المطعم في أيّ حال، فعنصرُ ملاحةٍ كهرمانيٌّ يقول «المنصّة» قبل
   أن يُقرأ النصّ. وبلا `:root` في أوّل المحدِّد: وزنُه حينئذٍ يساوي وزنَ
   الكتلة أعلاه وترتيبُه بعدها، وهو ما يجعله يغلبها. */
[data-surface="platform"][data-scheme="dark"] {
  --rail-bg:        #050608;
  --rail-line:      #1A1E24;
  --rail-active-bg: #3A2B08;
  --rail-active-ink:#FCD34D;
  --rail-scope:     #FCD34D;
  --rail-card-line: #3A3436;
}

/* ═══════════════════════════════════════════════════════════════════════
   لوحةُ كاشير الكاونتر — المرحلة ١٢ · وهويّةُ «بلاك كينج» — المرحلة ١٢٫١

   المعمارُ معمارُ المرحلة ١٢ نفسُه بلا حرف: محدِّدُ صنفٍ `.pos-v11` لا
   يلتقطه بُناةُ جداول الفاحصين، والبادئةُ `--pos-*` لا تلمس دورًا مقيسًا،
   والتباينُ يُثبَت في متصفّحٍ على الشاشة الحيّة (تقريرا ١٢ و١٢٫١).

   **والمرحلة ١٢٫١ بدّلت القيمَ لا القواعد**: هويّة «بلاك كينج» — كحليٌّ
   قريبُ السواد (لا أسودَ صافيًا)، أزرقٌ نيونيٌّ للفعل والاختيار والتبئير،
   وذهبُ العلامة (`--gold-*` القائم) لِمَا هو مميَّزٌ وحدَه، وعمقٌ خفيضٌ
   وزجاجٌ انتقائيّ. **كلُّ زوجٍ أدناه حُسب قبل أن يُكتب** (≥ ٤٫٥ للنصّ)،
   وأُعيد قياسُه مرسومًا بالسِمتين.

   والافتراضُ (بلا ختمِ سِمة) هو الداكن — هويّةُ «بلاك كينج» الأولى —
   والفاتحُ طلبٌ صريحٌ يختمه القالبُ `data-scheme="light"`، وليس قلبًا
   آليًّا: أرضيةٌ محايدةٌ باردةٌ هادئةٌ بلهجةٍ زرقاءَ مقيَّدة.
   ═══════════════════════════════════════════════════════════════════════ */
.pos-v11 {
  /* «تشغيل» (v5 · ٢٠٢٦-١٠-٠١) — **القيمُ وحدها تغيّرت مرّةً ثالثة** كما بدّلتها
     ١٢٫١: فولاذٌ داكنٌ باردٌ بدل الكُحليّ، والفعلُ الواحدُ كهرمانيٌّ بحبرٍ داكن
     (١٠٫٥)، والاختيارُ محايدٌ بحبرٍ أبيض — الكهرمانيُّ محجوزٌ للفعل. والأزرقُ
     للبيانات وحدها (الهالة). كلُّ زوجٍ نصّيٍّ ≥ ٤٫٥ محسوبٌ قبل الكتابة. */
  /* الأساس: كحليٌّ قريبُ السواد، وفصلُ الأسطح نغميٌّ خفيض — الحدُّ
     والظلُّ يكملان ما لا تحمله النغمة. */
  --pos-bg:          #0B0E13;
  --pos-sunk:        #0D1117;   /* الحقولُ الغائرة */
  --pos-surface:     #11161D;   /* لوحُ المنتجات */
  --pos-surface-2:   #18202A;   /* بطاقةُ الدفع والأوراق */
  --pos-card:        #11161D;   /* بطاقةُ الصنف — سطحُها هي (١٢٫١) */
  --pos-card-line:   #1F2935;
  --pos-line:        #2E3A4A;   /* حدُّ حالةٍ أو حقل */
  --pos-line-soft:   #18202A;
  --pos-ink:         #E9EEF4;   /* لا أبيضَ صافيًا */
  --pos-ink-2:       #B0BCCA;
  --pos-muted:       #8696A8;   /* ≥ ٤٫٥ على الغائر والسطح معًا — محسوب */
  /* حبرُ الأرضية دورٌ مفصول — السلّةُ تجلس على الأرضية فحبرُها أهدأ. */
  --pos-gink:        #CCD5DF;
  --pos-gink-2:      #93A1B2;
  --pos-gline:       #18202A;
  /* الكهرمانيّ («تشغيل»): الفعلُ الأساسيُّ وتوهّجُه — لا أكثر؛ والاختيارُ
     محايد (`--pos-selected` وأدوارُ اللسان والملاحة أدناه). */
  --pos-primary:     #FFB547;
  --pos-primary-ink: #1B1306;
  --pos-selected:    #1E2733;
  --pos-selected-ink:#FFFFFF;
  /* اللسانُ المختارُ والملاحةُ المختارة محايدان على «تشغيل»: شريحةٌ
     بيضاءُ كالنموذج المعتمد، وقرصٌ مرفوعٌ بلا وهج — الكهرمانيُّ للدفع. */
  --pos-tab-bg:      #E9EEF4;
  --pos-tab-ink:     #0B0E13;
  --pos-tab-mark:    0 0 0 0 transparent;
  --pos-tab-glow:    0 0 0 0 transparent;
  --pos-nav-on:      var(--pos-selected);
  --pos-nav-on-ink:  var(--pos-selected-ink);
  --pos-nav-sheen:   none;
  --pos-nav-glow:    none;
  /* الذهبُ لكنةُ الفخامة — نادرٌ بقصد: تسميةُ «الأكثر مبيعًا» ونقاطُ
     الولاء ولمحةُ قاعِ الحافّة المتدرّجة. لا اسمَ ولا شعارَ من المرجع.
     ودرجةُ النصّ تتبع السِمة (الفاتحُ يحتاج أدكن بكثير). */
  --pos-gold:        #FFCB75;
  --pos-warn-bg:     #2B2110;
  --pos-warn-ink:    #FFCB75;
  /* حجابُ الأوراق والزجاج — الزجاجُ حيث يمرّ تحتَه محتوًى فقط، وبألفا
     عاليةٍ فيقرأ نصُّه ولو غاب الطمس. */
  --pos-veil:        rgba(4, 6, 9, .74);
  --pos-glass:       rgba(13, 17, 23, .72);
  --pos-glass-2:     rgba(24, 32, 42, .84);
  /* العمقُ الخفيض: ظلٌّ ناعمٌ للطبقة، وأنعمُ منه للبطاقة، وتوهّجٌ نادرٌ
     للفعل الأساسيّ وما اختير — لا لكلّ حدٍّ وزرّ. */
  --pos-shadow:      0 14px 34px -14px rgba(0, 0, 0, .7);
  --pos-shadow-card: 0 1px 2px rgba(0, 0, 0, .45), 0 5px 14px -8px rgba(0, 0, 0, .5);
  --pos-glow:        0 0 0 1px rgba(255, 181, 71, .25), 0 8px 24px -8px rgba(255, 181, 71, .45);
  --pos-glow-soft:   0 4px 16px -8px rgba(255, 181, 71, .45);
  /* توقيعُ الهويّة (١٢٫١ب — بعد مراجعة المرجع البصريّ): هالةُ أرضيةٍ
     زرقاءُ خافتة، وحافّةٌ متدرّجةٌ مضيئة (أزرقُ الرأس ← حيادٌ ← لمحةُ
     ذهبٍ في القاع) للسطحين البطلين، ولمعةٌ رأسيّةٌ تعطي الزرَّ جسمَه.
     كلُّها `background-image` فوق `background-color` ثابتٍ — فالقياسُ
     الآليُّ للتباين يقرأ اللونَ الفعليَّ لا يتوه في التدرّج. */
  --pos-halo:        rgba(98, 195, 255, .06);
  --pos-edge:        linear-gradient(180deg, rgba(160, 190, 225, .22), rgba(160, 190, 225, .06) 40%, rgba(24, 32, 42, .85) 70%, rgba(255, 181, 71, .18) 100%);
  --pos-edge-soft:   linear-gradient(180deg, rgba(160, 190, 225, .14), rgba(24, 32, 42, .70) 46%, rgba(24, 32, 42, .55));
  --pos-sheen:       linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 42%, rgba(2, 6, 16, .18));
  --pos-card-sheen:  linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(2, 6, 16, .12));
  --pos-r-el:        8px;
  --pos-r-surface:   12px;
}

/* الفاتح — أرضيةٌ محايدةٌ باردةٌ لا قلبَ آليّ: أبيضان (لوحُ العمل وبطاقةُ
   الدفع) على رماديٍّ أزرقَ هادئ، والذهبُ أدكنُ بكثيرٍ ليُقرأ، والتوهّجُ يكاد
   يختفي — ورديّةٌ طويلةٌ لا معرِض.

   **وأدوارُه على «تشغيل» منذ ٢٠٢٦-١٠-٠٣** — كان الفعلُ والاختيارُ أزرقَين (١٢٫١)
   والداكنُ كهرمانيٌّ ومحايد، فيبدو الكاشيرُ بعد زرّ السِمة شاشةً أخرى. فصار:
   الفعلُ كهرمانيٌّ بحبرٍ داكن (٩٫١)، والاختيارُ و«أين أنا» كتلةٌ داكنةٌ بحبرٍ
   أبيض (١٥) لا خطٌّ أزرقُ تحت لسان، والأزرقُ للبيانات وحدها (الهالة). والكهرمانيُّ
   هنا تعبئةٌ لا غير — لا قاعدةَ في `kds.css` تكتبه نصًّا ولا حدًّا على الأبيض. */
[data-scheme="light"] .pos-v11 {
  --pos-bg:          #E8EBF2;
  --pos-sunk:        #F0F2F7;
  --pos-surface:     #FFFFFF;
  --pos-surface-2:   #FDFDFE;
  --pos-card:        #FFFFFF;
  --pos-card-line:   #D8DFEA;
  --pos-line:        #AEB9CF;
  --pos-line-soft:   #DDE3EE;
  --pos-ink:         #232C40;
  --pos-ink-2:       #4E5A74;
  --pos-muted:       #5E6983;
  --pos-gink:        #232C40;
  --pos-gink-2:      #4E5A74;
  --pos-gline:       #C4CDDD;
  --pos-primary:     #F5A623;
  --pos-primary-ink: #1B1306;
  --pos-selected:    #1E2733;
  --pos-selected-ink:#FFFFFF;
  --pos-tab-bg:      #1E2733;
  --pos-tab-ink:     #FFFFFF;
  --pos-tab-mark:    0 0 0 0 transparent;
  --pos-tab-glow:    0 0 0 0 transparent;
  --pos-nav-on:      var(--pos-selected);
  --pos-nav-on-ink:  var(--pos-selected-ink);
  --pos-nav-sheen:   none;
  --pos-nav-glow:    none;
  --pos-gold:        #8A5E12;
  --pos-warn-bg:     #FBF3DD;
  --pos-warn-ink:    #7A5A12;
  --pos-veil:        rgba(226, 230, 240, .74);
  --pos-glass:       rgba(255, 255, 255, .80);
  --pos-glass-2:     rgba(255, 255, 255, .90);
  --pos-shadow:      0 12px 28px -16px rgba(23, 32, 60, .22);
  --pos-shadow-card: 0 1px 2px rgba(23, 32, 60, .06), 0 4px 12px -8px rgba(23, 32, 60, .12);
  --pos-glow:        0 0 0 1px rgba(178, 106, 0, .22), 0 8px 20px -10px rgba(245, 166, 35, .45);
  --pos-glow-soft:   0 4px 14px -8px rgba(245, 166, 35, .40);
  /* توقيعُ الهويّة على الفاتح — أخفتُ بكثير: لا معرِضَ نيون في وردية نهار. */
  --pos-halo:        rgba(29, 78, 216, .05);
  --pos-edge:        linear-gradient(180deg, rgba(91, 104, 120, .30), rgba(174, 185, 207, .40) 40%, rgba(178, 106, 0, .22) 100%);
  --pos-edge-soft:   linear-gradient(180deg, rgba(91, 104, 120, .16), rgba(216, 223, 234, .90));
  --pos-sheen:       linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 45%, rgba(23, 32, 60, .10));
  --pos-card-sheen:  linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(23, 32, 60, .03));
}