/* ARI brand typography: font-face declarations.
  Source: ARI Typography Reference (August 2026 Barlow edition).
   Only the weights specified by the designer are loaded; no synthetic
   bold/italic is ever applied to these families (see fonts.css §Arabic
   rules further down, and base.css for the language-scoped tokens). */

/* ── Latin: PP Radio Grotesk (display + interface) ─────────────────────── */
@font-face {
  font-family: "PP Radio Grotesk";
  src: url("../fonts/latin/PPRadioGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Radio Grotesk";
  src: url("../fonts/latin/PPRadioGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Latin: Barlow (text + interface, per Brand Manual 2026) ───────────── */
@font-face {
  font-family: "Barlow";
  src: url("../fonts/latin/Barlow-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/latin/Barlow-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/latin/Barlow-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/latin/BarlowSemiCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/latin/BarlowSemiCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Arabic: Sans Thmanyah (body + interface) ───────────────────────────── */
@font-face {
  font-family: "Sans Thmanyah";
  src: url("../fonts/arabic/thmanyahsans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sans Thmanyah";
  src: url("../fonts/arabic/thmanyahsans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sans Thmanyah";
  src: url("../fonts/arabic/thmanyahsans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sans Thmanyah";
  src: url("../fonts/arabic/thmanyahsans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Arabic: Arabic Fatimah ITF (display only, never body/nav/metadata) ─── */
@font-face {
  font-family: "Arabic Fatimah ITF";
  src: url("../fonts/arabic/itfFatimahArabic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Arabic Fatimah ITF";
  src: url("../fonts/arabic/itfFatimahArabic-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── Brand typography tokens ─────────────────────────────────────────────
   Two independent systems, keyed off the html[lang] attribute that WPML
   sets via language_attributes() (see header.php). They never mix: every
   language renders entirely within its own stack. */
:root {
  --font-latin-display: "PP Radio Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-latin-body: "Barlow", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-latin-condensed: "Barlow Semi Condensed", "Barlow", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-arabic-ui: "Sans Thmanyah", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-arabic-display: "Arabic Fatimah ITF", "Noto Sans Arabic", Tahoma, serif;
}

/* ── Role tokens ──────────────────────────────────────────────────────────
   Both stacks put the interface layer (nav, buttons, labels, meta) on the
   text face: Barlow in Latin, Sans Thmanyah in Arabic. The display faces
   (PP Radio Grotesk, Arabic Fatimah ITF) are for headlines and quotes only.

   Scoping: defaults live on :root (Latin) and are overridden by any
   [lang="ar"] element, not just <html>. WPML sets lang="ar" on <html> for
   Arabic page loads via language_attributes(), so the whole document picks
   up the override. The same [lang="ar"] rule also fires on a nested
   wrapper (e.g. an Arabic pull-quote embedded in an English article, or
   the side-by-side EN/AR staging review page), since custom properties
   inherit to descendants regardless of which element defines them. */
:root {
  /* Brand Manual 2026: PP Radio Grotesk is display only (headlines, quotes,
     big numbers); Barlow carries body AND the interface layer. */
  --font-role-display: var(--font-latin-display);
  --font-role-interface: var(--font-latin-body);
  --font-role-reading: var(--font-latin-body);
  --font-role-byline: var(--font-latin-body);

  --weight-display-title: 700;  /* PP Radio Grotesk Bold */
  --weight-display-quote: 700;  /* PP Radio Grotesk Bold */
  --weight-interface: 500;      /* Barlow Medium */
  --weight-footnote: 400;       /* Barlow Regular */
  --weight-reading-body: 400;   /* Barlow Regular */
  --weight-reading-h2: 600;     /* Barlow SemiBold */
  --weight-byline: 400;         /* Barlow Regular */
  --style-byline: normal;

  /* Legacy aliases, kept as a safety net for selectors not yet moved to the
     explicit --font-role-* tokens above. --ari-font-heading resolves to the
     INTERFACE role, not display, because most "heading" call sites are
     nav/label/caption elements, not H1s. */
  --ari-font-heading: var(--font-role-interface);
  --ari-font-body: var(--font-role-reading);
}

[lang="ar"] {
  --font-role-display: var(--font-arabic-display);
  --font-role-interface: var(--font-arabic-ui);
  --font-role-reading: var(--font-arabic-ui);
  --font-role-byline: var(--font-arabic-ui);

  --weight-display-title: 900;  /* Arabic Fatimah ITF Black */
  --weight-display-quote: 700;  /* Arabic Fatimah ITF Bold */
  --weight-interface: 500;      /* Sans Thmanyah Medium */
  --weight-footnote: 300;       /* Sans Thmanyah Light */
  --weight-reading-body: 400;   /* Sans Thmanyah Regular */
  --weight-reading-h2: 700;     /* Sans Thmanyah Bold */
  --weight-byline: 500;         /* Sans Thmanyah Medium, upright; no italic in this system */
  --style-byline: normal;

  --ari-font-heading: var(--font-role-interface);
  --ari-font-body: var(--font-role-reading);
}

/* ── Arabic non-negotiables ───────────────────────────────────────────────
   Per ARI-Typography-Reference.md §3: no letterspacing (breaks letter
   joining), no case transform (Arabic has no uppercase), no italic (the
   system has none: author names use Sans Thmanyah Medium upright instead
   of the Latin Light Italic treatment). Scoped to [lang="ar"] so Latin
   content is unaffected; !important is necessary because component rules
   in components.css set these properties directly on the same selectors. */
[lang="ar"],
[lang="ar"] * {
  letter-spacing: normal !important;
  text-transform: none !important;
}

[lang="ar"] em,
[lang="ar"] i,
[lang="ar"] .byline,
[lang="ar"] .author-name {
  font-style: normal !important;
}