/* ═══════════════════════════════════════════════════════════════════
   ألوان Phalix — المصدر الوحيد للوحة الألوان (فاتح + داكن)
   ═══════════════════════════════════════════════════════════════════
   قبل الملف ده كان فيه نظامَي متغيّرات منفصلين بقيم مختلفة لنفس المعنى
   (style.css للـERP بـ--* و delivery/design-system.css للتوصيل بـ--ds-*)،
   وفوقهم 2562 لون مكتوب صريح في الصفحات. النتيجة المقاسة:

     • 6 شاشات الوضع الداكن مابيأثّرش فيها خالص (بتعرّف --bg محليًا
       بقيمة فاتحة ومفيهاش أي كتلة داكنة).
     • 36 شاشة فيها بقع فاتحة على خلفية داكنة (نص أبيض على أبيض).
     • لون الهوية (white-label) بيغيّر --primary بس؛ الـ#0d9488 المكتوب
       صريح مابيتغيّرش.

   ⚠️ الوضع الداكن هنا بيشتغل بتلات طرق مع بعض عشان يغطّي كل الحالات:
       html[data-theme="dark"]   ← الاختيار الصريح
       body.dark / .dark          ← الطريقة القديمة في الشل وشاشة التوزيع
       prefers-color-scheme       ← تفضيل النظام لما مفيش اختيار صريح

   ⚠️ يتحمّل **قبل** أي stylesheet تانية عشان الصفحات تقدر تتجاوزه
      عن قصد لو احتاجت:
          <link rel="stylesheet" href="tokens.css?v=...">
          <link rel="stylesheet" href="style.css">
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── الأسطح ─────────────────────────────────────────────── */
  --bg:          #f1f5f9;   /* خلفية الصفحة */
  --surface:     #ffffff;   /* الكروت والجداول */
  --surface-2:   #f8fafc;
  --surface-3:   #f1f5f9;
  --light:       #f8fafc;
  --white:       #ffffff;
  --border:      #e2e8f0;
  --line:        #e5e7eb;
  --thead:       #fafbfc;   /* رأس الجدول */
  --zebra:       #f6fbfa;   /* الصف الزوجي */
  --row-hover:   #cdeee9;   /* الصف تحت الماوس */

  /* ── النصوص ─────────────────────────────────────────────── */
  --text:            #0f172a;
  --text-primary:    #0f172a;
  --text-secondary:  #64748b;   /* نفس قيمة style.css الأصلية */
  --text-muted:      #94a3b8;
  --muted:           #64748b;
  --ink:             #1f2937;

  /* ── الهوية (brand.js بيتجاوزها من org_settings) ─────────── */
  --primary:        #0f172a;
  --primary-dark:   #0b1220;
  --primary-light:  #1e293b;
  --accent:         #0d9488;
  --accent-dark:    #0f766e;
  --brand:          #0d9488;
  --brand-dark:     #0f766e;
  --brand-light:    #ccfbf1;

  /* ── ألوان الحالة: نص / خلفية / نص غامق ──────────────────── */
  --ok:          #16a34a;
  --ok-strong:   #15803d;
  --ok-bg:       #dcfce7;
  --ok-bg-soft:  #f0fdf4;
  --success:     #22c55e;   /* نفس قيمة style.css الأصلية */

  --danger:        #ef4444;   /* نفس قيمة style.css الأصلية */
  --danger-strong: #b91c1c;
  --danger-bg:     #fee2e2;
  --danger-bg-soft:#fef2f2;
  --red-light:     #fee2e2;

  --warn:        #ca8a04;
  --warn-strong: #a16207;
  --warn-bg:     #fef9c3;
  --warn-text:   #92400e;
  --warning:     #f59e0b;   /* نفس قيمة style.css الأصلية */

  --info:        #0891b2;
  --info-strong: #0e7490;
  --info-bg:     #cffafe;

  --purple:        #7c3aed;
  --purple-strong: #6d28d9;
  --purple-bg:     #ede9fe;

  --orange:        #ea580c;
  --orange-strong: #c2410c;
  --orange-bg:     #ffedd5;

  /* ── ظلال وأنصاف أقطار ───────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font: 'Cairo', sans-serif;
}

/* ═══ الوضع الداكن ═══════════════════════════════════════════
   الثلاث محدّدات بتعرّف **نفس** القيم. أي لون بيتعرّف هنا بس (من غير
   قيمة في :root) بيبقى غير معرّف في الوضع الفاتح — عشان كده كل token
   له قيمة في :root فوق، وهنا بنعيد تعريفه بس.                       */

