/* ═══════════════════════════════════════════════════════════════
   الثيم — متغيرات بس (eng-review عقد الثيم: هالملف يغيّر :root بس)

   ينحمّل بعد app.css. ثيم ثاني بعدين = مجلد يديد بنفس الأسماء،
   بدون أي تعديل بـapp.css.

   الألوان الأساسية من المالك (D14). المشتقة محسوبة لين كل نص
   يتجاوز ٤٫٥:١ على كل سطح، بالوضعين (القياس بسكربت WCAG):
     الفاتح: brand-ink على الخلفية ٥٫٨١ · أبيض على الزر ٦٫٤٢ ·
             muted ٥٫٠٢ · ok على surface-2 ≥ ٤٫٥
     الداكن: brand-ink ٧٫٩٦ · muted ٦٫٨٢
   ⚠️ أي تغيير لون لازم يرجع ينقاس بنفس السكربت.

   الألوان مستوحاة من ماسكوت المتجر (Reze). صورتها والخلفية منفصلين عن
   الثيم: SITE_MASCOT و SITE_BACKGROUND بـ .env.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  /* --font للنصوص و --font-display للعناوين والشعار (D10) */
  --font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  /* ── ألوان المالك ── */
  --brand: #8a6bc4;
  --brand-ink: #6b4fa3;      /* الهوية كنص: روابط، أزرار، العنصر النشط */
  --brand-soft: #d9cdf0;
  --spark: #f08a5d;          /* زخرفة بس — أبداً ما يلوّن حالة */
  --blush: #f3c6dc;          /* زخرفة وتدرجات بس */
  --on-brand: #ffffff;

  /* ── السطوح والنص (مشتقة من #f6f2fb و#2a2038، مائلة للبنفسجي) ── */
  --bg: #f6f2fb;
  --bg-elev: #fbf9fd;
  --surface: #ffffff;
  --surface-2: #efe8f8;
  --surface-3: #e5dcf3;
  --line: #d9cdf0;
  --line-soft: #ebe4f5;
  --text: #2a2038;
  --text-2: #4f4366;
  --muted: #6e6385;

  /* ── الحالات (معنى واحد لكل لون) ── */
  --ok: #25704f;
  --ok-wash: rgba(37, 112, 79, .1);
  --warn: #8a5a00;           /* دايماً مع أيقونة */
  --warn-wash: rgba(138, 90, 0, .1);
  --danger: #b8352e;
  --danger-wash: rgba(184, 53, 46, .08);
  --danger-line: rgba(184, 53, 46, .3);
  --info: #2f62c9;
  --info-wash: rgba(47, 98, 201, .08);

  /* ── توافق مع أسماء app.css القديمة لين تنربط كلها بمعناها ── */
  --accent: var(--brand-ink);
  --accent-btn: var(--brand-ink);
  --accent-btn-hover: #5c4291;
  --accent-wash: rgba(107, 79, 163, .1);
  --accent-line: rgba(107, 79, 163, .32);
  --on-accent: var(--on-brand);
  --gold: var(--warn);
  --gold-wash: var(--warn-wash);

  /* الظل الوحيد: له إزاحة، مو هالة (D11) */
  --shadow-sm: 0 1px 2px rgba(42, 32, 56, .08);
  --shadow: 0 2px 8px rgba(42, 32, 56, .1);
  --shadow-lg: 0 8px 24px -8px rgba(42, 32, 56, .18);

  /* مقاس الخطوط (D14): ١٤ · ١٦ · ١٨ · ٢٢ · ٢٨ · ٣٦ */
  --fs-sm: .875rem;
  --fs: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
}

/* الداكن المشتق (D15): يطلع بس لو جهاز الزائر داكن */
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #8a6bc4;
    --brand-ink: #b79cf0;
    --brand-soft: #2e2540;
    --blush: #3a2440;         /* الوردي على خلفية داكنة يصير لمسة مو بقعة */
    --on-brand: #16111f;

    --bg: #16111f;
    --bg-elev: #1a1424;
    --surface: #1d1729;
    --surface-2: #251d34;
    --surface-3: #2e2540;
    --line: #3a2f4f;
    --line-soft: #2a2238;
    --text: #ece6f7;
    --text-2: #c9bedd;
    --muted: #a497bd;

    --ok: #5fd39f;
    --ok-wash: rgba(95, 211, 159, .12);
    --warn: #f2b450;
    --warn-wash: rgba(242, 180, 80, .12);
    --danger: #ff8a80;
    --danger-wash: rgba(255, 138, 128, .1);
    --danger-line: rgba(255, 138, 128, .32);
    --info: #8db4ff;
    --info-wash: rgba(141, 180, 255, .1);

    --accent-btn-hover: #c8b2f5;
    --accent-wash: rgba(183, 156, 240, .12);
    --accent-line: rgba(183, 156, 240, .32);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 8px rgba(0, 0, 0, .45);
    --shadow-lg: 0 8px 24px -8px rgba(0, 0, 0, .6);
  }
}

/* سطوح المتصفح من الألوان، مو افتراضي المتصفح (D14) */
::selection { background: var(--brand-soft); color: var(--text); }
:root { caret-color: var(--brand-ink); accent-color: var(--brand-ink); scrollbar-color: var(--brand) var(--surface-2); }
:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }