/* ============================================================
   TYPOGRAPHY SYSTEM  —  Dr. Shieba
   Bilingual (Latin LTR / Arabic RTL) type tokens + base styles.

   Load order matters:   fonts.css  →  typography.css  →  style.css|admin.css

   Families
     English  display  Plus Jakarta Sans   (variable 200–800)
     English  body/UI  Inter               (variable 100–900)
     Arabic   display  Alexandria          (variable 100–900)
     Arabic   body/UI  IBM Plex Sans Arabic(400/500/600/700)

   The direction-aware tokens (--fw-*, --lh-*, --ls-*) are redefined once
   under [lang="ar"] / [dir="rtl"], so every component that consumes them
   adapts to Arabic automatically — no per-component RTL overrides needed.
   ============================================================ */

:root {
    /* ── Families ─────────────────────────────────────────── */
    --font-sans-en:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display-en:  'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-sans-ar:     'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
    --font-display-ar:  'Alexandria', 'IBM Plex Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
    --font-mono:        ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

    /* Active families — swapped wholesale for Arabic further down */
    --font-body:        var(--font-sans-en);
    --font-heading:     var(--font-display-en);

    /* Back-compat with the previous token names used across style.css */
    --font-en:          var(--font-sans-en);
    --font-ar:          var(--font-sans-ar);

    /* ── Fluid scale (360px → 1280px viewport) ────────────── */
    --fs-display:  clamp(2.25rem, 1.956rem + 1.304vw, 3rem);      /* 36 → 48 */
    --fs-h1:       clamp(1.75rem, 1.554rem + 0.870vw, 2.25rem);   /* 28 → 36 */
    --fs-h2:       clamp(1.5rem,  1.402rem + 0.435vw, 1.75rem);   /* 24 → 28 */
    --fs-h3:       clamp(1.25rem, 1.201rem + 0.217vw, 1.375rem);  /* 20 → 22 */
    --fs-h4:       clamp(1rem,    0.951rem + 0.217vw, 1.125rem);  /* 16 → 18 */
    --fs-body-lg:  1rem;      /* 16 */
    --fs-body:     0.875rem;  /* 14 */
    --fs-caption:  0.75rem;   /* 12 */

    /* ── Weights (Latin) ──────────────────────────────────── */
    --fw-display:  700;
    --fw-h1:       700;
    --fw-h2:       600;
    --fw-h3:       600;
    --fw-h4:       600;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ── Line heights (Latin) ─────────────────────────────── */
    --lh-display:  1.15;
    --lh-h1:       1.20;
    --lh-h2:       1.25;
    --lh-h3:       1.30;
    --lh-h4:       1.35;
    --lh-body:     1.50;
    --lh-caption:  1.40;

    /* ── Tracking (Latin) ─────────────────────────────────── */
    --ls-display:  -0.02em;
    --ls-h1:       -0.02em;
    --ls-h2:       -0.01em;
    --ls-h3:       0;
    --ls-h4:       0;
    --ls-body:     0;
    --ls-caption:  0.01em;
}

/* ============================================================
   ARABIC OVERRIDES
   Arabic needs ~10–15% more leading (diacritics + descenders) and
   must never carry tracking — cursive joins break visually.
   ============================================================ */
[lang="ar"],
[dir="rtl"] {
    --font-body:    var(--font-sans-ar);
    --font-heading: var(--font-display-ar);

    /* Heavier display weight: Arabic strokes read lighter at the same value */
    --fw-display:  800;
    --fw-h1:       700;
    --fw-h2:       700;
    --fw-h3:       600;
    --fw-h4:       600;

    /* +10–15% leading */
    --lh-display:  1.30;
    --lh-h1:       1.35;
    --lh-h2:       1.40;
    --lh-h3:       1.45;
    --lh-h4:       1.50;
    --lh-body:     1.65;
    --lh-caption:  1.55;

    /* Never track Arabic */
    --ls-display:  0;
    --ls-h1:       0;
    --ls-h2:       0;
    --ls-h3:       0;
    --ls-h4:       0;
    --ls-body:     0;
    --ls-caption:  0;
}

/* Latin text explicitly marked inside an Arabic page keeps Latin metrics */
[dir="rtl"] [lang="en"],
[lang="ar"] [lang="en"] {
    font-family: var(--font-sans-en);
}

/* ============================================================
   BASE ELEMENTS
   ============================================================ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    font-optical-sizing: auto;
    font-synthesis-weight: none;   /* never fake-bold Arabic */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-optical-sizing: auto;
    text-wrap: balance;            /* progressive enhancement */
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
h5 { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
h6 { font-size: var(--fs-body);    font-weight: var(--fw-semibold); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }

p { line-height: var(--lh-body); letter-spacing: var(--ls-body); }

small, .text-caption {
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: var(--lh-caption);
    letter-spacing: var(--ls-caption);
}

strong, b { font-weight: var(--fw-bold); }

code, pre, kbd, samp, .font-mono { font-family: var(--font-mono); }

/* Numerals: tabular everywhere they sit in columns or counters */
.tabular-nums,
table td, table th,
time, .stat-value { font-variant-numeric: tabular-nums; }

/* ============================================================
   FORM CONTROLS & BUTTONS
   Browsers do NOT inherit fonts into form controls by default.
   ============================================================ */
button, input, select, textarea, optgroup {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

button, [type="button"], [type="submit"], [type="reset"], .btn {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-body);
}

/* Arabic glyphs sit lower on the baseline than Latin; nudge inline
   button/chip labels back to optical centre without moving the icon. */
[dir="rtl"] .btn,
[dir="rtl"] button,
[dir="rtl"] .badge,
[dir="rtl"] .apage-chip,
[dir="rtl"] .apage-btn,
[dir="rtl"] .admin-badge {
    line-height: var(--lh-body);
}

input::placeholder, textarea::placeholder {
    font-family: inherit;
    font-weight: var(--fw-regular);
    opacity: 0.65;
}

/* ============================================================
   UTILITY CLASSES  —  the scale, usable directly in markup
   ============================================================ */
.t-display {
    font-family: var(--font-heading);
    font-size: var(--fs-display);
    font-weight: var(--fw-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
}

.t-h1 { font-family: var(--font-heading); font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.t-h2 { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.t-h3 { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--fw-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.t-h4 { font-family: var(--font-heading); font-size: var(--fs-h4); font-weight: var(--fw-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }

.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.t-caption { font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); }

.t-medium   { font-weight: var(--fw-medium); }
.t-semibold { font-weight: var(--fw-semibold); }
.t-bold     { font-weight: var(--fw-bold); }

/* Long-form reading measure — caps line length for comfortable reading */
.prose, .article-content, .watch-desc, .aform-prose {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
}

.prose :is(h1, h2, h3, h4) { margin-top: 1.6em; margin-bottom: 0.5em; }
.prose p { margin-bottom: 1em; max-width: 72ch; }
[dir="rtl"] .prose p { max-width: 68ch; }   /* Arabic runs wider per character */