html[data-theme="dark"],
body.dark,
.dark {
  --bg:          #0b1220;
  --surface:     #111a2e;
  --surface-2:   #0b1220;
  --surface-3:   #16223a;
  --light:       #16223a;
  --white:       #111a2e;
  --border:      #26314a;
  --line:        #26314a;
  --thead:       #0e1626;
  --zebra:       #0e1a2e;
  --row-hover:   #16324a;

  --text:            #e6ecf5;
  --text-primary:    #e6ecf5;
  --text-secondary:  #93a3bd;
  --text-muted:      #6b7a94;
  --muted:           #93a3bd;
  --ink:             #e6ecf5;

  --primary:        #e6ecf5;
  --primary-dark:   #ffffff;
  --primary-light:  #26314a;
  --accent:         #2dd4bf;
  --accent-dark:    #14b8a6;
  --brand:          #2dd4bf;
  --brand-dark:     #14b8a6;
  --brand-light:    #0f3b36;

  /* الحالات: النص يفتح والخلفية تغمق عشان التباين يفضل مقروء */
  --ok:          #4ade80;
  --ok-strong:   #86efac;
  --ok-bg:       #0f2f24;
  --ok-bg-soft:  #0d2620;
  --success:     #4ade80;

  --danger:        #f87171;
  --danger-strong: #fca5a5;
  --danger-bg:     #3b1518;
  --danger-bg-soft:#2a1114;
  --red-light:     #3b1518;

  --warn:        #fbbf24;
  --warn-strong: #fcd34d;
  --warn-bg:     #3a2c0c;
  --warn-text:   #fcd34d;
  --warning:     #fbbf24;

  --info:        #22d3ee;
  --info-strong: #67e8f9;
  --info-bg:     #0b2f38;

  --purple:        #a78bfa;
  --purple-strong: #c4b5fd;
  --purple-bg:     #241a3d;

  --orange:        #fb923c;
  --orange-strong: #fdba74;
  --orange-bg:     #3a1f0c;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.55);
}

/* تفضيل النظام — بس لو مفيش اختيار صريح للوضع الفاتح */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not(.light-forced) {
    --bg:          #0b1220;
    --surface:     #111a2e;
    --surface-2:   #0b1220;
    --surface-3:   #16223a;
    --light:       #16223a;
    --white:       #111a2e;
    --border:      #26314a;
    --line:        #26314a;
  --thead:       #0e1626;
  --zebra:       #0e1a2e;
  --row-hover:   #16324a;

    --text:            #e6ecf5;
    --text-primary:    #e6ecf5;
    --text-secondary:  #93a3bd;
    --text-muted:      #6b7a94;
    --muted:           #93a3bd;
    --ink:             #e6ecf5;

    --primary:        #e6ecf5;
    --primary-dark:   #ffffff;
    --primary-light:  #26314a;
    --accent:         #2dd4bf;
    --accent-dark:    #14b8a6;
    --brand:          #2dd4bf;
    --brand-dark:     #14b8a6;
    --brand-light:    #0f3b36;

    --ok:          #4ade80;
    --ok-strong:   #86efac;
    --ok-bg:       #0f2f24;
    --ok-bg-soft:  #0d2620;
    --success:     #4ade80;

    --danger:        #f87171;
    --danger-strong: #fca5a5;
    --danger-bg:     #3b1518;
    --danger-bg-soft:#2a1114;
    --red-light:     #3b1518;

    --warn:        #fbbf24;
    --warn-strong: #fcd34d;
    --warn-bg:     #3a2c0c;
    --warn-text:   #fcd34d;
    --warning:     #fbbf24;

    --info:        #22d3ee;
    --info-strong: #67e8f9;
    --info-bg:     #0b2f38;

    --purple:        #a78bfa;
    --purple-strong: #c4b5fd;
    --purple-bg:     #241a3d;

    --orange:        #fb923c;
    --orange-strong: #fdba74;
    --orange-bg:     #3a1f0c;

    --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.55);
  }
}

/* ═══ توافق مع نظام التوصيل (--ds-*) ═══════════════════════════
   كان بيعرّف نفس المعاني بقيم مختلفة. بنشتقّها من نفس المصدر عشان
   الشاشتين مايختلفوش في لون واحد.                                  */
:root {
  --ds-primary:        var(--brand);
  --ds-primary-shadow: rgba(13,148,136,.28);
  --ds-green:          var(--ok);
  --ds-red:            var(--danger);
  --ds-amber:          var(--warn);
  --ds-info:           var(--info);
  --ds-purple:         var(--purple);
  --ds-orange:         var(--orange);
  --ds-text:           var(--text);
  --ds-bg:             var(--bg);
  --ds-border:         var(--border);
  --ds-shadow-sm:      var(--shadow-sm);
  --ds-shadow:         var(--shadow-md);
  --ds-shadow-lg:      var(--shadow-lg);
  --ds-font:           var(--font);
}