/* ===================================================================================
   TAJAWAL TYPOGRAPHY INTERFACE (2026-10-03) - a ready-made set of text-role classes for the
   Tajawal font registered in app.css (the @font-face chain + --mateen-tajawal-font variable live
   there; this file only CONSUMES that variable, it does not redeclare the font). Kept in its own
   file by explicit request rather than folded into app.css.

   THE POINT: one class per use, no combining required. Write "Tajawal-Heading" on an element and
   it gets the family, the weight and the size together - not just the family the way
   .mateen-tajawal (app.css) does. Reach for THIS file when writing Arabic (or Latin) UI text that
   should look like a heading/title/body/caption; reach for .mateen-tajawal directly only when
   something needs the family alone with a custom size/weight of its own.

   Each role name mirrors a MudBlazor Typo tier (h5/subtitle1/body1/caption) so choosing one here
   is the same decision as choosing a Typo value, just rendered in Tajawal instead of Inter.

   WEIGHTS: only 200/300/400/500/700/800/900 exist as real files (app.css's @font-face chain) -
   every weight used below is one of those seven, never an arbitrary number the browser would have
   to synthesize (fake-bold).

   DIRECTION IS NOT SET HERE ON PURPOSE: unlike .mateen-ayah (app.css), these are general-purpose
   UI text roles usable for Arabic OR Latin content, so direction follows the surrounding markup's
   own dir="rtl"/dir="ltr" (or the browser's bidi default) rather than being forced per class. */

/* ---- Heading: page/section headings - MudBlazor Typo.h5/h6 weight class. ---- */
.Tajawal-Heading {
    font-family: var(--mateen-tajawal-font);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.3;
}

/* ---- Title: card/panel titles, one step down from Heading - Typo.subtitle1 weight class. ---- */
.Tajawal-Title {
    font-family: var(--mateen-tajawal-font);
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.4;
}

/* Bold variant of Title - same size, heavier weight, for a title that needs to stand out further
   (e.g. a selected/active card) without stepping up to Heading's size. */
.Tajawal-Title-Bold {
    font-family: var(--mateen-tajawal-font);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.4;
}

/* ---- Text: body copy - Typo.body1 weight class. Tajawal-Text and Tajawal-Text-Md are the same
   size on purpose (see the -Sm/-Lg siblings below): -Md exists so a caller can be explicit about
   "the medium/default size" instead of relying on the bare class meaning the same thing. ---- */
.Tajawal-Text,
.Tajawal-Text-Md {
    font-family: var(--mateen-tajawal-font);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
}

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

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

/* Bold body text - emphasis within a paragraph/list without switching to Title's larger size. */
.Tajawal-Text-Bold {
    font-family: var(--mateen-tajawal-font);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.6;
}

/* Light body text - matches the Light weight registered in app.css (300), for de-emphasized runs
   of text that still need to be body-sized rather than caption-sized. */
.Tajawal-Text-Light {
    font-family: var(--mateen-tajawal-font);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6;
}

/* ---- Caption: the smallest role - helper/meta text, Typo.caption weight class. Inherits text
   color rather than forcing mud-text-secondary, so it still works on a colored/dark surface. ---- */
.Tajawal-Caption {
    font-family: var(--mateen-tajawal-font);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.5;
}

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