/* =====================================================================
   وهج العود — WHJALOUD · رموز التصميم (Design Tokens)
   =====================================================================
   ⚠️ هذا الملف **مصدر الحقيقة البصري الوحيد**. لا يُكتب أي لون أو مسافة أو
   استدارة نصاً في أي ملف آخر — تُقرأ من هنا عبر `var(--…)`.

   ⚠️⚠️ **الأمان — لماذا متغيّرات CSS لا حقن CSS؟**
   الثيم قابل للتغيير من لوحة الإدارة، لكن **لا CSS خام يُخزَّن ولا يُحقن**.
   القيم تمرّ `settingsContract.coerce()` بنمط HEX مغلق، ثم تُكتب **قيمة
   واحدة داخل خاصية مخصَّصة** لا كتلة أنماط. فحتى لو أفلتت قيمة خبيثة من
   التحقق، أقصى أثرها لون خاطئ — لا `</style><script>`، ولا `expression()`،
   ولا `url(javascript:)`. ولا حاجة لـ`unsafe-inline` موسَّعة في CSP.

   الهوية: عود · جمر · دخان · نحاس — فخامة سعودية هادئة لا ثقيلة.
   ===================================================================== */

:root {
  /* ── لوحة الجمر: الأساس ─────────────────────────────────────────── */
  --whj-oud-900: #241a12;   /* خشب داكن */
  --whj-oud-800: #3a2415;
  --whj-oud-700: #533014;
  --whj-oud-600: #7a4a24;   /* البنّي الأساسي */
  --whj-oud-500: #8a5a2f;
  --whj-oud-300: #b9945a;

  --whj-ember-600: #b5852f; /* جمر ذهبي */
  --whj-ember-500: #c9a24b; /* الذهب النحاسي — لون التمييز */
  --whj-ember-300: #e8d3a0;
  --whj-ember-100: #f6e3b8;

  --whj-sand-50:  #fdfbf7;  /* عاجي دافئ */
  --whj-sand-100: #f7f2ea;
  --whj-sand-200: #efe6d8;
  --whj-sand-300: #e8ddcd;

  --whj-smoke-600: #6b5c4e; /* رمادي دخاني دافئ */
  --whj-smoke-400: #9a8b7c;

  /* ── أدوار دلالية — هذه ما تستخدمه المكوّنات، لا الألوان الخام ──── */
  --whj-bg:            var(--whj-sand-100);
  --whj-surface:       #ffffff;
  --whj-surface-alt:   var(--whj-sand-50);
  --whj-primary:       var(--whj-oud-600);
  --whj-primary-dark:  var(--whj-oud-700);
  --whj-primary-ink:   #ffffff;
  --whj-accent:        var(--whj-ember-500);
  --whj-accent-soft:   var(--whj-ember-300);
  --whj-text:          var(--whj-oud-900);
  --whj-text-muted:    var(--whj-smoke-600);
  /* ⚠️ اسم دلالي مرادف يستخدمه عقد الثيم المولَّد (`--whj-muted`). يُعرَّف هنا
     أيضاً حتى لا يعتمد أي ملف أنماط على وجود الورقة المولَّدة ليعمل. */
  --whj-muted:         var(--whj-smoke-600);

  /* ⚠️ §11 — قيم لونية كانت مكتوبة نصاً داخل المكوّنات. نُقلت إلى هنا بأسماء
     دلالية: `color-mix(..., white)` و`rgb(0 0 0 / .45)` و`rgba(0,0,0,.08)`
     كانت تمرّ من بوابة تبحث عن السداسي وحده — أي أن الادّعاء كان أوسع من الفحص. */
  --whj-tint-base:     #ffffff;   /* الأساس الذي تُمزج معه الدرجات الفاتحة */
  /* ⚠️ ونظيره للتعتيم. وجودهما كرمزين يعني أن «اجعل هذا السطح أغمق قليلاً»
     تُكتب بمزج مُصرَّح به، لا بلون أسود شارد تمنعه البوابة بحق. */
  --whj-shade-base:    #000000;
  /* ⚠️ نغمة الظل — ثلاثية RGB صرفة تُستعمل داخل `rgb(… / alpha)`.
     تُعرَّف هنا كاحتياط، وتُكتب فوقها الورقة المولَّدة بنغمة الثيم النشط:
     ظلّ بارد على لوحة دافئة يبدو متسخاً. */
  --whj-shadow-tint:   58 32 18;

  /* ⚠️ منحنيات الحركة **رموز** لا قيم محلية: توحيدها هنا يمنع أن يخترع كل
     مكوّن منحنى خاصاً فتبدو الحركات غير منسجمة. `ease` القياسي مستبعد عمداً
     لأنه يبدو بطيئاً وثقيلاً. */
  --whj-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --whj-ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
  --whj-ease-spring:   cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ⚠️ لون التركيز احتياط: الورقة المولَّدة تكتب فوقه بلون الثيم. لا يُترك
     بلا تعريف أبداً — التركيز غير المرئي عطل وصولية لا تفصيلاً. */
  --whj-focus:         var(--whj-accent);
  --whj-scrim:         rgb(0 0 0 / 0.45);   /* حجاب النوافذ المنبثقة */
  --whj-shadow-soft:   rgb(0 0 0 / 0.08);   /* ظل خفيف للقوائم المنسدلة */
  --whj-border:        var(--whj-sand-300);
  --whj-border-strong: var(--whj-oud-300);

  /* ⚠️ **ألوان علامات أطراف ثالثة — لا تُثيَّم إطلاقاً.**
     لون واتساب مملوك لها وثابت في دليل هويتها؛ تغييره مع ثيم المتجر يُضعف
     التعرّف على الزر ويخالف إرشادات استخدام العلامة. يُعلَن هنا **صراحةً**
     كثابت لا كقيمة شاردة في وسط ملف الأنماط. */
  --whj-brand-whatsapp: #25D366;
  --whj-brand-whatsapp-dark: #1ebe57;

  --whj-success: #2f6f4f;
  --whj-warning: #b5852f;
  --whj-danger:  #9b3226;

  /* ── الطباعة ──────────────────────────────────────────────────────
     ⚠️⚠️ **§23 — ثلاثة خطوط كانت مُعلَنة وواحد فقط مُحمَّل.**

       `--whj-font-ar` يبدأ بـ`Noto Kufi Arabic`
       `--whj-font-en` يبدأ بـ`Cormorant Garamond`
       `--whj-font-ui` يبدأ بـ`Segoe UI`

     ولم يكن المشروع يحمّل إلا **Tajawal** وحدها (باستيراد في `style.css`).
     فالعائلة المكتوبة أولاً في كل رمز **غير موجودة على أي جهاز تقريباً**،
     والمتصفح يسقط إلى التالي بصمت. أي أن المتجر كان يُعرض بخط لم يختره
     أحد: Tajawal للعربية، وGeorgia حيث كان يُظن Cormorant، وSegoe UI على
     ويندوز فقط وTahoma أو غيره على البقية — **خط مختلف لكل نظام تشغيل**.

     هذا بالضبط ما يُرى «خطوطاً عشوائية» و«تنسيقاً غير موحَّد»: لا خطأ في
     المقاسات، بل عائلة مُعلَنة لا تصل المستخدم.

     الآن: كل عائلة مكتوبة هنا **تُطلَب فعلاً** في ترويسة الصفحة، وبوابة
     `tests/whjaloud-typography.js` تقارن الطرفين وتسقط إن افترقا.

     التوزيع:
       • `--whj-font-ar`  عناوين وعلامة — Noto Kufi Arabic: كوفي هندسي فخم
       • `--whj-font-ui`  نصّ الواجهة والجداول — Tajawal: أوضح في المقاسات
                          الصغيرة، وهي مقاسات الجداول والأزرار والتذييل
       • `--whj-font-en`  اللاتيني الزخرفي — Cormorant Garamond
     ⚠️ الاحتياطيات مذكورة كاملة: سقوط الشبكة لا يجوز أن يُنتج خطاً افتراضياً
        بلا دعم عربي. */
  --whj-font-ar: 'Noto Kufi Arabic', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --whj-font-en: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --whj-font-ui: 'Tajawal', 'Noto Kufi Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;

  /* ── مقياس طباعي متجاوب ───────────────────────────────────────────
     ⚠️⚠️ **المقاس السابق ثابت (`rem` صرفة).** عنوان `2.44rem` مناسب على
        سطح المكتب و**يفيض** على شاشة 360 بكسل، فكان كل قالب يعالج ذلك
        باستعلام وسائط خاص به — أو لا يعالجه. `clamp()` يجعل التدرّج
        خاصية في الرمز نفسه: حدّ أدنى مقروء، وحدّ أعلى فخم، وتدرّج سلس
        بينهما بلا استعلام واحد.

     ⚠️ الحدّ الأدنى لا ينزل تحت 0.75rem في أي مقاس: نصّ أصغر من ذلك على
        الجوال ليس تصميماً بل عطل وصولية. */
  --whj-text-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);
  --whj-text-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --whj-text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  --whj-text-lg:   clamp(1.125rem, 1.05rem + 0.4vw,  1.3125rem);
  --whj-text-xl:   clamp(1.3125rem, 1.15rem + 0.8vw, 1.625rem);
  --whj-text-2xl:  clamp(1.5rem,   1.25rem + 1.2vw,  2.0625rem);
  --whj-text-3xl:  clamp(1.75rem,  1.35rem + 2vw,    2.625rem);

  --whj-leading-tight: 1.3;
  --whj-leading-body:  1.85;   /* العربية تحتاج تباعداً أكبر من اللاتينية */
  --whj-tracking-en:   0.08em;

  /* ── المسافات: مقياس 4px ───────────────────────────────────────── */
  --whj-space-1: 0.25rem;  --whj-space-2: 0.5rem;   --whj-space-3: 0.75rem;
  --whj-space-4: 1rem;     --whj-space-5: 1.5rem;   --whj-space-6: 2rem;
  --whj-space-7: 3rem;     --whj-space-8: 4rem;     --whj-space-9: 6rem;

  /* ── الاستدارة — يضبطها theme_radius من الإعدادات ──────────────── */
  --whj-radius:      14px;
  --whj-radius-sm:   calc(var(--whj-radius) * 0.5);
  --whj-radius-lg:   calc(var(--whj-radius) * 1.6);
  --whj-radius-pill: 999px;

  /* ── الظلال: دافئة لا رمادية — الظل الرمادي يُفقِد الدفء ───────── */
  --whj-shadow-sm: 0 1px 2px rgba(36, 26, 18, 0.06);
  --whj-shadow:    0 4px 16px rgba(36, 26, 18, 0.08);
  --whj-shadow-lg: 0 12px 40px rgba(36, 26, 18, 0.12);
  --whj-glow:      0 0 24px rgba(201, 162, 75, 0.28);   /* وهج الجمر */

  /* ── الحركة ────────────────────────────────────────────────────── */
  --whj-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --whj-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --whj-fast:   140ms;
  --whj-normal: 260ms;
  --whj-slow:   480ms;

  --whj-container: 1240px;
  --whj-z-header: 100;
  --whj-z-modal:  1000;
  --whj-z-toast:  1100;
  /* ⚠️ الغطاء فوق الترويسة وتحت النوافذ: القائمة المنسدلة على الجوال تعلو
     المحتوى ولا تعلو نافذة منبثقة. رقم شارد هنا كان يُنتج قائمة تحت البانر. */
  --whj-z-drawer: 90;
  /* ⚠️ إزاحة درج الجوال المغلق. **متغيّر لا قيمة حرفية**: `translateX(-100%)`
     المكتوبة في المكوّن تدفع الدرج يساراً في الاتجاهين، فيخرج من الشاشة في
     RTL من الجهة الخطأ ويبدو «مكسوراً». المحوّر المنطقي
     (`translate: logical`) غير مدعوم على نطاق واسع بعد، فالقلب يقع هنا:
     `html[dir="rtl"]` يكتب `100%` فوق هذه القيمة. */
  --whj-drawer-off: -100%;

  /* ── الترويسة والتذييل ──────────────────────────────────────────────
     ⚠️⚠️ هذه الأدوار تكتبها `/assets/theme.css` المولَّدة خادمياً بلون الثيم
     النشط. تُعرَّف هنا **احتياطاً** لسببين:
       • بوابة `tests/whjaloud-design-system.js` تشترط أن كل `var(--whj-…)`
         مستعمَل مُعرَّف في ملف الرموز — لا في ورقة مولَّدة قد لا تُقرأ.
       • لو فشل توليد ورقة الثيم لأي سبب، تبقى الترويسة مقروءة بدل أن
         تصير نصاً بلا لون على خلفية بلا لون.
     القيم هنا مطابقة لثيم `whj_ember` الافتراضي في `services/theme.js`. */
  --whj-header-bg:  #2a1a11;
  --whj-header-ink: #f7ece0;
  --whj-footer-bg:  #231510;
  --whj-footer-ink: #e8d8c8;
  /* طبقة تعتيم فوق صورة البانر — نفس السبب أعلاه. */
  --whj-hero-tint:  #241a12;

  /* ── هندسة بطاقة المنتج ─────────────────────────────────────────────
     ⚠️⚠️ **نسبة الصورة رمز لا قيمة محلية.** كانت مكتوبة داخل مكوّن البطاقة
     وحده، فأي شبكة أخرى (البحث · القسم · نتائج البحث الفوري) ترسم نسبة
     مختلفة ⇒ صفوف غير متساوية الارتفاع. توحيدها هنا يجعل «كل البطاقات
     بارتفاع واحد» خاصية بنيوية لا صدفة. */
  --whj-product-ratio: 1 / 1;
  --whj-product-min:   200px;
  /* ⚠️ **سقف عرض البطاقة.** بلا سقف يتمدّد المسار بلا حدّ، فبطاقتان على
     شاشة عريضة تصيران بحجم لوحة إعلانات. السقف يجعل الفائض يذهب إلى
     الجانبين (`justify-content: center`) بدل أن يشوّه البطاقة. */
  --whj-product-max:   272px;
  /* ارتفاع منطقة العنوان: سطران دائماً — اسم عربي طويل لا يزحزح السعر. */
  --whj-product-title-lines: 2;
}

