/**
 * =====================================================================
 * زمام — Design Tokens
 * =====================================================================
 * المصدر الوحيد لكل قيم التصميم. لا تكتب لوناً مباشراً في أي ملف آخر.
 *
 * البنية ثلاث طبقات:
 *   1. Primitives  — سلالم ألوان خام، لا تُستخدم مباشرة في المكوّنات.
 *   2. Semantics   — أدوار (سطح، نص، حد، نجاح…). دي اللي المكوّنات تستهلكها.
 *   3. Legacy      — أسماء style.css القديمة مربوطة على الأدوار، عشان
 *                    الملف القديم يبقى واعياً بالثيم من غير إعادة كتابة.
 *
 * الثيم: الداكن هو الافتراضي. الفاتح يتفعّل بـ [data-theme="light"]،
 * ومن غير اختيار صريح نتبع تفضيل النظام.
 */

/* =====================================================================
   1. PRIMITIVES — سلالم خام
   ===================================================================== */
:root {
  /* ═══ أخضرُ زمام ═══
     مأخوذٌ من المربّع الأخضر في العلامة — النقطةُ فوق الـ«i»، والمربّعُ
     عند تشابك الحلقتين. وهو اللونُ الوحيدُ في العلامة كلِّها، فيبقى
     كذلك في الواجهة: يظهر مرّةً في الشاشة ولا يصير خلفيّةً لكلّ شيء.

     ودرجتان لا واحدة: الأخضرُ الفاتحُ يُقرأ على الداكن ولا يُقرأ على
     الأبيض، والغامقُ عكسُه. فلكلّ ثيمٍ درجتُه، وكلتاهما فوق الحدّ. */
  --green-300: #20d6a5;   /* داكن: hover        — 10.3:1 على #0B0E13 */
  --green-400: #12be90;   /* داكن: الأساسي      —  8.1:1 على #0B0E13 */
  --green-500: #0a8a69;
  --green-600: #067a5d;   /* فاتح: الأساسي      —  5.3:1 على الأبيض */
  --green-700: #075f49;   /* فاتح: hover        —  7.7:1 على الأبيض */
  --green-tint-light: #ddf6ed;   /* خلفيةُ التحديد في الفاتح */
  --green-tint-dark:  #102e28;   /* وفي الداكن */

  /* ═══ محايداتُ زمام ═══
     ميلٌ أزرقُ خفيفٌ مأخوذٌ من حبر العلامة (#0B0E13) — وهو أسودُ مزرقّ
     لا رماديّ. وذاك ما يجعل الداكنَ داكناً فعلاً بدل أن يكون غسيلاً
     رمادياً: أعمقُ سطحٍ لمعانُه 0.006، أي أقربُ إلى الأسود منه إلى أيّ
     رمادي. */
  --slate-0:   #ffffff;   /* البطاقة والسايدبار في الفاتح */
  --slate-25:  #fbfcfd;
  --slate-50:  #f4f6f8;   /* خلفيةُ الصفحة في الفاتح — ورقةُ العلامة */
  --slate-100: #eef1f4;   /* القوائمُ والنوافذُ في الفاتح */
  --slate-200: #d7dee7;   /* الحدود في الفاتح */
  --slate-300: #c2ccd8;
  --slate-400: #8794a6;   /* النصُّ الخافت في الداكن — 5.9:1 */
  --slate-450: #a9b4c3;   /* النصُّ الثانوي في الداكن — 8.6:1 */
  --slate-500: #5e6b7a;   /* النصُّ الخافت في الفاتح — 5.4:1 */
  --slate-600: #4a5665;   /* النصُّ الثانوي في الفاتح — 7.5:1 */
  --slate-700: #333e4c;
  --slate-800: #28313d;   /* الحدود في الداكن */
  --slate-825: #171c24;   /* القوائمُ والنوافذُ في الداكن */
  --slate-850: #12161d;   /* البطاقاتُ في الداكن */
  --slate-900: #0f1319;   /* السايدبارُ في الداكن */
  --slate-950: #0b0e13;   /* خلفيةُ الصفحة في الداكن — حبرُ العلامة */

  /* ── وتبقى أسماءُ البنفسجيّ مربوطةً على الأخضر ──
     ثمانيةُ ملفّاتِ أنماطٍ وتسعةَ عشرَ وحدةَ صفحةٍ تستهلك `--violet-*`
     و`--accent`. وتغييرُ الاسم يعني تعديلَ كلِّ موضعٍ منها في دفعةٍ
     واحدة — وأيُّ موضعٍ يُنسى يبقى بنفسجيّاً وحدَه في شاشةٍ خضراء.
     فتُبدَّل القيمةُ ويبقى الاسم، ثمّ تُنظَّف الأسماءُ على مهلٍ. */
  --violet-50:  #eefaf5;
  --violet-100: var(--green-tint-light);
  --violet-200: #b9ead9;
  --violet-300: var(--green-300);
  --violet-400: var(--green-400);
  --violet-500: var(--green-500);
  --violet-600: var(--green-600);
  --violet-700: var(--green-700);
  --violet-800: #064c3b;
  --violet-900: #05392c;
  --violet-950: var(--green-tint-dark);

  /* دلالية */
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;

  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;

  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;
  --rose-700: #be123c;

  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
}

