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

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

/* ============================ 1) كلاسيك ============================
   أخضر زمردي هادئ، محايد بارد. لغة «سوق موثوق»: الأمان أولًا.
   الأنسب لسوق عام متعدد القطاعات لا يريد أن ينحاز لقطاع بعينه.
   (هذا هو الاتجاه المطبَّق حاليًا — موجود هنا للاكتمال والمقارنة.)
   ================================================================== */
[data-ui="classic"]{
  --brand-50:#effcf9; --brand-100:#c9f5ec; --brand-200:#98ead9;
  --brand-300:#5fd8c2; --brand-400:#2dbfa6; --brand-500:#0f9e8a;
  --brand-600:#0b7f70; --brand-700:#0c665b; --brand-800:#0d514a;
  --brand-900:#0c433e;
  --accent:#f0a202; --accent-ink:#3d2a00; --brand-ink:#ffffff;

  --n-0:#ffffff; --n-25:#fcfcfd; --n-50:#f8fafc; --n-100:#f1f5f9;
  --n-200:#e2e8f0; --n-300:#cbd5e1; --n-400:#94a3b8; --n-500:#64748b;
  --n-600:#475569; --n-700:#334155; --n-800:#1e293b; --n-900:#0f172a;

  --sh-brand:0 8px 24px rgba(15,158,138,.22);
  --ink-surface:#0c2b28; --ink-on:#ffffff; --ink-muted:#cbd5e1;
  --hero:linear-gradient(160deg,#0c433e 0%,#0b7f70 55%,#0f9e8a 100%);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
}

/* ============================= 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;

  --n-0:#ffffff; --n-25:#fcfcfe; --n-50:#f7f8fc; --n-100:#eef0f7;
  --n-200:#dfe2ee; --n-300:#c5cade; --n-400:#8f97b4; --n-500:#606a8b;
  --n-600:#464f6d; --n-700:#333a52; --n-800:#1e2338; --n-900:#121629;

  --sh-brand:0 10px 28px rgba(74,94,224,.24);
  --ink-surface:#131836; --ink-on:#ffffff; --ink-muted:#cbd5e1;
  --hero:linear-gradient(160deg,#1a2259 0%,#3646bd 55%,#4a5ee0 100%);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
}

/* ============================ 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;

  --n-0:#ffffff; --n-25:#fffdfb; --n-50:#faf6f1; --n-100:#f3ece3;
  --n-200:#e6dccf; --n-300:#d3c5b3; --n-400:#a3937f; --n-500:#7a6c5a;
  --n-600:#5d5245; --n-700:#453d33; --n-800:#2c2721; --n-900:#1b1814;

  --sh-brand:0 10px 28px rgba(194,90,60,.22);
  --ink-surface:#241611; --ink-on:#ffffff; --ink-muted:#cbd5e1;
  --hero:linear-gradient(160deg,#55261b 0%,#a4472e 55%,#c25a3c 100%);
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
}

/* ======================== الوضع الداكن ==========================
   المكوّنات لا تعرف بوجوده: نقلب سلّم الحياد ونرفع سطوع البراند
   قليلًا حتى يبقى تباين النص 4.5:1 على الأقل.
   =============================================================== */
[data-mode="dark"]{
  --n-0:#141a24; --n-25:#161d28; --n-50:#0f141c; --n-100:#1b2330;
  --n-200:#26303f; --n-300:#36435a; --n-400:#7a879c; --n-500:#9aa6ba;
  --n-600:#b8c2d2; --n-700:#d2dae6; --n-800:#e8edf4; --n-900:#f6f8fb;

  /* الدلالية تُقلب أيضًا وإلا صار نص فاتح على خلفية فاتحة في الشارات */
  /* #f87171 مع نص أبيض = 2.77، تحت الحد بكثير */
  --danger-ink:#111111;
  --ok:#4ade80;   --ok-bg:#0f2b1e;
  --warn:#fbbf24; --warn-bg:#2e2412;
  --danger:#f87171; --danger-bg:#2e1614;
  --info:#93b4fd; --info-bg:#14203c;
  --ink-surface:#0a0e15; --ink-on:#f6f8fb; --ink-muted:#9aa6ba;
  --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);
}
[data-mode="dark"][data-ui="classic"]{ --brand-500:#2dbfa6; --brand-600:#5fd8c2; --brand-700:#98ead9;--brand-50:#0e2f2b;--brand-100:#12433c;--brand-200:#1a5e55; --brand-ink:#111111; }
[data-mode="dark"][data-ui="nile"]   { --brand-500:#6b7ff4; --brand-600:#93a5fb; --brand-700:#bcc9ff;--brand-50:#161c3a;--brand-100:#1e2752;--brand-200:#2b3776; --brand-ink:#111111; }
[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; }

/* الصور لا يجوز أن تُطفأ في الوضع الداكن، لكن الشفاف منها يحتاج أرضية */
[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);
}