/* ==========================================================================
   مصنع المجد العالمية — طبقة التوكنز
   نظام ثلاث طبقات: أساسي (primitive) ← دلالي (semantic) ← مكوّن (component)
   ========================================================================== */

:root {
  /* ---------- 1. أساسي: الذهب ---------- */
  --gold-100: #F6ECCF;
  --gold-200: #EED89A;
  --gold-300: #DCC176;
  --gold-400: #C9A84C;   /* لون العلامة الأساسي */
  --gold-500: #AD8C3B;
  --gold-600: #8A6E2E;
  --gold-700: #5E4A1F;
  --gold-rgb: 201, 168, 76;

  /* ---------- 1. أساسي: الحياد ---------- */
  --ink-950: #050505;
  --ink-900: #0B0A08;
  --ink-800: #131210;
  --ink-700: #1D1B17;
  --sand-100: #F3EEE1;
  --sand-300: #C6BEAC;
  --sand-500: #A79F8E;
  --sand-700: #857F71;

  /* ---------- 1. أساسي: الحالة ---------- */
  --danger-400: #D9765A;
  --success-400: #6FAE7C;
  --info-400: #6A93B8;

  /* ---------- 2. دلالي: الأسطح ---------- */
  --bg: var(--ink-950);
  --bg-alt: var(--ink-900);
  --surface: rgba(255, 255, 255, .035);
  --surface-hover: rgba(255, 255, 255, .06);
  --surface-solid: var(--ink-800);
  --border: rgba(var(--gold-rgb), .22);
  --border-soft: rgba(255, 255, 255, .09);
  --border-strong: rgba(var(--gold-rgb), .45);

  /* ---------- 2. دلالي: النص ----------
     كل القيم مُتحقَّقة مقابل --bg عند 4.5:1 فأعلى */
  --text: var(--sand-100);        /* 17.1:1 */
  --text-muted: var(--sand-500);  /*  7.6:1 */
  --text-faint: var(--sand-700);  /*  4.9:1 — للنص الثانوي فقط */
  --text-accent: var(--gold-200); /* 11.8:1 */
  --text-on-gold: #1A1408;        /* على خلفية ذهبية ممتلئة */

  /* ---------- 2. دلالي: التفاعل ---------- */
  --accent: var(--gold-400);
  --accent-hover: var(--gold-300);
  --accent-press: var(--gold-500);
  --focus-ring: var(--gold-200);

  /* ---------- 3. مقياس المسافات (أساس 4px) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* ---------- 3. مقياس الخط (مرن مع عرض الشاشة) ---------- */
  --fs-xs:   clamp(11px,  .70rem + .1vw,  12.5px);
  --fs-sm:   clamp(13px,  .82rem + .1vw,  14.5px);
  --fs-base: clamp(15px,  .92rem + .2vw,  17px);
  --fs-lg:   clamp(17px, 1.02rem + .3vw,  20px);
  --fs-xl:   clamp(21px, 1.20rem + .6vw,  26px);
  --fs-2xl:  clamp(26px, 1.45rem + 1.1vw, 36px);
  --fs-3xl:  clamp(32px, 1.70rem + 2.0vw, 52px);
  --fs-4xl:  clamp(38px, 1.90rem + 3.2vw, 72px);

  --lh-tight: 1.18;
  --lh-snug: 1.45;
  --lh-base: 1.75;
  --lh-loose: 1.95;   /* النص العربي الطويل يحتاج تنفّسًا أكثر */

  --ff-display: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --ff-body: 'Tajawal', 'Cairo', system-ui, sans-serif;
  --ff-mono: ui-monospace, 'Cascadia Code', monospace;

  /* ---------- 3. الحواف ---------- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  /* ---------- 3. الظلال ---------- */
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .5);
  --sh-md: 0 10px 30px -10px rgba(0, 0, 0, .7);
  --sh-lg: 0 24px 60px -20px rgba(0, 0, 0, .85);
  --sh-gold: 0 10px 40px -12px rgba(var(--gold-rgb), .35);

  /* ---------- 3. الحركة ---------- */
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 620ms;

  /* ---------- 3. التخطيط ---------- */
  --wrap: 1240px;
  --wrap-narrow: 860px;
  --header-h: 76px;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* ---------- تدرّجات مركّبة ----------
     ثلاثة تدرّجات لا واحد، لأن متطلّب التباين يختلف بين الزخرفة والنص والزر:

     --grad-gold      زخرفي فقط (حدود، أيقونات، خطوط الشعار) — لا نص فوقه
     --grad-gold-text لتعبئة النص؛ أدكن نقطة فيه #C9A84C = 8.92:1 على الخلفية
     --grad-gold-btn  لخلفية الأزرار؛ أدكن نقطة تعطي 8.01:1 للنص #1A1408

     التدرّج الأصلي كان ينتهي عند #8A6E2E فيهبط التباين إلى 4.10:1 للنص
     و3.79:1 لنص الأزرار — كلاهما دون AA. */
  --grad-gold: linear-gradient(135deg, var(--gold-200) 0%, var(--gold-400) 52%, var(--gold-600) 100%);
  --grad-gold-text: linear-gradient(135deg, var(--gold-200) 0%, var(--gold-300) 50%, var(--gold-400) 100%);
  --grad-gold-btn: linear-gradient(135deg, var(--gold-100) 0%, var(--gold-200) 45%, var(--gold-400) 100%);
  --grad-fade-r: linear-gradient(to left, transparent, rgba(var(--gold-rgb), .5), transparent);
}

/* النسخة الإنجليزية — خط لاتيني وارتفاع سطر أضيق.
   العربية تحتاج تنفّسًا أكبر بسبب التشكيل والنقاط تحت السطر؛ الإنجليزية
   بنفس الارتفاع تبدو مفكّكة. */
html[lang="en"] {
  --ff-display: 'Barlow', system-ui, sans-serif;
  --ff-body: 'Barlow', system-ui, sans-serif;
  --lh-base: 1.65;
  --lh-loose: 1.78;
}

/* الوضع الفاتح — مُعرَّف مسبقًا للاستخدام لاحقًا، غير مُفعَّل بعد */
[data-theme="light"] {
  --bg: #FAF8F3;
  --bg-alt: #F2EDE1;
  --surface: rgba(0, 0, 0, .03);
  --surface-hover: rgba(0, 0, 0, .055);
  --surface-solid: #FFFFFF;
  --border: rgba(var(--gold-rgb), .35);
  --border-soft: rgba(0, 0, 0, .09);
  --text: #1A1408;
  --text-muted: #55503F;
  --text-faint: #6E6857;
  --text-accent: var(--gold-600);
  --accent: var(--gold-600);
  --accent-hover: var(--gold-500);
  --focus-ring: var(--gold-600);
}

/* احترام تفضيل تقليل الحركة على مستوى النظام */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}