/* ══════════════════════════════════════════════════════════════
   نواة تصميم المتجر — للمتجر بس
   ══════════════════════════════════════════════════════════════

   هوية المتجر اتفصلت عن هوية السيستم بقرار صاحب النظام: المتجر
   بياخد ألوانه وخطوطه ومقاساته من هنا، وdesign_tokens.css (نواة
   السيستم) مابتتلمسش.

   القاعدة زي نواة السيستم:  **الشاشة بتسأل، مابتقرّرش.**
   أي مكوّن في المتجر محتاج لون أو مقاس بياخده من هنا. قيمة مش
   موجودة = السلّم ناقص، مش إذن باختراع قيمة.

   ⚠️ الألوان **مقاسة** مش مختارة بالعين: tests/test_store_theme.py
      بيحسب تباين كل لون نص بمعادلة WCAG مع كل تشغيل.

   ⚠️ ماتستخدمش هنا ولا في قوالب المتجر الجديدة أسماء نواة السيستم
      (--paper, --ink, --gold …) — الحارس بيمنع خلط الهويتين.
   ══════════════════════════════════════════════════════════════ */

:root {

  /* ───── الأساس المحايد — الصور هي اللي بتتكلم ───── */
  --st-bg:        #ffffff;
  --st-surface:   #f7f2f0;   /* خلفية الصور والأقسام */
  --st-line:      #e9e1dd;   /* خطوط فاصلة — زخرفي */
  --st-field:     #8f8680;   /* حدود الخانات: 3.57:1 (حد العناصر غير النصية 3:1) */

  --st-ink:       #1c1917;   /* النص الأساسي      17.49:1 */
  --st-ink-2:     #57534e;   /* النص الثانوي       7.63:1 */
  --st-muted:     #6f6760;   /* النص الخافت        5.55:1 · 5.00 على السطح */
  --st-disabled:  #a8a29e;   /* مقاس خلصان — عنصر معطّل، مالوش حد تباين */

  /* ───── لون الهوية: توتي ───── */
  --st-accent:      #6b2449; /* الأبيض عليه 10.64:1 */
  --st-accent-2:    #561b3a; /* ضغط/مرور */
  --st-accent-soft: #f4e9ee; /* التوتي عليه 8.99:1 */
  --st-on-accent:   #ffffff;

  /* ───── الحالات ───── */
  --st-sale:     #b42318;    /* سعر الخصم وشارته   6.57:1 */
  --st-ok:       #067647;    /* الخصم في السلة     5.69:1 */
  --st-ok-bg:    #ecfdf3;
  --st-warn:     #93370d;    /* تنبيه              7.21:1 على خلفيته */
  --st-warn-bg:  #fffaeb;

  /* ───── الفوتر ───── */
  --st-foot-bg:    #2a1520;
  --st-foot-ink:   #f5ebf0;  /* 14.69:1 */
  --st-foot-muted: #d2bcc7;  /* 9.59:1 */
  --st-foot-line:  rgba(255, 255, 255, .16);

  --st-focus: #6b2449;       /* حلقة التركيز */

  /* واتساب — أغمق من أخضر العلامة عشان الأيقونة البيضا تتقري (4.31:1) */
  --st-wa: #128c4a;

  /* ───── الظلال والتعتيم ───── */
  --st-shadow-sm: 0 1px 4px rgba(28, 25, 23, .12);
  --st-shadow:    0 4px 16px rgba(28, 25, 23, .14);
  --st-shadow-lg: 0 12px 40px rgba(28, 25, 23, .20);
  --st-shadow-up: 0 -4px 16px rgba(28, 25, 23, .08);  /* شريط ثابت تحت (تأكيد الطلب) */
  --st-scrim:     rgba(28, 16, 22, .45);
  /* تدرّج تحت نص الهيرو — النص الأبيض يفضل مقروء على أي صورة */
  --st-img-shade: linear-gradient(to top, rgba(20, 12, 16, .66), rgba(20, 12, 16, .30) 55%, rgba(20, 12, 16, 0));

  /* ───── الخطوط ───── */
  --st-font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --st-font-display: 'El Messiri', 'IBM Plex Sans Arabic', serif;
  --st-fw: 400;
  --st-fw-bold: 600;         /* الوزنين المحمّلين بس — 500 مش محمّل */

  /* ───── سلّم الخط ─────
     الموبايل أولاً: النص 15px، والخانات 16px (أقل من كده iOS بيكبّر الصفحة). */
  --st-fs-2xs:  .6875rem;    /* 11 — شارات */
  --st-fs-xs:   .75rem;      /* 12 — تفاصيل */
  --st-fs-sm:   .8125rem;    /* 13 — أسماء الكروت */
  --st-fs-base: .9375rem;    /* 15 — النص */
  --st-fs-md:   1rem;        /* 16 — الخانات والأزرار الكبيرة */
  --st-fs-lg:   1.125rem;    /* 18 — السعر في صفحة المنتج */
  --st-fs-xl:   1.375rem;    /* 22 — عناوين الأقسام */
  --st-fs-2xl:  1.75rem;     /* 28 */
  --st-fs-3xl:  2.25rem;     /* 36 — الهيرو على الموبايل */
  --st-fs-4xl:  3rem;        /* 48 — الهيرو على الكمبيوتر */

  /* ───── الحواف: شبه حادة — شكل متاجر الأزياء ───── */
  --st-r-1: 2px;
  --st-r-2: 4px;
  --st-r-sheet: 14px;        /* اللوحات اللي بتطلع من تحت */
  --st-r-full: 999px;

  /* ───── المقاسات ───── */
  --st-g: 16px;              /* هامش الصفحة */
  --st-maxw: 1320px;
  --st-hdr-h: 58px;
  --st-tap: 44px;            /* أقل هدف لمس */

  /* ───── الطبقات — ترتيب واحد ─────
     عطل «الشات فوق زرار إتمام الطلب» كان سببه أرقام متفرقة في كل
     ملف. هنا الترتيب كله في مكان واحد. */
  --st-z-float:  40;         /* زرار المساعدة */
  --st-z-sticky: 45;         /* شريط الشراء الثابت */
  --st-z-header: 50;
  --st-z-scrim:  80;         /* الخلفية المعتمة — بتغطي العائم */
  --st-z-drawer: 81;         /* الدرج والقايمة واللوحات */
  --st-z-toast:  90;

  /* ───── الحركة ───── */
  --st-ease: cubic-bezier(.2, .7, .2, 1);
  --st-dur: .25s;
}

/* الكمبيوتر: هيدر أعلى وهامش أوسع — نفس الأسماء، قيمة تانية */
@media (min-width: 900px) {
  :root {
    --st-g: 32px;
    --st-hdr-h: 76px;
  }
}