/* ─────────────────────────────────────────────────────────────────────
   أصناف الثيم — تُطبَّق على <html> من `brand.middleware`.
   ⚠️⚠️ **مصدر الألوان الآن واحد**: `/assets/theme.css` المولَّدة من الخادم،
      وتُحمَّل **آخر ملف** فتفوز قيمها في `:root`. كانت الألوان مكرَّرة هنا
      وفي `services/theme.js` وفي `services/email/theme.js` وفي `INK` داخل
      الـPDF — أربع لوحات تتباعد بصمت. حُذفت النسخ وبقي مصدر واحد.

   ⚠️ ما يبقى هنا هو ما **لا يُعبَّر عنه بلون**: نغمة الظلال والحواف لكل ثيم،
      ومستوى الحركة، وشكل البطاقة، ونمط الترويسة. الأصناف من قائمة سماح
      مغلقة في الخادم، فلا يصل أي نص من الإدخال إلى سمة `class`.
   ───────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
   بصمة كل ثيم — ما **لا** يُعبَّر عنه بلون.
   ⚠️ الألوان كلها تأتي من `/assets/theme.css` المولَّدة خادمياً. ما هنا هو
      السلوك البصري الذي يجعل الثيمات مختلفة **بنيوياً** لا لونياً فقط:
      كثافة الظل · حدّة الحواف · وزن الحدود · شدّة الوهج.
   ───────────────────────────────────────────────────────────────────── */

