/* ══════════════════════════════════════════════════════════════
   نواة التصميم — مصدر واحد لكل قرار بصري
   ══════════════════════════════════════════════════════════════

   ليه الملف ده موجود
   ------------------
   الجرد (tools/audit_css_scale.py) لقى:
       ٥١ مقاس خط · ١٤ نقطة كسر · ١٣٧ لون صريح في ٣٩٣ موضع

   ودي **نفس مشكلة الحسابات**: مفهوم متطبّق في مكان ومختلف في
   مكان تاني. النتيجة إن تغيير درجة البني كان محتاج ٣٩٣ بحث
   واستبدال — يعني «تحسين في تبويب مابيوصلش للباقي».

   القاعدة هنا نفس قاعدة باقي النواة:
       **الشاشة بتسأل، مابتقرّرش.**

   أي مكوّن محتاج مقاس خط أو لون أو نقطة كسر بياخدها من هنا.
   ولو محتاج قيمة مش موجودة — دي إشارة إن السلّم ناقص، مش إذن
   إنه يخترع قيمة.

   ⚠️ الألوان هنا **مقاسة** مش مختارة بالذوق. كل لون نص عدّى
      حد التباين 4.5:1 (WCAG AA) بالمعادلة، و`test_design_tokens`
      بيعيد الحساب مع كل اختبار.
   ══════════════════════════════════════════════════════════════ */

