/* ===================================================================================
   ARABIC TYPOGRAPHY INTERFACE (2026-10-12) - ready-made text-role classes for the five families
   registered in arabic-fonts.css. Same approach as tajawal-typography.css: one class per use, family +
   real weight + size + line-height together, no combining required. One combined file (not one per
   family) so the families can be compared and kept consistent in a single place; the file is
   organised by family with a header per section.

   Variables (consume these, do not repeat the family strings):
     --mateen-font-thmanyah-sans, --mateen-font-thmanyah-serif-text, --mateen-font-thmanyah-serif-display,
     --mateen-font-bushra, --mateen-font-lafeef, --mateen-font-zunburk, --mateen-font-zeyada

   ROLES. Thmanyah (sans, serif text, serif display) are full text faces with Arabic + Latin, so they
   get the Tajawal-style UI roles (Heading/Title/Text/Caption). Bushra, Lafeef, TS Zunburk and Zeyada
   are DISPLAY / DECORATIVE faces - they get Display/Headline/Accent roles only; do not use them for
   body text. Lafeef, Zunburk and Zeyada have almost no Latin glyphs, so their stacks fall through to
   the Arabic UI font for Latin runs (digits and Arabic are covered).

   WEIGHTS: only weights that exist as real files are used (thmanyah 300/400/500/700/900, Bushra 500,
   Lafeef 200/300/400/700, Zunburk 900, Zeyada 800) - never synthesized bold.
   DIRECTION is not set here; it follows the surrounding markup, as in tajawal-typography.css.
   This file defines classes only; it does NOT change any default font (see localization.css).
   =================================================================================== */