/* وهج الجمر — ظل دافئ متوسط، حواف ناعمة، وهج عنبري خفيف. */
.whj-theme-whj_ember {
  --whj-shadow-strength: 0.10;
  --whj-border-weight: 1px;
  --whj-glow: 0 0 0 1px color-mix(in srgb, var(--whj-accent) 26%, transparent);
  --whj-surface-texture: 0.018;
}

/* ⚠️ ليل العود — **داكن**: الظلال تكاد تختفي على خلفية داكنة، فالعمق يأتي
   من فروق الأسطح والوهج لا من الظل. رفع كثافة الظل هنا يُنتج بقعاً سوداء. */
.whj-theme-whj_noir {
  --whj-shadow-strength: 0.45;
  --whj-border-weight: 1px;
  --whj-glow: 0 0 0 1px color-mix(in srgb, var(--whj-accent) 34%, transparent);
  --whj-surface-texture: 0.03;
  color-scheme: dark;   /* ⚠️ يُخبر المتصفح فيُلوّن أشرطة التمرير وحقول النظام */
}

/* رمال نجد — هادئ ومسطّح: ظل خفيف جداً وحدود أوضح تعوّض غياب العمق. */
.whj-theme-whj_desert {
  --whj-shadow-strength: 0.06;
  --whj-border-weight: 1px;
  --whj-glow: 0 0 0 1px color-mix(in srgb, var(--whj-primary) 20%, transparent);
  --whj-surface-texture: 0.012;
}