/* =====================================================================
   2. SEMANTICS — الوضع الداكن (الافتراضي)
   ===================================================================== */
:root {
  color-scheme: dark;

  /* الأسطح — من الأعمق للأعلى */
  --surface-0: var(--slate-950);   /* خلفية الصفحة  #0B0E13 */
  --surface-1: var(--slate-900);   /* الشريط الجانبي والعلوي  #0F1319 */
  --surface-2: var(--slate-850);   /* البطاقات  #12161D */
  --surface-3: var(--slate-825);   /* القوائم والنوافذ وhover  #171C24 */
  --surface-inset: rgba(0, 0, 0, 0.28);  /* حقول الإدخال، مناطق غائرة */
  --surface-overlay: rgba(6, 9, 18, 0.78); /* خلفية المودال */

  /**
   * النصّ — أربعُ درجاتٍ، وأدناها يُقرأ.
   *
   * كانت الثانويةُ والخافتةُ رماديّتين مزرقّتين باهتتين: عناوينُ الحقول
   * وأسطرُ الشرح تحت البطاقات تُرى ولا تكاد تُقرأ. وذلك أوّلُ ما شُكي
   * منه — «لون الخط زي الزفت».
   *
   * والسببُ أنّ الدرجات اختيرت لتبدو هادئة، فصار الهدوءُ ضعفاً. فرُفعت
   * كلُّها، والفرقُ بينها باقٍ — التسلسلُ هو ما يُرتّب الصفحة، لا ضعفُ
   * أدناها.
   *
   * والأرقامُ إلى جانب كلٍّ قياسٌ على سطح البطاقة (--surface-2)، لا
   * تقدير: tests/contrast.js يقيسها في كلّ صفحةٍ وفي الثيمين.
   */
  --text-strong:  #f4f6f8;   /* عناوين وأرقام — 16.7:1 على البطاقة */
  --text-primary: #f4f6f8;   /* المتن — 16.7:1 */
  --text-secondary: var(--slate-450); /* التسميات — 8.6:1 */
  /* والخافتُ يحمل أسطرَ الشرح وعناوينَ الأرقام، فلا يسقط إلى عتبة
     «النصّ الكبير»: كان #8b95ad عند 5.1:1، وهذا 6.9:1 */
  --text-muted:   var(--slate-400);   /* أسطر الشرح — 5.9:1، وهو فوق حدّ المتن لا حدّ النصّ الكبير */
  /* ونصُّ الزرِّ في الداكن حبرٌ لا أبيض: الأخضرُ الفاتح مع الأبيض
     يعطي 1.3:1 — لا يُقرأ. ومع الحبر 8.1:1. */
  --text-on-accent: var(--slate-950);

  /* الحدود — محايدة.

     كانت كلُّها مصبوغةً بالبنفسجيّ: `rgba(143,117,255,…)`. وحدُّ كلِّ
     بطاقةٍ في المنصّة أرجوانيّ، فوق شعارٍ أرجوانيّ وأرقامٍ أرجوانية
     وتوهّجٍ أرجوانيٍّ في الخلفية. لونٌ واحدٌ يحمل الهويّةَ والبيانات
     والحالةَ والزينةَ معاً — فلا شيءَ يقود، والنتيجةُ تُقرأ متجرَ
     ألعابٍ لا أداةَ عمل.

     فصار الحدُّ رمادياً محضاً، والبنفسجيُّ للتفاعل وحدَه: الزرُّ،
     والرابطُ، والبندُ النشط. */
  /* ولونٌ صريحٌ لا شفافيّة: الأبيضُ الشفّافُ يتغيّر معناه بتغيّر ما
     تحته، فحدُّ البطاقة على الصفحة غيرُ حدِّها في الدرج. والأهمُّ أنّ
     `tests/contrast.js` لا يرى الشفّافَ أصلاً — تتوقّف عند أوّل سطحٍ
     معتِم — فيمرّ حدٌّ لا يكاد يُرى وهو غيرُ مقيس. */
  --border-subtle:   #1c232c;
  --border-default:  var(--slate-800);   /* #28313D */
  --border-strong:   #3a4453;
  --border-hairline: #161c24;

  /* الهوية — أخضرُ زمام */
  --accent:        var(--green-400);   /* #12BE90 — 8.1:1 على الصفحة */
  --accent-hover:  var(--green-300);   /* #20D6A5 */
  --accent-active: var(--green-500);
  --accent-soft:   var(--green-tint-dark);   /* #102E28 — خلفيةُ التحديد */
  /* ولا توهّج. كان `--accent-glow` يضع هالةً أرجوانيّةً خلف البطاقات
     والأرقام، وهي أوّلُ ما يجعل لوحةَ عملٍ تُقرأ متجرَ ألعاب. يبقى
     الاسمُ مربوطاً على شفافيّةٍ خفيفةٍ لأنّ ملفّاتٍ أخرى تستهلكه، ولا
     يعود يتوهّج. */
  --accent-glow:   rgba(18, 190, 144, 0.10);

  /**
   * السطحُ الذي يُكتَب عليه بالأبيض.
   *
   * `--accent` هو violet-400: يكفي حدّاً وأيقونةً وشريطَ حالة عند 3:1،
   * ولا يكفي نصّاً — الأبيضُ عليه 3.41:1.
   *
   * وكان زرُّ «حفظ» تدرّجاً من 600 إلى 500 فيمرّ. ولمّا سُوّي التدرّجُ
   * إلى لونٍ واحدٍ أخذ 400 فسقط. فدورُ الملء منفصلٌ عن دور الحدّ:
   * violet-500 يعطي 4.94:1، و600 يعطي 6.6.
   */
  /* والملءُ في الداكن هو الأخضرُ نفسُه: نصُّه حبرٌ لا أبيض، فيعطي
     8.1:1 — أعلى ممّا كان يعطيه البنفسجيُّ بأبيضه (4.9:1). */
  --accent-solid:       var(--green-400);
  --accent-solid-hover: var(--green-300);
  /* تدرّجُ الزرّ الأساسيّ يحمل نصّاً أبيض، فأفتحُ درجةٍ فيه محكومةٌ به:
     violet-400 تعطي 3.41:1 — تحت الحدّ — و500 تعطي 4.94:1. فيبدأ من
     600 وينتهي عند 500، ويبقى --accent على 400 لما لا يُكتَب عليه:
     الحدود والأيقونات تكفيها 3:1. */
  /* ولا تدرّج. لونٌ واحدٌ مسطّح: التدرّجُ على الأزرار والأرقام والقائمة
     هو النصفُ الآخر ممّا يجعل الأداةَ تُقرأ متجرَ ألعاب. ويبقى الاسمُ
     لأنّ ملفّاتٍ أخرى تستهلكه، وقيمتُه لونٌ واحد. */
  --accent-gradient: var(--green-400);

  /* دلالية */
  --success: var(--emerald-400);
  --success-soft: rgba(52, 211, 153, 0.14);
  --warning: var(--amber-400);
  --warning-soft: rgba(251, 191, 36, 0.14);
  --danger:  var(--rose-400);
  --danger-soft: rgba(251, 113, 133, 0.14);
  --info:    var(--sky-400);
  --info-soft: rgba(56, 189, 248, 0.14);

  /* لونُ النصّ في كلّ حالةٍ منفصلٌ عن لون سطحها.

     ولونٌ واحدٌ لا يكفي الدورين: ما يصلح حدّاً أو أيقونةً عند 3:1 لا
     يصلح كلاماً يُقرأ عند 4.5:1. وكان تنبيهُ «واتساب جارٍ الاتصال»
     يُكتب في الثيم الفاتح بـ amber-600 على أبيض — 3.19:1 مقيسةً، وهو
     تحت الحدّ. فالنصُّ يأخذ الدرجةَ السابعة هناك، والسطحُ يبقى على
     السادسة.

     وفي الداكن الدوران واحد: الدرجةُ الرابعة تعبر الحدَّ على أسطحه. */
  --success-text: var(--success);
  --warning-text: var(--warning);
  --danger-text:  var(--danger);
  --info-text:    var(--info);

  /* الظلال — أعمق في الداكن */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 6px 20px rgba(0, 0, 0, 0.45);

  /* توهّجُ الخلفية — أُطفئ.

     كان بقعتين بنفسجيةً وسماويةً تسبحان خلف كلّ صفحة. وهما جميلتان
     في صفحةِ تعريفٍ بمنتج، وفي أداةِ عملٍ تُفتَح ثماني ساعاتٍ يومياً
     هما ضجيجٌ يتعب العين ويصبغ كلَّ ما فوقه.

     ولم يُحذَف الرمزُ لأنّ style.css يقرؤه: يُجعَل شفّافاً، فيبقى
     المكانُ لمن أراد إعادتَه بقيمةٍ واحدة. */
  --ambient-1: transparent;
  --ambient-2: transparent;

  /* لوحة الرسوم البيانية — متمايزة في الشكل مش باللون بس */
  --chart-1: var(--violet-400);
  --chart-2: var(--emerald-400);
  --chart-3: var(--amber-400);
  --chart-4: var(--sky-400);
  --chart-5: var(--rose-400);
}

