/* ==========================================================
   SouqMint — اتجاهات بصرية (Visual Directions)
   ----------------------------------------------------------
   يُحمَّل بعد app.css فيتجاوز التوكنز فقط، دون لمس أي مكوّن.
   التبديل من الإعدادات: <html data-ui="classic|nile|sand">
   والوضع: data-mode="light|dark" — أو "auto" (دفعة 50: حسب جهاز
   الزائر؛ سطر في <head> بيحوّله light/dark قبل أول رسم).

   قاعدة العمل: المكوّنات لا تعرف اسم الاتجاه إطلاقًا — كلها
   تقرأ نفس أسماء المتغيرات. لذلك تغيير الهوية سطر واحد، لا
   إعادة كتابة CSS.

   دفعة 50 (عيلة سيسنتا المشتركة):
   · الحياد واحد لكل الاتجاهات: فاتح F1 (صفحة #ECEEF1، كروت بيضا،
     رأس #E3E6EA، صفوف #F5F6F8، خطوط #D5D9DF) وداكن D1 فحمي محايد
     (#141414 / #1C1C1C / #242424 / #2F2F2F) — مفيش كحلي.
   · الحواف 8px في كل حتة (الشارات والأقراص بس دايرية).
   · مفيش تدرّجات: --hero بقى لون مسطّح.
   · الاتجاهات التلاتة بتفضل للألوان بس (البراند واللهجة).
   · كلاسيك = لون علامة سوق مينت نفسها #0B7F70 (أيقونة التطبيق).
   ========================================================== */

/* ===================== الحياد المشترك (F1) ===================== */
[data-ui]{
  --n-0:#ffffff; --n-25:#f5f6f8; --n-50:#eceef1; --n-100:#e3e6ea;
  --n-200:#d5d9df; --n-300:#c3c8d0; --n-400:#8b929e; --n-500:#5b6270;
  --n-600:#4a505b; --n-700:#363b45; --n-800:#23272e; --n-900:#16181d;

  /* سطح داكن ثابت (تذييل المتجر ورأس الفاتورة): فحمي محايد */
  --ink-surface:#1c1c1c; --ink-on:#ffffff; --ink-muted:#c4c4c4;
  --r-sm:8px; --r-md:8px; --r-lg:8px; --r-xl:8px;
  /* النجوم والتنبيه كنص: #8A5A12 = 5.9 على الأبيض و5.1 على الصفحة F1 (كان #b7791f = 3.64) */
  --warn:#8a5a12;
}

/* ============================ 1) كلاسيك ============================
   لون علامة سوق مينت (#0B7F70 — أيقونة التطبيق والمتجر).
   الزرار والروابط بدرجة أغمق شوية (#096B5E) عشان تعدّي 4.5 على
   خلفية الصفحة الرمادية F1 كمان، مش على الأبيض بس.
   ================================================================== */
[data-ui="classic"]{
  --brand-50:#f0f7f6; --brand-100:#ddedeb; --brand-200:#bbdbd7;
  --brand-300:#91c5bf; --brand-400:#54a59b; --brand-500:#0b7f70;
  --brand-600:#096b5e; --brand-700:#07564c; --brand-800:#06463e;
  --brand-900:#053831;
  --accent:#f0a202; --accent-ink:#3d2a00; --brand-ink:#ffffff;
  --sh-brand:0 4px 12px rgba(11,127,112,.18);
  --hero:#096b5e;
}

/* ============================= 2) نيلي =============================
   نيلي عميق + كهرماني دافئ للنداء إلى الفعل.
   ================================================================== */
[data-ui="nile"]{
  --brand-50:#eef2ff; --brand-100:#dbe3ff; --brand-200:#bcc9ff;
  --brand-300:#93a5fb; --brand-400:#6b7ff4; --brand-500:#4a5ee0;
  --brand-600:#3646bd; --brand-700:#2b3796; --brand-800:#232d78;
  --brand-900:#1a2259;
  --accent:#f2a71b; --accent-ink:#3a2600; --brand-ink:#ffffff;
  --sh-brand:0 4px 12px rgba(74,94,224,.18);
  --hero:#3646bd;
}

/* ============================ 3) رملي ==============================
   طوبي دافئ. الخلفية بقت من الحياد المشترك؛ الاتجاه للألوان بس.
   ================================================================== */
