/* ══════════════════════════════════════════════════════════════════════════
   سوق هب — التوكِنات

   **هذا الملفُّ هو المصدرُ الوحيدُ لكلِّ لونٍ ومسافةٍ ونصفِ قطرٍ وظلٍّ وخطّ.**
   ولا يُكتب لونٌ خامٌّ في `souqhb.css` أبداً — القاعدةُ ٢٫٤.

   ولماذا الشدّةُ في هذا؟ لأنّ `--navy` في `setup.css` كان معرَّفاً **ستَّ
   مرّاتٍ بأربع قيم** (#111827 · #101215 · #01014A · #02023A) — بنّيّاتُ سوق
   هب وكحليّاتُ اللوحة القديمة في ملفٍّ واحد. فلا أحدَ يعرف أيَّها يُطبَّق
   إلّا بالقياس، وكلُّ إصلاحٍ يحتاج تجربة.

   **والوضعُ الداكن هنا وحدَه** (القاعدة ٢٫١١): يُعاد تعريفُ التوكِنات ولا
   تُكتب قاعدةٌ داكنةٌ لأيِّ مكوّن. فمكوّنٌ جديدٌ يعمل في الوضعين بلا سطر.

   **والاتّجاهُ ليس هنا ولا في أيِّ مكان** (القاعدة ٢٫٩): الخصائصُ منطقيّةٌ
   في `souqhb.css`، و`dir="rtl|ltr"` على `<html>` يقلب كلَّ شيءٍ وحدَه.
   ملفٌّ واحدٌ لا زوجٌ يُصان مرّتين.
   ══════════════════════════════════════════════════════════════════════════ */

/*  الخصوصيّةُ مرفوعةٌ عمداً بـ`[data-theme]`.

    `souqhb-theme.css` يعرّف التوكِناتِ نفسَها على `.store-setup[data-theme="light"]`
    وخصوصيّتُها (0,2,0)، و`.souqhb` وحدَها (0,1,0) — والوسمُ يحمل الصنفين
    والسمةَ معاً على `div` واحد. فكان توكِنُنا يُكتَب ولا يُطبَّق: غمّقتُ
    `--ink-3` للتباين فبقي المتصفّحُ يحسب `#5B6472`. قِسته في المتصفّح لا
    في الورقة — وهو الفرقُ بين ما كُتب وما طُبِّق.

    وتُهدَم `souqhb-theme.css` مع النموذج القديم، فيعود المحدِّدُ بسيطاً.  */
.souqhb,
.souqhb[data-theme] {

  /* ── الهويّة ── */
  --brand:        var(--o-500);
  --brand-hi:     var(--o-600);
  --brand-soft:   var(--o-50);
  --on-brand:     #FFFFFF;      /* الحبرُ فوق لون العلامة */
  --sh-acc: 0 1px 2px rgba(16,24,40,.12);
  --scrim:  rgba(16,24,40,.38);

  /* ── الحبر ── */
  --ink:          var(--g-900);
  --ink-2:        var(--g-700);
  --ink-3:        var(--g-600);      /* غُمِّق من #5B6472: التباينُ كان ٣٫٤٥ والمطلوب ٤٫٥ */

  /* ── الأسطح ── */
  --paper:        var(--g-0);
  --rail-bg:      #FFFFFF;
  --panel:        var(--g-50);
  --panel-2:      var(--g-100);

  /* ── الحدود ── */
  --line:         var(--g-200);
  --line-2:       var(--g-300);

  /* ── الحالات ── */
  --ok:           #0E9E6B;
  --amber:        #E0A81C;
  --crit:         #D14343;

  /* ── الظلال ── */
  --sh-sm: 0 1px 2px rgba(16,24,40,.06);
  --sh-md: 0 1px 2px rgba(16,24,40,.06);
  --sh-lg: 0 8px 24px -8px rgba(16,24,40,.18);

  /* ── المسافات — سلّمٌ لا أرقامٌ سحريّة ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ── أنصافُ الأقطار ──
     وبصمةُ الشكل: زاويةٌ واحدةٌ أحدُّ من الثلاث. تُكتب بالخصائص المنطقيّة
     في `souqhb.css` فتنقلب مع الاتّجاه وحدَها. */
  --r-sm: 6px;
  --r:    6px;
  --r-lg: 8px;
  --r-xl: 8px;
  --r-cut: 6px;          /* الزاويةُ الحادّة */

  /* ── الخطوط ── */
  --f-d: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-b: "IBM Plex Sans Arabic", "Readex Pro", system-ui, sans-serif;
  --f-m: "IBM Plex Mono", ui-monospace, monospace;

  /* ── القياسات ── */
  --rail-w:   220px;   /* ٢ أكتوبر: «المنيو الجانبيه عريضه اوي … صغر العرض شويه» — كان 252 */
  --topbar-h: 62px;
  --tabbar-h: 62px;
}

/* ══════════════════════════════════════════════════════════════════════════
   الوضعُ الداكن — إعادةُ تعريفِ توكِنات لا قواعدُ مكوّنات
   ══════════════════════════════════════════════════════════════════════════ */