/* ── الوضع الفاتح ─────────────────────────────────────────────────── */
:root[data-theme="light"] {
  color-scheme: light;

  --surface-0: var(--slate-50);
  --surface-1: var(--slate-0);
  --surface-2: var(--slate-0);
  --surface-3: var(--slate-100);
  --surface-inset: var(--slate-100);
  --surface-overlay: rgba(20, 25, 41, 0.45);

  /* والفاتحُ كذلك: الثانويةُ والخافتةُ كانتا الدرجةَ نفسَها (slate-600)
     — تسلسلٌ بلا فرق، فلا شيءَ يقول ما هو أهمّ. والقويّةُ تزداد سواداً */
  --text-strong:  var(--slate-950);     /* #0B0E13 — 19.3:1 على البطاقة */
  --text-primary: var(--slate-950);     /* 19.3:1 */
  --text-secondary: var(--slate-600);   /* #4A5665 — 7.5:1 */
  --text-muted:   var(--slate-500);     /* #5E6B7A — 5.4:1 */
  --text-on-accent: #ffffff;            /* على الأخضر الغامق — 5.3:1 */

  /* ── والحدُّ في الفاتح درجتان لا درجة ──
     الحدُّ المطلوب `#D7DEE7` يعطي 1.36 على الأبيض و**1.25** على خلفية
     الصفحة — وهو تحت ما تُرى به حافّةٌ على شاشةٍ رخيصةٍ أو في ضوء نهار.
     فبطاقةٌ بيضاءُ على صفحةٍ فاتحةٍ يذوب حدُّها وتبدو ملتصقةً بما حولها.

     فيُترَك `#D7DEE7` حدّاً داخلياً — فاصلاً بين صفَّي جدولٍ داخل بطاقة،
     حيث ما تحته أبيض — ويُغمَّق حدُّ ما يُرسَم على خلفية الصفحة درجةً
     واحدة. والفرقُ لا يكاد يُرى حيث لا يلزم، ويُرى حيث يلزم. */
  --border-subtle:  var(--slate-200);   /* #D7DEE7 — داخل البطاقة */
  --border-default: var(--slate-300);   /* #C2CCD8 — حافّةُ البطاقة، 1.66 على الصفحة */
  --border-strong:  #9aa6b5;
  --border-hairline: var(--slate-200);

  /* والأخضرُ في الفاتح درجةٌ أغمق: `#12BE90` على الأبيض يعطي 2.2:1
     فلا يُقرأ نصّاً، و`#067A5D` يعطي 5.3:1 */
  --accent:        var(--green-600);   /* #067A5D */
  --accent-hover:  var(--green-700);   /* #075F49 */
  --accent-active: var(--green-700);
  --accent-soft:   var(--green-tint-light);   /* #DDF6ED */
  --accent-glow:   rgba(6, 122, 93, 0.10);
  --accent-solid:       var(--green-600);
  --accent-solid-hover: var(--green-700);
  /* ولا تدرّج. لونٌ واحدٌ مسطّح: التدرّجُ على الأزرار والأرقام والقائمة
     هو النصفُ الآخر ممّا يجعل الأداةَ تُقرأ متجرَ ألعاب. ويبقى الاسمُ
     لأنّ ملفّاتٍ أخرى تستهلكه، وقيمتُه لونٌ واحد. */
  --accent-gradient: var(--green-600);

  --success: var(--emerald-600);
  --success-soft: #e7f8f1;
  --warning: var(--amber-600);
  --warning-soft: #fdf3e2;
  --danger:  var(--rose-600);
  --danger-soft: #fdeaee;
  --info:    var(--sky-600);
  --info-soft: #e6f4fd;

  /* السادسةُ سطحٌ، والسابعةُ نصّ — والأرقام مقيسةٌ على الأبيض
     وslate-50 وسطحِ الحالة الناعم، وأدناها فوق 4.5:1 */
  --success-text: var(--emerald-700);
  --warning-text: var(--amber-700);
  --danger-text:  var(--rose-700);
  --info-text:    var(--sky-700);

  --shadow-sm: 0 1px 2px rgba(20, 25, 41, 0.06);
  --shadow-md: 0 4px 14px rgba(20, 25, 41, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 25, 41, 0.12);
  --shadow-accent: 0 4px 12px rgba(20, 25, 41, 0.10);

  --ambient-1: transparent;
  --ambient-2: transparent;

  --chart-1: var(--violet-600);
  --chart-2: var(--emerald-600);
  --chart-3: var(--amber-600);
  --chart-4: var(--sky-600);
  --chart-5: var(--rose-600);
}

