/* ============================================================
   نبض — رموز الهوية · مصدر الحقيقة الوحيد للألوان
   ============================================================
   الهوية «آيريس الليل» من IrisColors.swift في التطبيق.
   الوضع الداكن هو الأصل (`:root`)، والكتل التالية **تُبدّل رموزاً
   قائمة ولا تُنشئ لوناً جديداً** — وهذا ما يمنع الخطأ الكلاسيكي:
   لونٌ يُعرَّف داخل كتلة وضعٍ واحد فيظهر نصّ وضعٍ على أرضية آخر.

   ثلاث حالات لا اثنتان:
     · لا تفضيل مخزَّن  → يتبع الجهاز عبر prefers-color-scheme
     · اختيار صريح فاتح → [data-theme="light"] يغلب نظاماً داكناً
     · اختيار صريح داكن → [data-theme="dark"] يغلب نظاماً فاتحاً
   وهي الحالات الثلاث نفسها في NabdhAppearance بالتطبيق
   (تلقائي · فاتح · داكن) — قصّة واحدة في الموقع والتطبيق.
   ============================================================ */

:root {
  /* ── الأسطح ── */
  --bg:            #0B0B12;
  --surface-1:     #14141F;
  --surface-2:     #1A1A28;
  --surface-3:     #20202F;
  --thead-bg:      #1A1A28;

  /* ── الحدود ── */
  --line:          rgba(255, 255, 255, 0.07);
  --line-2:        rgba(255, 255, 255, 0.13);
  --img-border:    rgba(255, 255, 255, 0.18);

  /* ── الأكسنت ── */
  --brand:         #8B7DF6;
  --brand-soft:    #9B8BF8;
  --brand-text:    #D8CFFF;
  --brand-dim:     rgba(139, 125, 246, 0.14);
  --brand-edge:    rgba(139, 125, 246, 0.30);
  --brand-edge-2:  rgba(139, 125, 246, 0.45);
  --brand-hover:   #ADA0FA;
  --on-brand:      #16121F;   /* نصّ فوق سطح الأكسنت */
  --grad-a:        #9B8BF8;
  --grad-b:        #C7BFFF;

  /* ── النصوص ── */
  --ink:           #F2F2F8;
  --ink-soft:      #9A9AB5;
  /* أفتح من nabdhInkFaintText (#7A7A94) في التطبيق: تلك تجتاز 4.71 على
     الأرضية #0B0B12، لكنها تهبط إلى 4.38 على السطح المرتفع #14141F و4.12
     على #1A1A28 — وأكثر نصوص الموقع الباهتة تجلس على أسطح لا على الأرضية. */
  --ink-faint:     #87879E;

  /* ── الخلفيات الوظيفية ── */
  --header-bg:     rgba(11, 11, 18, 0.78);
  --fill-hover:    rgba(255, 255, 255, 0.05);

  /* ── الظلال ── */
  --shadow:        0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-soft:   0 12px 32px rgba(0, 0, 0, 0.35);
  --surface-lift:  none;
  --glow:          0 0 0 1px rgba(139, 125, 246, 0.35), 0 8px 28px rgba(139, 125, 246, 0.18);

  /* ── التخطيط والحركة ──
     ليست ألواناً فلا تتبدّل بين الوضعين، لكنها تسكن هنا لأن `:root`
     الوحيدة صارت هنا. سقوطها عند الاستخراج أفقد `.container` حدَّ
     عرضها في الصفحات المولّدة كلّها فتمدّدت إلى حافّة الشاشة —
     `var()` بقيمة غير مُعرَّفة يُسقط الإعلان كلّه بصمت. */
  --content-width: 1120px;
  --radius-lg:     28px;
  --radius-card:   22px;
  --radius-pill:   999px;
  --ease:          cubic-bezier(.22, .7, .3, 1);

  /* ── الدلالية (IrisColors) ── */
  --good:          #34D399;
  --good-deep:     #6EE7B7;
  --watch:         #F0A500;
  --warm:          #F2B06A;
  --critical:      #F4513B;
  /* نصّ رسالة الخطأ يجلس على سطحٍ لا على الأرضية، فيحتاج نغمةً
     تجتاز AA هناك. في الداكن هو نفسه؛ في الفاتح أعتم. */
  --critical-text: #F4513B;
  --critical-edge: rgba(244, 81, 59, 0.40);
  --info:          #6EA0F7;
}