/* زيتون ونحاس — تباين أعلى: حدود أثقل وظل أوضح يناسب اللوحة الباردة. */
.whj-theme-whj_olive {
  --whj-shadow-strength: 0.12;
  --whj-border-weight: 1.5px;
  --whj-glow: 0 0 0 1px color-mix(in srgb, var(--whj-accent) 30%, transparent);
  --whj-surface-texture: 0.02;
}

/* الثيم المخصَّص يرث سلوك الافتراضي. */
.whj-theme-custom {
  --whj-shadow-strength: 0.10;
  --whj-border-weight: 1px;
  --whj-glow: 0 0 0 1px color-mix(in srgb, var(--whj-accent) 26%, transparent);
  --whj-surface-texture: 0.018;
}

/* ⚠️ أسماء الثيمات القديمة — تُترجَم خادمياً، وتبقى هنا حتى لا تفقد صفحة
   مخزَّنة مؤقتاً أنماطها لحظة الترقية. */
.whj-theme-royal_glow, .whj-theme-golden_ember { --whj-shadow-strength: 0.10; --whj-border-weight: 1px; }
.whj-theme-smoky_oud  { --whj-shadow-strength: 0.45; --whj-border-weight: 1px; }
.whj-theme-noble_wood { --whj-shadow-strength: 0.06; --whj-border-weight: 1px; }