:root {

  /* ───────────────────────────────────────────────
     ١) اللوحة — الأساس (ما اتغيرش)
     ─────────────────────────────────────────────── */
  --paper:      #faf8f5;   /* كريمي دافئ — خلفية الموقع */
  --paper-2:    #f2ede4;   /* درجة أعمق — بطاقات وفواصل */
  --ink:        #4e3621;   /* بني شوكولاتة — النص الأساسي  10.57:1 */
  --ink-soft:   #7a6448;   /* بني أفتح — نص ثانوي           5.29:1 */
  --espresso:   #3a2817;   /* بني أغمق — عمق */
  --line:       #ebe3d6;   /* خط شعري */

  /* ───────────────────────────────────────────────
     ٢) ألوان اتصلحت — كانت راسبة في التباين
     ─────────────────────────────────────────────── */

  /* ⚠️ كان #a89a86 بتباين 2.60:1 — تحت الحد بكتير.
        نص التفاصيل وعدد التقييمات كان صعب قراءته، خصوصاً
        تحت شمس بره (وضع تسوّق شائع). */
  --muted:      #7a6a56;   /* 4.92:1 ✅  (كان 2.60 ❌) */

  /* ⚠️ كان #cd5d4e بتباين 3.76:1 — والأحمر ده بيستخدم في
        الأسعار وحالة «نفد المخزون»، يعني معلومة مهمة. */
  --red:        #bc4a3b;   /* 4.74:1 ✅  (كان 3.76 ❌) */

  /* ⚠️ كان #4a9d72 بتباين 3.12:1 */
  --green:      #357455;   /* 5.24:1 ✅  (كان 3.12 ❌) */

  /* ───────────────────────────────────────────────
     ٣) الذهبي — للخلفيات والحدود، **مش للنص**
     ───────────────────────────────────────────────
     الذهبي الفاخر #c2a278 تباينه 2.27:1 على الورق. جميل
     كخلفية وكحد، لكن **ماينفعش نص** ولا حتى حلقة تركيز
     (الحد للعناصر غير النصية 3:1 وهو تحته).
     فبقى عندنا درجتين: واحدة للزينة وواحدة للوظيفة. */
  --gold:       #c2a278;   /* زينة · خلفيات · حدود */
  --gold-l:     #d0b48f;
  --gold-d:     #b8976c;
  --gold-text:  #856230;   /* 5.23:1 ✅ — لما الذهبي يبقى نص */
  --focus:      #856230;   /* حلقة التركيز — نفس الدرجة الوظيفية */

  /* ───────────────────────────────────────────────
     ٣-ب) سلّم رمادي **دافي**
     ───────────────────────────────────────────────
     ⚠️ الجرد لقى سلّم رمادي **بارد** بتاع Tailwind في شاشات
        الإدارة: #64748b · #94a3b8 · #475569 · #e2e8f0 · #cbd5e1
        · #f8fafc — مالوش أي علاقة باللوحة البنّي/الذهبي.
        النتيجة إن شاشات الحسابات شكلها من براند تاني.

     السلّم ده بديلهم — نفس الوظيفة بدرجات دافية. */
  --n-100: #f7f3ec;
  --n-200: #ebe3d6;   /* حدود وفواصل */
  --n-300: #d9cfc0;
  --n-400: #b0a394;   /* 2.33:1 — حدود بس، **مش نص** */
  --n-500: #7a6a56;   /* 4.92:1 ✅ نص ثانوي */
  --n-600: #5f5341;   /* 7.07:1 ✅ */
  --n-700: #4e3621;   /* 10.57:1 ✅ */

  /* ───────────────────────────────────────────────
     ٣-ج) ألوان الحالة
     ───────────────────────────────────────────────
     الجرد لقى **٦ درجات أحمر** مختلفة (#dc2626 · #c0392b ·
     #cc3333 · #dd3333 · #c62828 · #cd5d4e) و٣ أخضر و٣ كهرماني.
     كل واحدة اتحطّت في شاشة لوحدها.

     كل لون هنا مقيس **مرتين**: على الورق وعلى خلفيته الفاتحة. */
  --danger:      #b34434;   /* 5.22 على الورق · 4.78 على خلفيته */
  --danger-bg:   #fdeaea;
  --danger-line: #f3c9c4;

  --success:      #357455;  /* 5.24 · 4.97 */
  --success-bg:   #eaf5ee;
  --success-line: #bfe0cc;

  --warn:      #96601f;     /* 4.97 · 4.73 */
  --warn-bg:   #fef3c7;
  --warn-line: #ecd9a3;

  --white: #ffffff;

  /* ───────────────────────────────────────────────
     ٤) سلّم الخط — ٦ درجات (كان ٥١ مقاس)
     ───────────────────────────────────────────────
     الجرد لقى .9 و.95 و.98 جنب بعض — فرق أقل من بكسل،
     مفيش عين بتفرّق. دي مش قرارات، دي انحراف.
     السلّم هنا نسبته ثابتة تقريباً (1.15–1.33). */
  /* الشارات والعدّادات محتاجة أصغر من 12px فعلاً — والبديل إننا
     نكبّرها ونخليها تطلع بره دايرة العدّاد. السلّم بيتمدّ، المحتوى
     مابيتشوّهش. */
  --fs-2xs:  0.625rem;   /* 10px — شارات · عدّادات */
  --fs-xs:   0.75rem;    /* 12px — تفاصيل دقيقة */
  --fs-sm:   0.875rem;   /* 14px — نص ثانوي · تسميات */
  --fs-md:   1rem;       /* 16px — النص الأساسي */
  --fs-lg:   1.125rem;   /* 18px — عناوين فرعية · سعر */
  --fs-xl:   1.5rem;     /* 24px — عناوين الأقسام */
  --fs-2xl:  2rem;       /* 32px — عناوين كبيرة */

  /* درجتين للعرض الكبير (الهيرو والصفحات الترويجية).
     ⚠️ الجرد لقى ١٣ موضع فوق 1.8rem توصل لـ4rem. لو ضغطناهم
        على 2rem الهيرو هيبقى باهت — فالسلّم اتمدّ بدل ما
        المحتوى يتشوّه عشان يدخل في سلّم قاصر. */
  --fs-3xl:  2.5rem;     /* 40px — عناوين الأقسام الكبيرة */
  --fs-4xl:  3.5rem;     /* 56px — الهيرو */

  /* أوزان Cairo المحمّلة فعلاً — مفيش وزن برّه دول */
  --fw-light:    300;
  --fw-normal:   400;
  --fw-semi:     600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ارتفاع السطر: العربي محتاج أوسع من اللاتيني */
  --lh-tight:  1.3;    /* عناوين */
  --lh-body:   1.7;    /* نص متصل */

  /* ───────────────────────────────────────────────
     ٥) الحواف — ٣ درجات (كانت ١٤ قيمة)
     ───────────────────────────────────────────────
     ⚠️ صورة المنتج بتفضل 4px بقصد — الشكل التحريري
        بتاع مواقع الأزياء. مش كل حاجة لازم تتدوّر. */
  --r-sm:    8px;
  --r:      12px;
  --r-lg:   20px;
  --r-full: 999px;
  --r-img:   4px;    /* صور المنتجات — مقصود إنها شبه حادة */

  /* ───────────────────────────────────────────────
     ٦) الظلال — ٤ درجات
     ─────────────────────────────────────────────── */
  --sh-xs: 0 1px 3px rgba(78,54,33,.04);
  --sh-sm: 0 2px 14px rgba(78,54,33,.05);
  --sh:    0 14px 44px rgba(78,54,33,.08);
  --sh-lg: 0 28px 74px rgba(78,54,33,.13);

  /* ───────────────────────────────────────────────
     ٧) المسافات — سلّم رباعي
     ─────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ───────────────────────────────────────────────
     ٨) الحركة
     ─────────────────────────────────────────────── */
  --ease:      cubic-bezier(.25,1,.5,1);
  --dur-fast:  .18s;
  --dur:       .3s;
  --dur-slow:  .8s;   /* تكبير صورة المنتج */

  /* ───────────────────────────────────────────────
     ٩) أسماء قديمة — للتوافق أثناء النقل
     ───────────────────────────────────────────────
     ⚠️ مؤقتة. بتخلّي الكود القديم يشتغل من غير ما نلمس
        ٣٩٣ موضع دفعة واحدة. بتتشال في نهاية المرحلة ٢. */
  --brown:   var(--ink);
  --brown-d: var(--espresso);
  --cream:   var(--paper);
  --cream-2: var(--paper-2);
  --copper:  var(--gold);
}

/* ══════════════════════════════════════════════════════════════
   نقاط الكسر — ٣ بس (كانت ١٤)
   ══════════════════════════════════════════════════════════════
   الجرد لقى 560 و600 و620 — تلاتة لنفس الجهاز. وكمان
   820 و900 و980. كل مكوّن حطّ رقمه.

   ⚠️ CSS مابيسمحش بمتغيّرات جوّه @media، فالأرقام دي بتتكتب
      يدوي — بس `test_design_tokens` بيتأكد إن مفيش رقم تاني
      دخل. التوثيق هنا هو المرجع:

        الموبايل     ≤ 600px
        التابلت      ≤ 900px
        الشاشة       ≤ 1200px
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   حلقة التركيز — كانت مفقودة تماماً
   ══════════════════════════════════════════════════════════════
   `grep -c focus-visible` كان بيرجّع **صفر**. يعني اللي بيتنقّل
   بالكيبورد — أو بيستخدم قارئ شاشة — مش شايف هو واقف فين.

   `:focus-visible` بتظهر للكيبورد بس، مش للماوس — فمفيش حلقة
   مزعجة حوالين الأزرار عند الضغط بالفأرة.
   ══════════════════════════════════════════════════════════════ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* الأجهزة اللي بتقلّل الحركة — بنحترم الطلب في كل حاجة */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}