/* ============================================================
   المتجر العام — لون التمييز حسب نشاط الشركة
   ============================================================
   البنية هوية جواهر موحَّدة (كحلي + السلّم المحايد + خطوط العلامة)،
   ولون التمييز يُشتق من نشاط الشركة: الذهب ذهبي، الفضة فضية،
   الألماس أزرق ثلجي، الساعات برونزي، الإكسسوارات تركوازي.

   كل الدرجات مُتحقَّق من تباينها فعليًا (WCAG AA ≥ 4.5:1):
     - نص أبيض فوق `--sfa-base`
     - `--sfa-base` نصًا فوق سطح أبيض
     - `--sfa-light` نصًا فوق سطح كحلي
     - حبر جواهر فوق `--sfa-soft`
   لا تُعدَّل درجة دون إعادة الفحص — درجة أفتح تكسر نص الأزرار.

   `--sfa-soft` سطح دافئ/بارد **من عائلة لون التمييز نفسه**، فلا يلتقي
   ذهبي دافئ برمادي أزرق فيبهت. هذا ما يمنع تشوّه مزج الألوان.
   ============================================================ */

:root,
body[data-activity] {
    /* الافتراضي: تركواز جواهر (نشاط غير معروف أو غير محدَّد) */
    --sfa-base: #0c8479;
    --sfa-light: #14b8a6;
    --sfa-dark: #0f766e;
    --sfa-soft: #d9f4f0;
    --sfa-tint: #eefaf8;
    --sfa-ink: #ffffff;
    --sfa-rgb: 12, 132, 121;

    /* ثوابت الهوية — مشتركة بين كل الأنشطة */
    --sfa-navy: #0e1a2b;
    --sfa-navy-2: #13243d;
    --sfa-muted: #6b7a90;
    --sfa-line: #d9e2ec;
}

/* ───────── الذهب ───────── */
body[data-activity="gold"] {
    --sfa-base: #996f09;
    --sfa-light: #d4af37;
    --sfa-dark: #6d4f06;
    --sfa-soft: #fdf6e6;
    --sfa-tint: #fffbf1;
    --sfa-ink: #ffffff;
    --sfa-rgb: 153, 111, 9;
}

/* ───────── الفضة ───────── */
body[data-activity="silver"] {
    --sfa-base: #64748b;
    --sfa-light: #a7b4c4;
    --sfa-dark: #475569;
    --sfa-soft: #f1f5f9;
    --sfa-tint: #f8fafc;
    --sfa-ink: #ffffff;
    --sfa-rgb: 100, 116, 139;
}

/* ───────── الألماس ───────── */
body[data-activity="diamond"],
body[data-activity="diamonds"] {
    --sfa-base: #027cba;
    --sfa-light: #38bdf8;
    --sfa-dark: #075985;
    --sfa-soft: #e0f2fe;
    --sfa-tint: #f0f9ff;
    --sfa-ink: #ffffff;
    --sfa-rgb: 2, 124, 186;
}

/* ───────── الساعات ───────── */
body[data-activity="watches"],
body[data-activity="watch"] {
    --sfa-base: #b45309;
    --sfa-light: #f59e0b;
    --sfa-dark: #7c2d12;
    --sfa-soft: #fff7ed;
    --sfa-tint: #fffbf5;
    --sfa-ink: #ffffff;
    --sfa-rgb: 180, 83, 9;
}

/* ───────── الإكسسوارات ───────── */
body[data-activity="accessories"],
body[data-activity="accessory"] {
    --sfa-base: #0c8479;
    --sfa-light: #14b8a6;
    --sfa-dark: #0f766e;
    --sfa-soft: #d9f4f0;
    --sfa-tint: #eefaf8;
    --sfa-ink: #ffffff;
    --sfa-rgb: 12, 132, 121;
}

/* ============================================================
   ربط رموز كل ثيم بنظام التمييز.

   مصيدتان لا بد من مراعاتهما هنا:

   1. **الأسبقية.** رموز كل ثيم معرَّفة على `:root` وأسبقيّتها (0,1,0)
      تغلب `body` (0,0,1) مهما تأخّر ترتيب التحميل. لذا يُربط هنا
      بـ`body[data-activity]` (0,1,1) — أعلى من `:root`.

   2. **موضع حلّ `var()`.** لو كُتب الربط على `:root` لحُلَّ
      `var(--sfa-base)` بقيمته **عند الجذر** (التركواز الافتراضي) ثم
      ورثته العناصر ثابتًا، فلا يتغيّر بتغيّر النشاط. الربط على `body`
      — حيث تُعرَّف `--sfa-*` حسب النشاط — هو ما يجعل اللون يتبع النشاط.

   كل ثيم يحتفظ بتخطيطه وطابعه؛ المتغيّر وحده لون التمييز وسطحه الناعم.
   ============================================================ */

body[data-activity] {
    /* الثيم الافتراضي (كلاسيكي) */
    --gold: var(--sfa-base);
    --gold-hover: var(--sfa-dark);
    --gold-rgb: var(--sfa-rgb);
    --cream: var(--sfa-soft);

    /* الثيم الفاخر */
    --lx-gold: var(--sfa-base);
    --lx-gold-light: var(--sfa-light);
    --lx-gold-dark: var(--sfa-dark);
    --lx-cream: var(--sfa-soft);
    --lx-cream-dark: var(--sfa-tint);
    --lx-gradient: linear-gradient(135deg, var(--sfa-base) 0%, var(--sfa-light) 50%, var(--sfa-base) 100%);
    --lx-font: 'IBM Plex Sans Arabic', system-ui, sans-serif;

    /* الثيم الزمردي */
    --em-emerald: var(--sfa-dark);
    --em-emerald-2: var(--sfa-base);
    --em-gold: var(--sfa-base);
    --em-gold-soft: var(--sfa-soft);
    --em-cream: var(--sfa-tint);
    --em-font: 'IBM Plex Sans Arabic', system-ui, sans-serif;

    /* الثيم العصري */
    --md-accent: var(--sfa-base);
    --md-accent-light: var(--sfa-light);
    --md-primary: var(--sfa-navy);
    --md-font: 'IBM Plex Sans Arabic', system-ui, sans-serif;

    /* القشرة المشتركة */
    --sf-gold: var(--sfa-base);
    --sf-gold-light: var(--sfa-light);
    --sf-gold-dark: var(--sfa-dark);
    --sf-gradient: linear-gradient(135deg, var(--sfa-base) 0%, var(--sfa-light) 50%, var(--sfa-base) 100%);
    --sf-border: rgba(var(--sfa-rgb), .18);
    --sf-font: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}

/* ───────── الخطوط: هوية جواهر ───────── */
body,
button,
input,
select,
textarea {
    font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* الأسعار والأرقام لاتينية داخل نص عربي */
.sf-price,
.sf-product__price,
.sf-weight,
[data-price] {
    font-variant-numeric: tabular-nums;
}

/* ───────── صورة البنر ─────────
   `--sfa-banner` تُحقَن من `resources/views/storefront/partials/_brand-styles.blade.php`
   عبر `asset()`، لا هنا: `url()` النسبي داخل متغيّر مخصّص يُحلّ بالنسبة لعنوان
   الصفحة لا لورقة الأنماط، فينكسر على أي مسار غير الجذر. */