/* Hawsabah brand fonts and type scale.
   Fonts load from Google Fonts. Offline, the fallback stacks apply.
   For print, install Amiri, Inter, Noto Sans Arabic and IBM Plex Mono locally.

   Roles
   - Display and headings: Amiri, for English and Arabic alike (one voice across both languages)
   - Text and interface: Inter for English, Noto Sans Arabic for Arabic
   - Codes and data: IBM Plex Mono (always Latin, always left to right) */
@import url("https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Cairo:wght@700;800&family=Tajawal:wght@700;800&display=swap");

:root {
  --font-display: "Amiri", "Times New Roman", "Traditional Arabic", Georgia, serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-display: 4rem;
  --fs-h1: 2.4rem;
  --fs-h2: 1.7rem;
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.15;
  --lh-body: 1.65;
  --tracking-eyebrow: 0.14em;
}

/* Arabic: larger, more open, no letter spacing (spacing breaks the joins between letters) */
:root:lang(ar) {
  --font-text: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;

  --fs-display: 4.4rem;
  --fs-h1: 2.6rem;
  --fs-h2: 1.85rem;
  --fs-h3: 1.35rem;
  --fs-body: 1.06rem;
  --fs-small: 0.95rem;
  --fs-eyebrow: 0.9rem;

  --lh-tight: 1.35;
  --lh-body: 1.95;
  --tracking-eyebrow: 0;
}

/* ---- Hawsabah-style additions (not in the original kit) --------------------------------------
   A bilingual page shows English and Arabic side by side, so the Arabic values cannot depend on
   <html lang="ar"> alone. These variables and the rule below apply to any element marked lang="ar"
   or class="ar". Arabic is set about 12% larger than English so both carry equal weight. */
:root {
  --font-text-ar: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  /* PINNED brand decision: the Arabic name in the wordmark is Cairo Bold (700), as on the original story page.
     The kit README says Noto Sans Arabic; the owner chose Cairo. Do not change this without the owner. The
     fallbacks below only keep text readable if Cairo fails to load. */
  /* Arabic for the large status title ("Coming soon"): Tajawal ExtraBold, chosen by the owner from a specimen
     (card 03). Not pinned: change this one line to try another. */
  --font-status-ar: "Tajawal", "Cairo", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-wordmark-ar: "Cairo", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --lh-body-ar: 1.95;
  --ar-scale: 1.12;
}
:where(.ar, [lang="ar"]) {
  font-family: var(--font-text-ar);
  line-height: var(--lh-body-ar);
  letter-spacing: 0;
}
/* Headings keep the display face (Amiri) in both languages, scaled up for Arabic. */
:where(.ar, [lang="ar"]) :is(h1, h2, h3, .display),
:is(h1, h2, h3, .display):where(.ar, [lang="ar"]) {
  font-family: var(--font-display);
  line-height: 1.35;
}
:where(.ar, [lang="ar"]) h1, h1:where(.ar, [lang="ar"]) { font-size: calc(var(--fs-h1) * var(--ar-scale)); }
:where(.ar, [lang="ar"]) h2, h2:where(.ar, [lang="ar"]) { font-size: calc(var(--fs-h2) * var(--ar-scale)); }
:where(.ar, [lang="ar"]) h3, h3:where(.ar, [lang="ar"]) { font-size: calc(var(--fs-h3) * var(--ar-scale)); }