/* ═══════════════════════════════════════════════════════════
   CSP — توكنات التصميم | مصدر الحقيقة الوحيد
   يُستورَد قبل أي ملف CSS آخر في كل صفحة بلا استثناء.
   لا تُعرَّف أي قيمة لون أو مسافة أو حجم خط خارج هذا الملف.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ───── مقياس المسافات (ثمانية فقط — لا تخترع قيمًا بينها) ───── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* ───── مقياس الخط (ستة أدوار فقط) ───── */
  --text-caption: 12px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-h3: 20px;
  --text-h2: 24px;
  --text-h1: 32px;

  /* ───── الاستدارة والظل ───── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .18);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .22);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .32);

  --max-width: 1160px;
  --ring-width: 2px;

  /* ═══ الأدوار الدلالية — المود الافتراضي: متعدد الألوان ═══
     كل سطح مقترن بلون نصه (surface ↔ on-surface) فيستحيل
     بناء تركيبة غير مقروءة. */
  --bg: #0a0512;
  --on-bg: #f2eef7;

  --surface-1: #120a1f;   /* أسطح ثانوية: شريط علوي، قوائم */
  --on-surface-1: #f2eef7;
  --surface-2: #17102a;   /* البطاقات */
  --on-surface-2: #f2eef7;
  --surface-3: rgba(255, 255, 255, .04); /* حقول الإدخال، أسطح داخلية */
  --on-surface-3: #f2eef7;

  /* السطح الشفاف للأشرطة اللاصقة — يجب أن يتغيّر مع المود.
     تثبيته حرفيًا هو سبب انكسار المود الفاتح سابقًا. */
  --surface-overlay: rgba(10, 5, 18, .85);

  --text-muted: #b9aecb;
  --border: #2c1f45;
  --border-strong: #453363;

  --accent: #e3b94e;
  --accent-hover: #f2d488;
  --on-accent: #241407;
  --ring: #e3b94e;

  --ok: #6ee7b7;
  --ok-bg: rgba(37, 211, 102, .15);
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, .15);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, .15);
  --danger-border: rgba(248, 113, 113, .4);

  --brand-whatsapp: #25d366;
  --on-brand-whatsapp: #06210f;

  --glow: #251536;
  --page-bg: radial-gradient(circle at 50% -10%, var(--glow) 0%, var(--bg) 55%);

  /* قائمة <option> المفتوحة يرسمها المتصفح بخلفيته الخاصة —
     تُثبَّت صراحةً وإلا ورث النص لونًا فاتحًا على خلفية بيضاء */
  --option-bg: #ffffff;
  --option-fg: #1a1220;
}

/* ───────── مود: أبيض وأسود ───────── */
html.mode-black-white {
  --bg: #0a0a0a;
  --on-bg: #f5f5f5;
  --surface-1: #141414;
  --on-surface-1: #f5f5f5;
  --surface-2: #1c1c1c;
  --on-surface-2: #f5f5f5;
  --surface-3: rgba(255, 255, 255, .05);
  --on-surface-3: #f5f5f5;
  --surface-overlay: rgba(10, 10, 10, .85);

  --text-muted: #a3a3a3;
  --border: #333333;
  --border-strong: #4d4d4d;

  --accent: #ffffff;
  --accent-hover: #e5e5e5;
  --on-accent: #0a0a0a;
  --ring: #ffffff;

  --glow: #1c1c1c;
}

/* ───────── مود: أبيض + لون مميّز (فاتح) ───────── */
html.mode-white-accent {
  --bg: #f7f5f2;
  --on-bg: #1a1220;
  --surface-1: #ffffff;
  --on-surface-1: #1a1220;
  --surface-2: #ffffff;
  --on-surface-2: #1a1220;
  --surface-3: rgba(0, 0, 0, .035);
  --on-surface-3: #1a1220;
  --surface-overlay: rgba(255, 255, 255, .88);

  --text-muted: #6b6458;
  --border: #e5e0d8;
  --border-strong: #cfc7b8;

  --accent: #b8860b;
  --accent-hover: #9a7009;
  --on-accent: #ffffff;
  --ring: #b8860b;

  --ok: #047857;
  --ok-bg: rgba(4, 120, 87, .12);
  --warn: #b45309;
  --warn-bg: rgba(180, 83, 9, .12);
  --danger: #b91c1c;
  --danger-bg: rgba(185, 28, 28, .1);
  --danger-border: rgba(185, 28, 28, .35);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .12);

  --glow: #efe4cc;
}

/* ═══════════════════════════════════════════════════════════
   أسماء توافقية — طبقة انتقالية
   الكود القائم يستخدم الأسماء القديمة في مئات المواضع. تُبقى
   كأسماء مستعارة فقط حتى تُهاجَر تدريجيًا، فيكون هذا التعديل
   غير كاسر. لا تستخدم أيًا منها في كود جديد.
   (حُذف --purple و --purple-deep نهائيًا: صفر استخدام فعلي)
   ═══════════════════════════════════════════════════════════ */
:root,
html.mode-black-white,
html.mode-white-accent {
  --bg-soft: var(--surface-1);
  --card: var(--surface-2);
  --card-border: var(--border);
  --text: var(--on-bg);
  --text-dim: var(--text-muted);
  --gold: var(--accent);
  --gold-soft: var(--accent-hover);
  --green: var(--brand-whatsapp);
  --red: var(--danger);
  --radius: var(--radius-lg);
  --max-w: var(--max-width);
}

/* ═══════════════ الأساس ═══════════════ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg) fixed;
  color: var(--on-bg);
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  font-size: var(--text-body);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

input, select, textarea, button { font-family: inherit; }

/* إتاحة تتبّع لوحة المفاتيح — كانت غائبة تمامًا */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--ring-width) solid var(--ring);
  outline-offset: 2px;
}