/* من غير اختيار صريح، نتبع النظام */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;

    --surface-0: var(--slate-50);
    --surface-1: var(--slate-0);
    --surface-2: var(--slate-0);
    --surface-3: var(--slate-100);
    --surface-inset: var(--slate-100);
    --surface-overlay: rgba(20, 25, 41, 0.45);

    /* ── وهذه الكتلةُ تطابق `[data-theme="light"]` حرفاً بحرف ──
       من لم يختر ثيماً يقع هنا، وهم أكثرُ الناس. فكتلةٌ تتأخّر عن
       أختها تعني أنّ أكثرَ من يفتح اللوحة يرى ألواناً غيرَ التي
       اختارها من اختار — وهو أثرٌ لا يظهر لمن ثبّت الثيم عنده. */
    --text-strong:  var(--slate-950);
    --text-primary: var(--slate-950);
    --text-secondary: var(--slate-600);
    --text-muted:   var(--slate-500);
    --text-on-accent: #ffffff;

    --border-subtle:  var(--slate-200);
    --border-default: var(--slate-300);
    --border-strong:  #9aa6b5;
    --border-hairline: var(--slate-200);

    --accent:        var(--green-600);
    --accent-hover:  var(--green-700);
    --accent-active: var(--green-700);
    --accent-soft:   var(--green-tint-light);
    --accent-glow:   rgba(6, 122, 93, 0.10);
    --accent-solid:       var(--green-600);
    --accent-solid-hover: var(--green-700);
    --accent-gradient: var(--green-600);

    --success: var(--emerald-600);
    --success-soft: #e7f8f1;
    --warning: var(--amber-600);
    --warning-soft: #fdf3e2;
    --danger:  var(--rose-600);
    --danger-soft: #fdeaee;
    --info:    var(--sky-600);
    --info-soft: #e6f4fd;

    --success-text: var(--emerald-700);
    --warning-text: var(--amber-700);
    --danger-text:  var(--rose-700);
    --info-text:    var(--sky-700);

    --shadow-sm: 0 1px 2px rgba(20, 25, 41, 0.06);
    --shadow-md: 0 4px 14px rgba(20, 25, 41, 0.08);
    --shadow-lg: 0 16px 40px rgba(20, 25, 41, 0.12);
    --shadow-accent: 0 4px 12px rgba(20, 25, 41, 0.10);

    --ambient-1: transparent;
    --ambient-2: transparent;

    --chart-1: var(--violet-600);
    --chart-2: var(--emerald-600);
    --chart-3: var(--amber-600);
    --chart-4: var(--sky-600);
    --chart-5: var(--rose-600);
  }
}

