@import url("https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&family=IBM+Plex+Sans+Arabic:wght@200;300;400;500;600;700&display=swap");

/* ==========================================================================
   ALENZY · tokens.css
   نظام تصميم فاخر — تحريري، هادئ، ذو تباين عالٍ.
   خطوط: العربية (Amiri للعناوين، IBM Plex Sans للنص) / الإنجليزية (Fraunces للعناوين، Geist للنص).
   ========================================================================== */

/* ---------- خط عربي محليّ (مانشيت واحد فقط) ---------- */
@font-face {
  font-family: "Thmanyah Serif Text";
  src: url("/fonts/thmanyahseriftext-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---------- الخلفيات (أبيض حجري دافئ) ---------- */
  --bg: #faf8f5;            /* ورقة دافئة */
  --bg-elev: #fefdfb;       /* أبيض نقيّ */
  --bg-elev-2: #f5f1eb;     /* حجر دافئ خفيف */
  --bg-inverse: #1a1612;    /* فحمي عميق */
  --bg-inverse-2: #241f1a;

  /* ---------- الحبر (تباين عالٍ، ليس أسود نقي) ---------- */
  --paper: #1a1612;         /* نص رئيسي */
  --paper-2: rgba(26, 22, 18, 0.68);
  --paper-3: rgba(26, 22, 18, 0.62);
  --paper-4: rgba(26, 22, 18, 0.18);
  --ink: #faf8f5;           /* نص على خلفيات داكنة */
  --ink-2: rgba(250, 248, 245, 0.68);
  --ink-3: rgba(250, 248, 245, 0.62);
  --ink-4: rgba(250, 248, 245, 0.18);
  --inv-line: rgba(250, 248, 245, 0.14);
  --inv-line-2: rgba(250, 248, 245, 0.28);

  /* ---------- الخطوط (شعرية، بالكاد مرئية) ---------- */
  --line: rgba(26, 22, 18, 0.08);
  --line-2: rgba(26, 22, 18, 0.14);
  --line-strong: rgba(26, 22, 18, 0.35);

  /* ---------- اللون المميّز (نحاسيّ راقٍ) ---------- */
  --accent: #b8956a;                        /* نحاسيّ رئيسي */
  --accent-ink: #1a1612;
  --accent-soft: rgba(184, 149, 106, 0.1);
  --accent-line: rgba(184, 149, 106, 0.4);
  --accent-deep: #9d7a4f;                   /* للضغط/التركيز */
  --accent-text: #8a6839;                   /* نحاسيّ داكن — لنصوص تُحقّق تباين 4.5:1 */

  --danger: #b4492f;
  --danger-soft: rgba(180, 73, 47, 0.12);

  /* ---------- الأسطح ---------- */
  --header-bg: rgba(250, 248, 245, 0.94);

  /* ---------- الخطوط (Typography) ---------- */
  /* العربية: Amiri للعناوين (Regular/Bold)، IBM Plex Sans للنص */
  --font-display: "Amiri", "IBM Plex Sans Arabic", system-ui, serif;
  --font-accent: "Amiri", "IBM Plex Sans Arabic", system-ui, serif;
  /* المانشيت الوحيد: ثمنية أسود — يستخدم فقط في hero__title */
  --font-masthead: "Thmanyah Serif Text", "Amiri", "IBM Plex Sans Arabic", serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  /* الإنجليزية: Fraunces للعناوين (أوزان خفيفة للحجم الكبير)، Geist للنص */
  --font-display-en: "Fraunces", Georgia, system-ui, serif;
  --font-body-en: "Geist", system-ui, sans-serif;

  /* ---------- المقاسات الطباعية (مقياس تحريري) ---------- */
  --fs-mega: clamp(3rem, 1.35rem + 8.2vw, 9.5rem);      /* عنوان الهيرو */
  --fs-display: clamp(2.8rem, 1.4rem + 9vw, 12rem);    /* عناوين الصفحات */
  --fs-h1: clamp(2.2rem, 1.3rem + 6vw, 7rem);
  --fs-h2: clamp(1.8rem, 1.15rem + 4.2vw, 5rem);
  --fs-h3: clamp(1.4rem, 1.05rem + 1.8vw, 2.8rem);
  --fs-h4: clamp(1.15rem, 1rem + 0.9vw, 1.7rem);
  --fs-body: clamp(1.02rem, 0.97rem + 0.3vw, 1.2rem);
  --fs-lead: clamp(1.25rem, 1.1rem + 1vw, 2rem);
  --fs-small: clamp(0.85rem, 0.8rem + 0.25vw, 0.98rem);
  --fs-mini: 0.7rem;

  /* ---------- المقاسات (نظام 4px مع clamp) ---------- */
  --radius: 2px;
  --radius-sm: 2px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  --space-2xs: 0.5rem;
  --space-xs: 1rem;
  --space-s: clamp(1.6rem, 1.2rem + 1.4vw, 3rem);
  --space-m: clamp(3.2rem, 2rem + 4vw, 7.5rem);
  --space-l: clamp(5.5rem, 3rem + 10vw, 16rem);
  --space-xl: clamp(8rem, 4rem + 14vw, 22rem);

  --maxw: 1320px;
  --maxw-wide: 1600px;
  --gutter: clamp(1.5rem, 0.6rem + 4.5vw, 5rem);
  --header-h: 72px;

  /* ---------- الحركة (ثقيلة، بلا نطّ) ----------
     ملاحظة: لا نطّ ولا ارتداد — الاستقرار الحرفي يعطي إحساساً أرقى من bounce. */
  --ease: cubic-bezier(0.25, 1, 0.35, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-heavy: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-io-expo: cubic-bezier(0.87, 0, 0.13, 1);
  /* يستعمله تكشف الكلمات ومعاينة الصفوف — ارتفاع ثم استقرار هادئ */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 0.1s;
  --dur-fast: 0.18s;
  --dur-med: 0.7s;
  --dur: 0.5s;
  --dur-slow: 1s;

  /* ---------- مسافات الكشف (تدرّج حركي موحّد) ---------- */
  --reveal-y: 34px;
  --reveal-tilt: 4deg;
  --stagger: 70ms;

  /* ---------- الطبقات ---------- */
  --z-grid: -10;
  --z-grain: 60;
  --z-cursor: 950;
  --z-header: 200;
  --z-menu: 400;
  --z-preloader: 900;
  --z-top: 960;
}

/* ---------- الوضع الليلي (فحمي دافئ) ---------- */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0f0e0d;
  --bg-elev: #161412;
  --bg-elev-2: #1d1a17;
  --bg-inverse: #faf8f5;
  --bg-inverse-2: #f0ece5;

  --paper: #f5f1eb;
  --paper-2: rgba(245, 241, 235, 0.68);
  --paper-3: rgba(245, 241, 235, 0.62);
  --paper-4: rgba(245, 241, 235, 0.18);
  --ink: #0f0e0d;
  --ink-2: rgba(15, 14, 13, 0.68);
  --ink-3: rgba(15, 14, 13, 0.62);
  --ink-4: rgba(15, 14, 13, 0.18);
  --inv-line: rgba(15, 14, 13, 0.14);
  --inv-line-2: rgba(15, 14, 13, 0.28);

  --line: rgba(245, 241, 235, 0.08);
  --line-2: rgba(245, 241, 235, 0.14);
  --line-strong: rgba(245, 241, 235, 0.35);

  --accent: #c9a876;
  --accent-ink: #0f0e0d;
  --accent-soft: rgba(201, 168, 118, 0.12);
  --accent-line: rgba(201, 168, 118, 0.4);
  --accent-deep: #b8956a;
  --accent-text: #c9a876;

  --header-bg: rgba(15, 14, 13, 0.94);
}

/* ---------- أوزان Fraunces للبصرية (optical sizing) ---------- */
html[lang="en"] {
  --font-display: var(--font-display-en);
  --font-body: var(--font-body-en);
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

/* أوزان العرض للإنجليزية: أخف للحجم الكبير */
html[lang="en"] h1,
html[lang="en"] .hero__title,
html[lang="en"] .page-hero__title,
html[lang="en"] .display {
  font-weight: 300;
  letter-spacing: -0.025em;
}
html[lang="en"] h2 { font-weight: 350; letter-spacing: -0.02em; }
html[lang="en"] h3 { font-weight: 400; letter-spacing: -0.015em; }
html[lang="en"] h4 { font-weight: 500; letter-spacing: -0.01em; }

/* العربية: Amiri للعناوين (Regular للعرض، Bold للتركيز) */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .hero__title,
html[lang="ar"] .page-hero__title,
html[lang="ar"] .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}
html[lang="ar"] .eyebrow strong,
html[lang="ar"] strong,
html[lang="ar"] b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
  }
}