/* ============================================================
   اللوحة النهارية — قيَمها من lightHex في IrisColors.swift
   ============================================================
   استثناء موثّق: `--watch` و`--warm` و`--info` **أُعتِمت** عن قيَم
   التطبيق. قيَم التطبيق تُستعمل هناك أكسنتاً على أسطح، وهنا نصّاً
   على أبيض فترسب في WCAG AA:
       #C07F00 → 3.35   #CC8736 → 2.96   #3E78D8 → 4.30
   والمعتمة تجتاز على النغمة نفسها:
       #A06A00 → 4.61   #A06929 → 4.62   #3672D6 → 4.63
   ============================================================ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:            #F6F4FB;
    --surface-1:     #FFFFFF;
    --surface-2:     #F0EEF7;
    --surface-3:     #F0EEF7;
    --thead-bg:      #EBE8F5;

    --line:          rgba(0, 0, 0, 0.06);
    --line-2:        rgba(0, 0, 0, 0.10);
    --img-border:    rgba(0, 0, 0, 0.10);

    --brand:         #6B5BD8;
    --brand-soft:    #7E6FE8;
    --brand-text:    #4A3BA8;
    --brand-dim:     rgba(107, 91, 216, 0.10);
    --brand-edge:    rgba(107, 91, 216, 0.28);
    --brand-edge-2:  rgba(107, 91, 216, 0.45);
    --brand-hover:   #6B5BD8;
    --on-brand:      #FFFFFF;
    --grad-a:        #4A3BA8;
    --grad-b:        #7E6FE8;

    --ink:           #1B1B24;
    --ink-soft:      #5C5C70;
    --ink-faint:     #67677A;

    --header-bg:     rgba(246, 244, 251, 0.82);
    --fill-hover:    rgba(0, 0, 0, 0.04);

    --shadow:        0 12px 32px rgba(0, 0, 0, 0.10);
    --shadow-soft:   0 6px 20px rgba(0, 0, 0, 0.07);
    --surface-lift:  0 1px 2px rgba(0, 0, 0, 0.04);
    --glow:          0 0 0 1px rgba(107, 91, 216, 0.30), 0 8px 28px rgba(107, 91, 216, 0.14);

    --good:          #007C4E;
    --good-deep:     #075C3C;
    --watch:         #A06A00;
    --warm:          #A06929;
    --critical:      #D23A26;
    --critical-text: #C63724;
    --critical-edge: rgba(210, 58, 38, 0.35);
    --info:          #3672D6;
  }
}

/* اختيار صريح للفاتح — يغلب نظاماً داكناً */
:root[data-theme="light"] {
  --bg:            #F6F4FB;
  --surface-1:     #FFFFFF;
  --surface-2:     #F0EEF7;
  --surface-3:     #F0EEF7;
  --thead-bg:      #EBE8F5;

  --line:          rgba(0, 0, 0, 0.06);
  --line-2:        rgba(0, 0, 0, 0.10);
  --img-border:    rgba(0, 0, 0, 0.10);

  --brand:         #6B5BD8;
  --brand-soft:    #7E6FE8;
  --brand-text:    #4A3BA8;
  --brand-dim:     rgba(107, 91, 216, 0.10);
  --brand-edge:    rgba(107, 91, 216, 0.28);
  --brand-edge-2:  rgba(107, 91, 216, 0.45);
  --brand-hover:   #6B5BD8;
  --on-brand:      #FFFFFF;
  --grad-a:        #4A3BA8;
  --grad-b:        #7E6FE8;

  --ink:           #1B1B24;
  --ink-soft:      #5C5C70;
  --ink-faint:     #67677A;

  --header-bg:     rgba(246, 244, 251, 0.82);
  --fill-hover:    rgba(0, 0, 0, 0.04);

  --shadow:        0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-soft:   0 6px 20px rgba(0, 0, 0, 0.07);
  --surface-lift:  0 1px 2px rgba(0, 0, 0, 0.04);
  --glow:          0 0 0 1px rgba(107, 91, 216, 0.30), 0 8px 28px rgba(107, 91, 216, 0.14);

  --good:          #007C4E;
  --good-deep:     #075C3C;
  --watch:         #A06A00;
  --warm:          #A06929;
  --critical:      #D23A26;
  --critical-text: #C63724;
  --critical-edge: rgba(210, 58, 38, 0.35);
  --info:          #3672D6;
}

/* ============================================================
   زرّ المظهر — ثلاث حالات كالتطبيق
   ============================================================ */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-2);
  color: var(--ink-soft);
  transition: color .2s, border-color .2s, background .2s;
}
.theme-toggle:hover { color: var(--ink); background: var(--fill-hover); border-color: var(--brand-edge); }
.theme-toggle svg { width: 18px; height: 18px; display: none; }

/* الأيقونة تتبع التفضيل المخزَّن لا الوضع المعروض:
   الزرّ يقول «ماذا اخترتَ»، لا «ماذا ترى». */
:root:not([data-theme-pref]) .theme-toggle .i-auto,
:root[data-theme-pref="system"] .theme-toggle .i-auto,
:root[data-theme-pref="light"]  .theme-toggle .i-light,
:root[data-theme-pref="dark"]   .theme-toggle .i-dark { display: block; }

/* بلا JavaScript يبقى الزرّ مخفياً: زرٌّ لا يعمل أسوأ من غيابه */
.theme-toggle { visibility: hidden; }
:root[data-theme-pref] .theme-toggle { visibility: visible; }