.souqhb[data-theme="dark"],
[data-theme="dark"] .souqhb,
.souqhb[data-theme="dark"] {
  --brand:        var(--o-500);
  --brand-hi:     var(--o-600);
  --brand-soft:   var(--o-50);
  --on-brand:     #16181C;
  --sh-acc: 0 1px 2px rgba(0,0,0,.4);
  --scrim:  rgba(0,0,0,.55);

  --ink:          var(--g-900);
  --ink-2:        var(--g-700);
  --ink-3:        var(--g-600);      /* فُتِّح في الداكن للسبب نفسِه */

  --paper:        var(--g-0);
  --rail-bg:      #16181C;
  --panel:        var(--g-50);
  --panel-2:      var(--g-100);

  --line:         var(--g-200);
  --line-2:       var(--g-300);

  --ok:           #2CC38C;
  --amber:        #F0C23F;
  --crit:         #EC6A6A;

  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 1px 2px rgba(0,0,0,.4);
  --sh-lg: 0 8px 24px -8px rgba(0,0,0,.7);
}

/* أرضيّةُ الصفحة تُقال صراحةً للوضعين.
   وكان الجسدُ يرث `--panel` من ورقةٍ أخرى فيصير كحليَّ اللوحة القديمة
   (#0B0B3C) والتاجرُ في الوضع الفاتح — رآه صاحبُ المشروع أربعَ مرّات. */
/* والقيمتان من اسميهما في رأس `souqhb-shell.css` (`--page-light` و`--page-dark`)
   — كانتا مكتوبتين هنا بقيمهما نفسِها، فلونٌ واحدٌ في موضعين (٢٦ سبتمبر). */
html:not([data-theme="dark"]) body { background: radial-gradient(900px 520px at 100% 0, color-mix(in srgb, var(--brand) 1%, transparent), transparent 72%), var(--page-light); }
html[data-theme="dark"] body { background: radial-gradient(900px 520px at 100% 0, color-mix(in srgb, var(--brand) 3%, transparent), transparent 72%), var(--page-dark); }

/* لونُ زرِّ «A» في محرّر الوصف — **محتوًى لا نمط**: يُكتب داخلَ وصف المنتج
   الذي يُخزَّن ويُعرَض في واجهة المتجر، وتلك لا تعرف توكِناتِنا. فلا يتبع
   السمةَ الداكنة (وإلّا تغيّر لونُ وصفٍ مخزَّنٍ بحسب سمةِ من كتبه).
   ويقرؤه `rte.js` من هنا وقتَ النقر، فلا لونَ مكتوبٌ في السكربت. */