/* =====================================================================
   3. المقاييس — غير مرتبطة بالثيم
   ===================================================================== */
:root {
  /**
   * الخط — IBM Plex Sans Arabic.
   * ============================
   *
   * كان Tajawal: خطُّ جوجل الذي يفتح به كلُّ قالبٍ عربيّ، فيُقرأ صفحةً
   * مولَّدةً لا منتَجاً. وهذا يُرى قبل أن يُقرأ حرف.
   *
   * وIBM Plex Sans Arabic صُمّم لواجهات العمل لا للإعلانات: حروفُه
   * أوضحُ في المقاسات الصغيرة، وله رفيقٌ لاتينيٌّ من العائلة نفسِها —
   * فـ«CARDEIX» و«SAR» والأرقامُ تجلس بجوار العربيّة بالوزن نفسِه، ولا
   * تبدو مقحمةً من خطٍّ آخر كما كانت.
   *
   * وأرقامُه جدوليّةُ العرض: عمودُ مبالغَ لا يتراقص مع كلّ تحديث.
   *
   * ─── ومن أين يُحمَّل ───
   *
   * من وسم <link> في index.html، لا من @import هنا. وكان هنا مؤقّتاً
   * ريثما يُفرَغ ذلك الملفّ، ثمّ نُقل: @import يجعل المتصفّح يجلب هذا
   * الملفَّ ويقرؤه ثمّ يكتشف السطرَ ثمّ يجلب ورقةَ جوجل ثمّ يقرؤها ثمّ
   * يجلب الخطّ — وهذا الملفُّ محجوبٌ حتى تنتهي السلسلة، وكلُّ ورقةِ
   * أنماطٍ بعده تنتظره.
   */
  --font-sans: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;

  /**
   * المقاسات — أكبر ممّا كانت.
   *
   * كان الأساسُ أربعةَ عشرَ والأصغرُ أحدَ عشر. والعربيّةُ تحتاج أكثرَ من
   * اللاتينيّة عند المقاس نفسِه: حروفُها متّصلةٌ وفيها نقاطٌ وهمزاتٌ
   * تختفي أوّلَ ما يصغر الحجم — فأحدَ عشرَ بكسلاً في جدولٍ لا يُقرأ،
   * يُخمَّن.
   *
   * والسلّم نسبتُه ثابتة، فما بُني عليه لا يختلّ.
   */
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   27px;
  --fs-2xl:  34px;
  --fs-3xl:  42px;

  /* الأوزان — أثقلُ درجةً في كلّ مستوى.

     الخطُّ العاديّ (400) في العربيّة يبدو رفيعاً على خلفيةٍ داكنة:
     الحروفُ متّصلةٌ وأطرافُها دقيقة، فتذوب. والخمسمئةُ هي ما يُقرأ
     كـ«عاديّ» في واجهةٍ عربية.

     وIBM Plex Sans Arabic لا يملك 800، فأقصاه 700 — والفرقُ بينه وبين
     600 كافٍ للعناوين. */
  --fw-normal:    500;
  --fw-medium:    600;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 700;

  /* والسطرُ أوسع: العربيّةُ بمدّاتها وهمزاتها تضيق عند 1.5، فتتلامس
     أطرافُ السطور ويصعب على العين أن تجد أوّلَ السطر التالي. */
  --lh-tight:   1.35;
  --lh-base:    1.65;
  --lh-relaxed: 1.85;

  /* المسافات — أساس 4px، كثافة لوحة تحكم */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* نصف القطر */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   24px;
  --radius-full: 9999px;

  /* الانتقالات */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* الطبقات */
  --z-base:    1;
  --z-sidebar: 100;
  --z-topbar:  150;
  --z-modal:   200;
  --z-toast:   300;

  /* الأيقونات */
  --icon-sm: 14px;
  --icon-md: 18px;
  --icon-lg: 24px;
  --icon-xl: 40px;

  --sidebar-width: 270px;
}