[data-ui="sand"]{
  --brand-50:#fdf3ef; --brand-100:#fae2d8; --brand-200:#f3c4b1;
  --brand-300:#e79f84; --brand-400:#d87a5c; --brand-500:#c25a3c;
  --brand-600:#a4472e; --brand-700:#853825; --brand-800:#6b2e20;
  --brand-900:#55261b;
  --accent:#2f7d6b; --accent-ink:#ffffff; --brand-ink:#ffffff;
  --sh-brand:0 4px 12px rgba(194,90,60,.18);
  --hero:#a4472e;
}

/* ======================== الوضع الداكن (D1) ==========================
   المكوّنات لا تعرف بوجوده: نقلب سلّم الحياد ونرفع سطوع البراند
   قليلًا حتى يبقى تباين النص 4.5:1 على الأقل. فحمي محايد بلا زُرقة.
   =============================================================== */
[data-mode="dark"]{
  --n-0:#1c1c1c; --n-25:#191919; --n-50:#141414; --n-100:#242424;
  --n-200:#2f2f2f; --n-300:#3d3d3d; --n-400:#8f8f8f; --n-500:#a0a0a0;
  --n-600:#bdbdbd; --n-700:#cfcfcf; --n-800:#e2e2e2; --n-900:#ededed;

  /* الدلالية تُقلب أيضًا وإلا صار نص فاتح على خلفية فاتحة في الشارات */
  /* #f87171 مع نص أبيض = 2.77، تحت الحد بكثير */
  --danger-ink:#111111;
  --ok:#4ade80;   --ok-bg:#16261c;
  --warn:#fbbf24; --warn-bg:#2a2414;
  --danger:#f87171; --danger-bg:#2c1817;
  --info:#93b4fd; --info-bg:#18202e;
  /* دفعة 48: حبر الشارات والتنبيهات — قيم الفاتح (#8a5a12…) كانت 2.3–2.6 هنا */
  --ok-text:#4ade80; --warn-text:#fbbf24; --danger-text:#fca5a5; --info-text:#a9c3fd;
  --ok-bd:#1f4a32; --warn-bd:#54431a; --danger-bd:#5e2a26; --info-bd:#2a3a5c;
  --img-ph-filter:invert(.88) hue-rotate(180deg);
  /* مربعات الاختيار والقوائم والتقويم الأصلية للمتصفح تاخد الشكل الداكن */
  color-scheme:dark;
  --ink-surface:#101010; --ink-on:#ededed; --ink-muted:#a0a0a0;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 6px rgba(0,0,0,.45);
  --sh-3:0 10px 30px rgba(0,0,0,.55);
}
/* كلاسيك الداكن: لون الكتالوج #14B8A6 كخلفية زرار بحبر غامق (7.4) */
[data-mode="dark"][data-ui="classic"]{ --brand-500:#14b8a6; --brand-600:#2dd4bf; --brand-700:#5eead4;--brand-50:#10302c;--brand-100:#123f39;--brand-200:#17564e; --brand-ink:#111111; --hero:#123f39; }
[data-mode="dark"][data-ui="nile"]   { --brand-500:#6b7ff4; --brand-600:#93a5fb; --brand-700:#bcc9ff;--brand-50:#1b1f33;--brand-100:#222846;--brand-200:#2b3776; --brand-ink:#111111; --hero:#222846; }
[data-mode="dark"][data-ui="sand"]   { --brand-500:#e79f84; --brand-600:#f3c4b1; --brand-700:#fae2d8;--brand-50:#2a1a14;--brand-100:#3d251c;--brand-200:#5a3527; --brand-ink:#111111; --hero:#3d251c; }

/* الصور لا يجوز أن تُطفأ في الوضع الداكن، لكن الشفاف منها يحتاج أرضية */
[data-mode="dark"] img[src$=".svg"]{background:var(--n-100);border-radius:var(--r-sm)}

/* ===================== تحسينات مشتركة للاتجاهات ===================== */
.hero-grad{background:var(--hero)}
.btn-accent{--btn-bg:var(--accent);--btn-fg:var(--accent-ink);--btn-bd:var(--accent)}

/* التركيز يُنسَّق ولا يُحذف — شرط وصول لا تفاوض عليه */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--brand-500); outline-offset:2px; border-radius:var(--r-sm);
}