:root { --rte-accent: #D8642A }

/* ══════════════════════════════════════════════════════════════════════════
   توكِناتُ التباين — لونٌ يحمل نصّاً، لا لونٌ يزيّن
   ══════════════════════════════════════════════════════════════════════════
   `--brand` و`--ok` جميلان أرضيّةً وحدوداً، وساقطان حاملَي نصٍّ في الوضع
   الفاتح. قاسه الفاحصُ البصريُّ على الشاشة لا في الورقة:

       أبيض على --brand  #D8642A   ٣٫٦٤    والمطلوب ٤٫٥
       --brand على --brand-soft    ٣٫٢٨
       --ok    على أبيض   #0E9E6B  ٣٫٤٣

   فيُفصَل الدورُ عن اللون: `--brand` يبقى للزينة كما هو، و`--brand-ink`
   لكلِّ موضعٍ فيه نصٌّ يُقرَأ. والهويّةُ لا تتغيّر — الدرجةُ وحدَها تغمَق.
   ══════════════════════════════════════════════════════════════════════════ */
.souqhb,
.souqhb[data-theme] {
  --brand-ink: var(--o-700);   /* أبيضُ عليه ٥٫٩ · وهو على --brand-soft ٤٫٩ */
  --ok-ink:    #0A7A52;   /* على أبيض ٤٫٨ */
}

[data-theme="dark"] .souqhb,
.souqhb[data-theme="dark"] {
  /* في الداكن الأرضيّةُ غامقةٌ فالألوانُ الفاتحةُ تكفي — قِيست ٢٠/٢٠ نظيفة */
  --brand-ink: var(--brand);
  --ok-ink:    var(--ok);
}

/* ── وبقيّةُ الألوان حين تحمل نصّاً ──
   قاسها الفاحصُ في الوضع الفاتح: `--amber` على الأبيض ٢٫١٥،
   و`--crit` في شارةٍ ١٫٢٣. وهما أرضيّتان جميلتان وحبران ساقطان. */
.souqhb,
.souqhb[data-theme] {
  --amber-ink: #8A6206;   /* على أبيض ٥٫٣ · وعلى أرضيّة الشارة ٤٫٨ */
  --crit-ink:  #A62B2B;   /* على أبيض ٦٫١ */
}

[data-theme="dark"] .souqhb,
.souqhb[data-theme="dark"] {
  --amber-ink: var(--amber);
  --crit-ink:  var(--crit);
}


/* ══════════════════════════════════════════════════════════════════════════
   نظامُ تصميم اللوحة — المصدرُ الوحيد للسلالم (١٠٨ · ٢٤ أكتوبر · انظر _docs/1408)
   كلُّ لونٍ في المشروع يُشتقّ من هذه الأسماء. والداكن يقلب السلَّم بالبنية نفسها
   (الاسمُ نفسُه — g-900 دائماً «أقوى حبر»)، فلا قاعدةَ داكنةً لأيّ مكوِّن.
   ══════════════════════════════════════════════════════════════════════════ */
:root, .store-setup, .souqhb {
  --g-0: #FFFFFF; --g-50: #F9FAFB; --g-100: #F3F4F6; --g-200: #E5E7EB; --g-300: #D1D5DB;
  --g-400: #9CA3AF; --g-500: #6B7280; --g-600: #4B5563; --g-700: #374151; --g-800: #1F2937; --g-900: #111827;
  --o-50: #FDEEE3; --o-100: #FBDFCB; --o-200: #F7C4A0; --o-300: #F1A472; --o-400: #E68446; --o-500: #D8642A; --o-600: #BA5527; --o-700: #A8481C; --o-800: #843715; --o-900: #642A12;
  --ok-50: #ECFDF5;   --ok-500: #0E9E6B;   --ok-700: #0A7A52;
  --warn-50: #FFFBEB; --warn-500: #E0A81C; --warn-700: #8A6206;
  --err-50: #FEF2F2;  --err-500: #D14343;  --err-700: #A62B2B;
  --info-50: #EFF6FF; --info-500: #2563EB; --info-700: #1D4ED8;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px;
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --lh-text: 1.5; --lh-head: 1.3;
  --focus: var(--o-500); --focus-ring: color-mix(in srgb, var(--o-500) 28%, transparent);
  --ctl-h: 36px; --ctl-h-sm: 32px; --dis-op: .55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), .store-setup:not([data-theme="light"]), .souqhb:not([data-theme="light"]) {
    --g-0: #16181C; --g-50: #1C1F24; --g-100: #262A30; --g-200: #32363D; --g-300: #444A53;
    --g-400: #6B7280; --g-500: #9CA3AF; --g-600: #A3A9B3; --g-700: #C4C8CF; --g-800: #E5E7EB; --g-900: #F3F4F6;
    --o-50: #3A1D0E; --o-100: #4A2410; --o-200: #6A3216; --o-300: #8F4620; --o-400: #C25F2C; --o-500: #F0793D; --o-600: #FF8F55; --o-700: #FFA470; --o-800: #FFBF9A; --o-900: #FFD9C2;
    --ok-50: #0F2A20; --ok-500: #2CC38C; --ok-700: #5FDDB0; --warn-50: #2A2210; --warn-500: #F0C23F; --warn-700: #F5D474; --err-50: #2E1515; --err-500: #EC6A6A; --err-700: #F59A9A; --info-50: #12213A; --info-500: #6AA8FF; --info-700: #9CC4FF;
  }
}
:root[data-theme="dark"], .store-setup[data-theme="dark"], [data-theme="dark"] .store-setup, .souqhb[data-theme="dark"], [data-theme="dark"] .souqhb {
    --g-0: #16181C; --g-50: #1C1F24; --g-100: #262A30; --g-200: #32363D; --g-300: #444A53;
    --g-400: #6B7280; --g-500: #9CA3AF; --g-600: #A3A9B3; --g-700: #C4C8CF; --g-800: #E5E7EB; --g-900: #F3F4F6;
    --o-50: #3A1D0E; --o-100: #4A2410; --o-200: #6A3216; --o-300: #8F4620; --o-400: #C25F2C; --o-500: #F0793D; --o-600: #FF8F55; --o-700: #FFA470; --o-800: #FFBF9A; --o-900: #FFD9C2;
    --ok-50: #0F2A20; --ok-500: #2CC38C; --ok-700: #5FDDB0; --warn-50: #2A2210; --warn-500: #F0C23F; --warn-700: #F5D474; --err-50: #2E1515; --err-500: #EC6A6A; --err-700: #F59A9A; --info-50: #12213A; --info-500: #6AA8FF; --info-700: #9CC4FF;
}

/* 1103 (المنسّق): «ورقةٌ فاتحة» — معايناتُ الفاتورة والمطبوعات ورقٌ أبيضُ في الوضعين كما تُطبع.
   نطاقٌ يُعيد توكِناتِ الفاتح لأيّ عنصرٍ يحمل الصنف، فلا لونَ خامّاً في الصفحات (القاعدة ٢). */
.souqhb .sheet-light,
[data-theme="dark"] .souqhb .sheet-light {
  --paper:   #FFFFFF;
  --panel:   #F8F9FA;
  --panel-2: #F1F3F4;
  --ink:     #111827;
  --ink-2:   #374151;
  --ink-3:   #5B6472;
  --line:    #E5E7EB;
  --line-2:  #D1D5DB;
  color-scheme: light;
  color: var(--ink);
  background: var(--paper);
}