/* ==========================================================================
   Design tokens — Islamic / Arabic visual language, professional palette.
   Never hardcode colors or radii in components; always use these variables.

   Visual identity: an illuminated manuscript (تذهيب) — Madinah green,
   gold illumination, ink on paper, girih geometry. Ornament is always
   geometric SVG; sacred text always gets the quietest treatment.
   ========================================================================== */
:root {
  /* Greens — the traditional green of Islamic art / Madinah */
  --green-900: #0e3b2e;
  --green-800: #12513e;
  --green-700: #1d6b52;
  --green-600: #24866a;
  --green-100: #e9f3ed;

  /* Gold — illumination (tazhib) accents.
     --gold-800 is the text-safe tone (AA on paper/white); the lighter tones
     are for frames, rules, ornament and fills only. */
  --gold-800: #7d6124;
  --gold-700: #96752f;
  --gold-600: #b08d3e;
  --gold-500: #c8a24b;
  --gold-300: #e3cd93;
  --gold-050: #fbf6e9;

  /* Neutrals — ink on paper */
  --ink: #17352c;
  --muted: #5c6d66;
  --faint: #8a978f;
  --line: #e0e7e3;
  --line-soft: #edf1ee;
  --surface: #ffffff;
  --paper: #f6f4ec;
  --paper-deep: #f2efe4;

  /* Composites — solid + translucent helpers so components stay token-only */
  --white: #ffffff;
  --on-green: #f4fbf7;
  --on-green-dim: rgba(244, 251, 247, 0.78);
  --on-green-faint: rgba(244, 251, 247, 0.62);
  --on-green-line: rgba(244, 251, 247, 0.18);
  --glass: rgba(246, 244, 236, 0.92);
  --gold-wash: rgba(200, 162, 75, 0.18);
  --gold-wash-soft: rgba(200, 162, 75, 0.09);
  --gold-hairline: rgba(200, 162, 75, 0.5);
  --green-deep-wash: rgba(14, 59, 46, 0.1);
  --green-deep-soft: rgba(14, 59, 46, 0.06);
  --white-glow: rgba(255, 255, 255, 0.3);

  /* Feedback */
  --danger: #a33b2e;

  /* Typography — Arabic-first, English overrides below */
  /* Amiri carries the ﷺ/﷽ ligatures (SKILLS: naskh + proper ﷺ ligature) into
     every heading that Reem Kufi/Cairo do not cover. */
  --font-display: "Reem Kufi", "Cairo", "Amiri", "Tajawal", system-ui, sans-serif;
  --font-body: "Tajawal", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-quran: "Amiri", "Scheherazade New", "Traditional Arabic", serif;
  --fs-hero: clamp(1.9rem, 1.2rem + 3vw, 2.7rem);
  --fs-h1: clamp(1.6rem, 1.2rem + 2vw, 2.25rem);
  --fs-h2: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --fs-lead: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-quran: 2.15;
  --lh-body: 1.8;
  /* Letter-spacing is a Latin-only device: Arabic is never letter-spaced. */
  --ls-kicker: 0;
  --ls-num: 0.01em;

  /* Spacing scale (4pt) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* Shape & elevation */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-full: 999px;
  --shadow-soft: 0 12px 35px rgba(14, 59, 46, 0.1);
  --shadow-btn: 0 8px 18px rgba(29, 107, 82, 0.22);
  --shadow-lift: 0 18px 44px rgba(14, 59, 46, 0.14);
  --shadow-card: 0 1px 2px rgba(14, 59, 46, 0.05), 0 12px 28px rgba(14, 59, 46, 0.06);
  --shadow-header: 0 12px 30px rgba(14, 59, 46, 0.06);

  /* Ornament — reusable backgrounds.
     --orn-rule: girih star + gold rules fading out at both ends (symmetric,
     so it works in RTL and LTR without a physical exception).
     --headband: the woven gold/green band of a manuscript spine. */
  --orn-rule: url("../img/star.svg") center / 16px 16px no-repeat,
    linear-gradient(90deg, rgba(200, 162, 75, 0) 0%, var(--gold-500) 44%,
      rgba(200, 162, 75, 0) 49.4%, rgba(200, 162, 75, 0) 50.6%,
      var(--gold-500) 56%, rgba(200, 162, 75, 0) 100%) center / 100% 1px no-repeat;
  --headband: repeating-linear-gradient(115deg, var(--gold-500) 0 6px, var(--green-800) 6px 16px);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.28s;
  --dur-slow: 0.6s;
}

/* English pages: Latin-first stacks, Latin-only optical adjustments */
html[lang="en"] {
  --font-display: "Cormorant Garamond", "Amiri", "Georgia", serif;
  --font-body: "Inter", "Amiri", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-quran: "Amiri", "Cormorant Garamond", serif;
  --lh-quran: 1.9;
  --lh-body: 1.7;
  --ls-kicker: 0.14em;
  /* Cormorant Garamond has a small x-height — set it a step larger than the
     Reem Kufi Arabic scale so both languages read at the same optical size. */
  --fs-h1: clamp(1.8rem, 1.35rem + 2vw, 2.6rem);
  --fs-h2: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
}