/* ============================================================
   design-system — الهوية البصرية كاملة في هذا الملف فقط
   لتغيير التصميم الخارجي: عدّل هنا ولا شيء غيره (design.md D2)
   ============================================================ */

:root {
  /* --- الخطوط (Google Fonts مع fallback محلي) --- */
  --font-title: "Alexandria", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* --- المقياس الطباعي (clamp بين 375px و 1600px) --- */
  --fs-h1: clamp(2.4rem, 0.9rem + 6.4vw, 7.5rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.2rem);
  --fs-link: clamp(0.9rem, 0.86rem + 0.18vw, 1.05rem);
  --fs-mini: clamp(0.82rem, 0.8rem + 0.1vw, 0.95rem);

  /* --- مسافات متغيّرة مع عرض الشاشة --- */
  --sp-xs: clamp(0.5rem, 0.4rem + 0.4vw, 1rem);
  --sp-s: clamp(1rem, 0.8rem + 0.8vw, 2rem);
  --sp-m: clamp(1.5rem, 1rem + 1.6vw, 3rem);
  --sp-l: clamp(2.5rem, 1.8rem + 2.4vw, 5rem);
  --sp-xl: clamp(4rem, 2.5rem + 4vw, 8rem);

  /* --- أبعاد وحدود --- */
  --max-width: 1600px;
  --radius-s: 0.5rem;
  --radius: 1rem;
  --radius-l: 2.5rem;
  --pad-x: clamp(1rem, 0.6rem + 1.5vw, 2.5rem);

  /* --- حركة --- */
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out: cubic-bezier(0, 0.49, 0, 1);
  --speed: 0.35s;

  /* --- طبقات --- */
  --z-base: 1;
  --z-content: 50;
  --z-nav: 1000;
  --z-loader: 9999;
  --z-cursor: 9998;

  color-scheme: light;
}

/* ----------------------- الوضع الفاتح ----------------------- */
:root,
:root[data-theme="light"] {
  --bg: #f6f1fb;
  --bg-elevated: #ffffff;
  --text: #2a1a4a;
  --text-2: #55477a;
  --text-3: #6b5f92; /* تباين WCAG AA على #f6f1fb ≈ 5.0:1 */
  --on-accent: #ffffff;

  --accent: #7b34c9;
  --accent-strong: #5d22a3;
  --accent-soft: rgba(123, 52, 201, 0.1);

  --border: rgba(42, 26, 74, 0.1);
  --border-strong: rgba(42, 26, 74, 0.18);
  --surface-glass: rgba(255, 255, 255, 0.65);
  --surface-glass-2: rgba(255, 255, 255, 0.4);

  --shadow-lg: 0 40px 80px -30px rgba(60, 20, 110, 0.35);
  --shadow-sm: 0 8px 24px -12px rgba(60, 20, 110, 0.3);

  --selection-bg: #7b34c9;
  --selection-fg: #ffffff;

  --card-wip-bg: rgba(42, 26, 74, 0.06);
}

/* ----------------------- الوضع الداكن ----------------------- */
:root[data-theme="dark"] {
  --bg: #150c2b;
  --bg-elevated: #1e123c;
  --text: #ede8fb;
  --text-2: #c3b8e6;
  --text-3: #a99cd0;
  --on-accent: #150c2b;

  --accent: #b18bff;
  --accent-strong: #c9adff;
  --accent-soft: rgba(177, 139, 255, 0.16);

  --border: rgba(237, 232, 251, 0.14);
  --border-strong: rgba(237, 232, 251, 0.25);
  --surface-glass: rgba(30, 18, 60, 0.7);
  --surface-glass-2: rgba(30, 18, 60, 0.45);

  --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
  --shadow-sm: 0 8px 24px -12px rgba(0, 0, 0, 0.7);

  --selection-bg: #b18bff;
  --selection-fg: #150c2b;

  --card-wip-bg: rgba(237, 232, 251, 0.1);

  color-scheme: dark;
}