:root {
    --mateen-font-thmanyah-sans: 'Thmanyah Sans', 'Tajawal', 'Segoe UI', Tahoma, 'Inter', sans-serif;
    --mateen-font-thmanyah-serif-text: 'Thmanyah Serif Text', 'Traditional Arabic', 'Times New Roman', serif;
    --mateen-font-thmanyah-serif-display: 'Thmanyah Serif Display', 'Thmanyah Serif Text', 'Traditional Arabic', 'Times New Roman', serif;
    --mateen-font-bushra: 'Bushra', 'Thmanyah Sans', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    --mateen-font-lafeef: 'Lafeef', 'Thmanyah Sans', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    --mateen-font-zunburk: 'TS Zunburk', 'Thmanyah Sans', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    --mateen-font-zeyada: 'Zeyada Arabic', 'Thmanyah Sans', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

/* ---- THMANYAH SANS - the Arabic UI face; roles mirror Tajawal-* (static 300/400/500/700/900) ---- */

/* Page/section headings */
.Thmanyah-Heading {
    font-family: var(--mateen-font-thmanyah-sans);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.3;
}

/* Card/panel titles */
.Thmanyah-Title {
    font-family: var(--mateen-font-thmanyah-sans);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.4;
}

.Thmanyah-Title-Bold {
    font-family: var(--mateen-font-thmanyah-sans);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.4;
}

.Thmanyah-Text,
.Thmanyah-Text-Md {
    font-family: var(--mateen-font-thmanyah-sans);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
}

.Thmanyah-Text-Sm {
    font-family: var(--mateen-font-thmanyah-sans);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.6;
}

.Thmanyah-Text-Lg {
    font-family: var(--mateen-font-thmanyah-sans);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.6;
}

.Thmanyah-Text-Bold {
    font-family: var(--mateen-font-thmanyah-sans);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.6;
}

.Thmanyah-Text-Light {
    font-family: var(--mateen-font-thmanyah-sans);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6;
}

.Thmanyah-Caption {
    font-family: var(--mateen-font-thmanyah-sans);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.5;
}

.Thmanyah-Caption-Bold {
    font-family: var(--mateen-font-thmanyah-sans);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Hero/landing number or headline - the Black weight */
.Thmanyah-Display-Black {
    font-family: var(--mateen-font-thmanyah-sans);
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1.2;
}

/* ---- THMANYAH SERIF TEXT - editorial reading serif, for longer passages ---- */

.Thmanyah-Serif-Heading {
    font-family: var(--mateen-font-thmanyah-serif-text);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.4;
}

.Thmanyah-Serif-Title {
    font-family: var(--mateen-font-thmanyah-serif-text);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.5;
}

.Thmanyah-Serif-Text,
.Thmanyah-Serif-Text-Md {
    font-family: var(--mateen-font-thmanyah-serif-text);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.8;
}

.Thmanyah-Serif-Text-Bold {
    font-family: var(--mateen-font-thmanyah-serif-text);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.8;
}

.Thmanyah-Serif-Text-Light {
    font-family: var(--mateen-font-thmanyah-serif-text);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.8;
}

.Thmanyah-Serif-Caption {
    font-family: var(--mateen-font-thmanyah-serif-text);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.6;
}

/* ---- THMANYAH SERIF DISPLAY - high-contrast serif cut for large sizes ---- */

/* Large display headline */
.Thmanyah-Serif-Display {
    font-family: var(--mateen-font-thmanyah-serif-display);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.2;
}

.Thmanyah-Serif-Headline {
    font-family: var(--mateen-font-thmanyah-serif-display);
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.3;
}

.Thmanyah-Serif-Display-Black {
    font-family: var(--mateen-font-thmanyah-serif-display);
    font-weight: 900;
    font-size: 3.5rem;
    line-height: 1.15;
}

.Thmanyah-Serif-Display-Light {
    font-family: var(--mateen-font-thmanyah-serif-display);
    font-weight: 300;
    font-size: 3rem;
    line-height: 1.2;
}

/* ---- DECORATIVE FACES - display use only (no body roles) ---- */

/* RTL-Bushra Medium (single weight 500) */
.Bushra-Display {
    font-family: var(--mateen-font-bushra);
    font-weight: 500;
    font-size: 3.5rem;
    line-height: 1.3;
}

.Bushra-Headline {
    font-family: var(--mateen-font-bushra);
    font-weight: 500;
    font-size: 2.25rem;
    line-height: 1.4;
}

.Bushra-Accent {
    font-family: var(--mateen-font-bushra);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.5;
}

/* Lafeef Bold */
.Lafeef-Display {
    font-family: var(--mateen-font-lafeef);
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.4;
}

/* Lafeef Regular */
.Lafeef-Headline {
    font-family: var(--mateen-font-lafeef);
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.5;
}

/* Lafeef Light */
.Lafeef-Accent {
    font-family: var(--mateen-font-lafeef);
    font-weight: 300;
    font-size: 1.25rem;
    line-height: 1.6;
}

/* Lafeef Air - lightest cut, large sizes only */
.Lafeef-Air {
    font-family: var(--mateen-font-lafeef);
    font-weight: 200;
    font-size: 1.25rem;
    line-height: 1.6;
}

/* TS Zunburk Black (single weight 900) */
.Zunburk-Display {
    font-family: var(--mateen-font-zunburk);
    font-weight: 900;
    font-size: 3rem;
    line-height: 1.3;
}

.Zunburk-Headline {
    font-family: var(--mateen-font-zunburk);
    font-weight: 900;
    font-size: 1.75rem;
    line-height: 1.4;
}

.Zunburk-Accent {
    font-family: var(--mateen-font-zunburk);
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1.5;
}

/* ZEYADA Arabic ExtraBold UltraCondensed (single weight 800) */
.Zeyada-Display {
    font-family: var(--mateen-font-zeyada);
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1.2;
}

.Zeyada-Headline {
    font-family: var(--mateen-font-zeyada);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.3;
}

.Zeyada-Accent {
    font-family: var(--mateen-font-zeyada);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.4;
}

/* ---- SURAH NAMES stay in Tajawal ("Keep Tajawal for showing ayah text and surah names") ----
   Arabic UI text is Thmanyah Sans (localization.css); surah names are the exception. Put this class on any
   element that shows a surah name rendered in the page font (API SuraName pills, ArabicName captions).
   Elements that already use .mateen-ayah (sura pickers, SuraAyahSelector) keep the Mushaf face and must
   NOT also get this class. Scoped to html[lang="ar"] so en/nl rendering is unchanged (there Tajawal was
   never applied to these). Weight is not set - the element's own weight picks the real Tajawal file. */
html[lang="ar"] .mateen-sura-name {
    font-family: var(--mateen-tajawal-font);
}