/* ============================================================
   سِيَر — Design System
   مصدر الحقيقة الوحيد للألوان والخطوط والمسافات والحركة.
   أي مكوّن في الموقع يستهلك هذه المتغيّرات ولا يخترع قيمًا خاصة به.
   ============================================================ */

:root {
  /* ---------- الأسطح (داكن = الأصل) ---------- */
  --bg: #0b0910;
  --bg-elev: #110e18;
  --surface: #17131f;
  --surface-2: #1e1929;
  --surface-3: #271f34;
  --border: #302640;
  --border-soft: #241d31;
  --overlay: rgba(6, 4, 10, 0.72);

  /* ---------- النص ---------- */
  --text: #f6f1ea;
  --text-2: #d9d0c4;
  --text-3: #a2968a;
  --muted: #8b8074;

  /* ---------- الهوية: ذهب نحاسي ---------- */
  --gold-100: #f7e3b8;
  --gold: #d9a441;
  --gold-600: #bd882d;
  --gold-700: #96681e;
  --gold-soft: rgba(217, 164, 65, 0.13);
  --gold-line: rgba(217, 164, 65, 0.34);
  --grad-gold: linear-gradient(135deg, #e9bb62 0%, #d9a441 45%, #ac7825 100%);
  --grad-surface: linear-gradient(160deg, var(--surface-2), var(--surface));

  /* ---------- الحالات ---------- */
  --ok: #6fbf8b;
  --ok-soft: rgba(111, 191, 139, 0.13);
  --warn: #e0a458;
  --warn-soft: rgba(224, 164, 88, 0.14);
  --danger: #e57373;
  --danger-soft: rgba(229, 115, 115, 0.13);
  --info: #7aa7e0;

  /* ---------- الزوايا ---------- */
  --r-xs: 8px;
  --r-sm: 11px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ---------- الظلال ---------- */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --sh-md: 0 12px 30px rgba(0, 0, 0, 0.42);
  --sh-lg: 0 26px 64px rgba(0, 0, 0, 0.52);
  --sh-gold: 0 8px 26px rgba(217, 164, 65, 0.26);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --ring: 0 0 0 3px rgba(217, 164, 65, 0.24);

  /* ---------- المسافات ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- الخطوط ---------- */
  --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-display: 'Noto Kufi Arabic', var(--font-ar);
  --font-mono: 'Consolas', 'Courier New', monospace;

  --fs-display: clamp(32px, 5.2vw, 60px);
  --fs-h1: clamp(26px, 3.4vw, 40px);
  --fs-h2: clamp(20px, 2.2vw, 28px);
  --fs-h3: 17px;
  --fs-body: 15px;
  --fs-sm: 13.5px;
  --fs-caption: 12.5px;
  --fs-label: 11.5px;

  --lh-tight: 1.25;
  --lh-snug: 1.45;
  --lh-body: 1.75;

  /* ---------- الحركة ---------- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---------- الطبقات ---------- */
  --z-nav: 40;
  --z-sticky: 30;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;

  --container: 1240px;
  color-scheme: dark;
}

/* ---------- الوضع الفاتح: نفس الهوية بمزاج عاجي ---------- */
[data-theme='light'] {
  --bg: #f6f2ea;
  --bg-elev: #fffdf9;
  --surface: #ffffff;
  --surface-2: #faf6ee;
  --surface-3: #f1e9dc;
  --border: #e6dbc9;
  --border-soft: #efe7d9;
  --overlay: rgba(40, 30, 15, 0.42);

  --text: #1a1610;
  --text-2: #3b342a;
  --text-3: #6b6053;
  --muted: #7f7365;

  --gold-100: #7a5714;
  --gold: #9a6f1f;
  --gold-600: #825b15;
  --gold-700: #6b4a10;
  --gold-soft: rgba(154, 111, 31, 0.1);
  --gold-line: rgba(154, 111, 31, 0.27);
  --grad-gold: linear-gradient(135deg, #b9862c 0%, #9a6f1f 50%, #7a5714 100%);

  --ok: #2f8a55;
  --ok-soft: rgba(47, 138, 85, 0.1);
  --warn: #9c6216;
  --warn-soft: rgba(156, 98, 22, 0.11);
  --danger: #b3413f;
  --danger-soft: rgba(179, 65, 63, 0.09);

  --sh-xs: 0 1px 2px rgba(60, 45, 20, 0.05);
  --sh-sm: 0 4px 12px rgba(60, 45, 20, 0.06);
  --sh-md: 0 12px 30px rgba(60, 45, 20, 0.09);
  --sh-lg: 0 26px 64px rgba(60, 45, 20, 0.13);
  --sh-gold: 0 8px 26px rgba(154, 111, 31, 0.2);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --ring: 0 0 0 3px rgba(154, 111, 31, 0.2);
  color-scheme: light;
}

/* ============================================================
   الأساسيات
   ============================================================ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ar);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--gold-soft); color: var(--text); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }

/* شريط تمرير رفيع يليق بالهوية */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 9px; height: 7px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--surface-3); }
*::-webkit-scrollbar-track { background: transparent; }

.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--sp-6); }
.spacer { flex: 1; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   الحركة — تُحترم دائمًا تفضيلات تقليل الحركة
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* قواعد الإخفاء تسبق أي display في المكوّنات — وإلا ظهر ما يجب أن يختفي */
[hidden] { display: none !important; }