/* =====================================================================
   4. LEGACY — أسماء style.css القديمة مربوطة على الأدوار أعلاه.
   وجودها هو اللي بيخلّي الستايل القديم يتبع الثيم تلقائياً.
   لا تستخدمها في كود جديد؛ استخدم الأدوار الدلالية.
   ===================================================================== */
:root {
  --bg-primary:     var(--surface-0);
  --bg-secondary:   var(--surface-1);
  --bg-card:        var(--surface-2);
  --bg-card-hover:  var(--surface-3);
  --glass:          var(--surface-inset);
  --glass-border:   var(--border-default);

  --accent-light: var(--accent-hover);
  --accent-dark:  var(--accent-active);

  --green:      var(--success);
  --green-glow: var(--success-soft);
  --red:        var(--danger);
  --red-glow:   var(--danger-soft);
  --yellow:     var(--warning);
  --blue:       var(--info);
}

/* =====================================================================
   5. أساسيات عامة
   ===================================================================== */

/* احترام تفضيل تقليل الحركة — شرط وصولية، مش تحسين اختياري */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* حلقة تركيز واضحة للتنقل بالكيبورد — من غيرها اللوحة غير قابلة للاستخدام
   بدون فأرة. :focus-visible عشان ما تظهرش مع نقر الفأرة. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* الأرقام في جدول متساوية العرض عشان الأعمدة ما ترقصش بين التحديثات */