/* ── الظلال المشتقّة — نغمتها من الثيم لا ثابتة ────────────────────── */
:root {
  --whj-shadow-sm: 0 1px 3px rgb(var(--whj-shadow-tint, 58 32 18) / calc(var(--whj-shadow-strength, 0.1) * 0.7));
  --whj-shadow-md: 0 4px 14px rgb(var(--whj-shadow-tint, 58 32 18) / var(--whj-shadow-strength, 0.1));
  --whj-shadow-lg: 0 12px 34px rgb(var(--whj-shadow-tint, 58 32 18) / calc(var(--whj-shadow-strength, 0.1) * 1.5));
}

/* ── مستوى الحركة — `theme_animation_level` ─────────────────────────── */
.whj-motion-none,
.whj-motion-none * {
  animation: none !important;
  transition: none !important;
}
.whj-motion-subtle { --whj-fast: 120ms; --whj-normal: 200ms; --whj-slow: 320ms; }
.whj-motion-full   { --whj-fast: 160ms; --whj-normal: 280ms; --whj-slow: 520ms; }

/* ── شكل البطاقة — `theme_card_style` ───────────────────────────────── */
.whj-cards-flat     { --whj-card-shadow: none; --whj-card-border: 1px solid var(--whj-border); }
.whj-cards-soft     { --whj-card-shadow: 0 2px 10px rgb(var(--whj-shadow-tint) / 0.06); --whj-card-border: 1px solid var(--whj-border); }
.whj-cards-bordered { --whj-card-shadow: none; --whj-card-border: 2px solid var(--whj-primary); }
.whj-cards-elevated { --whj-card-shadow: 0 10px 28px rgb(var(--whj-shadow-tint) / 0.14); --whj-card-border: 1px solid transparent; }

/* ── نمط الترويسة — `theme_header_style` ────────────────────────────── */
.whj-header-classic  { --whj-header-align: space-between; --whj-header-pad: var(--whj-space-4, 1rem); }
.whj-header-centered { --whj-header-align: center;        --whj-header-pad: var(--whj-space-5, 1.25rem); }
.whj-header-minimal  { --whj-header-align: space-between; --whj-header-pad: var(--whj-space-3, 0.75rem); }

/* ─────────────────────────────────────────────────────────────────────
   ⚠️ **إمكانية الوصول — احترام تفضيل تقليل الحركة.**
   ليس تجميلاً: الحركة تسبّب دواراً فعلياً لبعض المستخدمين (Vestibular
   disorders). نُصفّر المدد بدل تعطيل الانتقالات، فتبقى الحالات النهائية
   صحيحة ولا تنكسر المكوّنات المعتمدة على `transitionend`.
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --whj-fast: 0.01ms; --whj-normal: 0.01ms; --whj-slow: 0.01ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* تباين أعلى عند الطلب */
@media (prefers-contrast: more) {
  :root { --whj-text-muted: var(--whj-oud-800); --whj-border: var(--whj-oud-300); }
}