.value, .kpi-value, td, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* منع وميض الثيم الخاطئ قبل تحميل CSS */
html { background: var(--surface-0); }

/* ── `hidden` تُخفي فعلاً ──

   المتصفّحُ يُخفي `[hidden]` بقاعدةٍ من قواعده هو، وأيُّ قاعدةٍ في
   صفحتنا تغلبها مهما كانت بسيطة. و`.nav-item { display: flex }` تغلبها
   — فكلُّ بندٍ في القائمة يبقى ظاهراً بعد `el.hidden = true`.

   ووقع ذلك: بوّابةُ الصلاحيات تُخفي ما لا يملكه الموظّف، فلا يُخفى
   شيء. كلُّ موظّفٍ يرى كلَّ بندٍ ويضغطه فيُردّ بـ403 — والحارسُ في
   الخادم يمنعه فعلاً، لكنّ القائمةَ تَعِده بما لا يناله. وزرُّ «تذكير
   من ترك سلّته» كان كذلك: يُعرَض لموظّفٍ لا يملك مراسلةَ العملاء،
   فيكتب رسالتَه ويُعاينها ثمّ يُردّ عند الإرسال.

   وقاعدتان في الملفّات — `.sync-pill[hidden]` و`.silence-chip[hidden]` —
   كانتا ترقيعين موضعيّين لهذا النقص نفسِه.

   و`!important` هنا في موضعها: `hidden` تعني «لا يُعرَض»، ولا حالةَ
   يُقصَد فيها أن يُعرَض ما وُسم بها. */
[hidden] { display: none !important; }

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

   `visibility` لا `display`: الصفحةُ تُبنى وتُقاس وتُحمّل خطوطُها، ولا
   تُرى. فالكشفُ بعدها لا يُعيد ترتيبَ شيء. */
body.booting { visibility: hidden; }