/* ================================================================
   fonts-arabic.css — IBM Plex Sans Arabic (global Arabic typography)
   Self-hosted from assets/fonts/arabic/ · weights mapped per spec:
   Thin 100 · ExtraLight 200 · Light 300 · Regular 400 · Medium 500
   SemiBold 600 · Bold 700
   ================================================================ */

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/arabic/IBMPlexSansArabic-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/arabic/IBMPlexSansArabic-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/arabic/IBMPlexSansArabic-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/arabic/IBMPlexSansArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/arabic/IBMPlexSansArabic-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/arabic/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/arabic/IBMPlexSansArabic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ----------------------------------------------------------------
   Smart weight logic — applied to Arabic-language context only
   (scoped under html[lang="ar"]) so pure English pages are untouched.
   English glyphs on bilingual pages keep rendering with Poppins /
   Noto Sans JP because 'IBM Plex Sans Arabic' sits AFTER them in the
   font stack — Arabic codepoints fall back automatically.
   ---------------------------------------------------------------- */

/* Arabic body baseline — Regular, but with correct smoothing so it doesn't
   read as thin/washed-out at small sizes. */
html[lang="ar"] body { font-weight: 400; }

/* Headings, big titles, banners → Bold */
html[lang="ar"]:is(h1, h2, h3, h4, h5, h6),
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] .p-hero h1,
html[lang="ar"] .cx-hero h1,
html[lang="ar"] .cs-hero h1 { font-weight: 700; }

/* Body text, paragraphs, inputs → Regular */
html[lang="ar"] p, html[lang="ar"] input, html[lang="ar"] textarea,
html[lang="ar"] select, html[lang="ar"] li, html[lang="ar"] td { font-weight: 400; }

/* Buttons, navigation, labels, tabs → Medium / SemiBold */
html[lang="ar"] button,
html[lang="ar"] .p-nav, html[lang="ar"] .p-tab, html[lang="ar"] .p-seg-btn,
html[lang="ar"] .cx-tab, html[lang="ar"] label,
html[lang="ar"] .p-field label { font-weight: 500; }

html[lang="ar"] .p-btn-primary, html[lang="ar"] .p-btn-ghost,
html[lang="ar"] .hp-qa-txt, html[lang="ar"] .cs-chip,
html[lang="ar"] .hp-meta-chip, html[lang="ar"] th { font-weight: 600; }

/* Small text, captions, footers, metadata — bumped to Regular for Arabic.
   Plex Arabic's Light (300) is very thin and, at the project's common small
   sizes (0.7–0.88rem), that is the real cause of the pixelated/blurry look.
   Regular (400) + correct smoothing keeps these readable without enlarging. */
html[lang="ar"] small,
html[lang="ar"] .p-row-sub, html[lang="ar"] .hp-tl-time,
html[lang="ar"] .hp-stat-label, html[lang="ar"] .cs-stat-label,
html[lang="ar"] figcaption { font-weight: 400; }

/* Important highlights, alerts, strong tags → Bold */
html[lang="ar"] strong, html[lang="ar"] b,
html[lang="ar"] .p-toast { font-weight: 700; }

/* Elegant / testimonial content → ExtraLight */
html[lang="ar"] blockquote, html[lang="ar"] q,
html[lang="ar"] [data-font="elegant"] { font-weight: 200; }

/* ------------------------------------------------------------------
   Interface-level Arabic weights — cover complex UI pieces that the
   earlier per-class rules left at the 400 baseline (which looks thin
   at small sizes): table cells, count/stat numbers, badges/chips,
   empty-state messages, card sub-labels. All weights are real files
   (500 = Medium, 600 = SemiBold, 700 = Bold) — no synthetic fakes.
   ------------------------------------------------------------------ */

/* Table cells & list rows — Medium so dense Arabic tables stay readable */
html[lang="ar"] td, html[lang="ar"] .p-list .p-row,
html[lang="ar"] .p-list .p-row-title, html[lang="ar"] .cx-item-title { font-weight: 500; }

/* Important numbers (scores, grades, counts, stat values) — SemiBold */
html[lang="ar"] .cs-stat, html[lang="ar"] .hp-stat,
html[lang="ar"] .cs-count-chip, html[lang="ar"] .cx-grade-big,
html[lang="ar"] .p-badge, html[lang="ar"] .cx-due-chip {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Chip buttons — Medium (buttons already 500 via the generic button rule) */
html[lang="ar"] .cx-chip-btn { font-weight: 500; }

/* Empty states — Regular, keeps the message soft but legible */
html[lang="ar"] .cx-empty-msg, html[lang="ar"] .cx-empty p,
html[lang="ar"] .hp-empty-msg { font-weight: 400; }

/* Helper text inside cards / fields — Regular (not thin) */
html[lang="ar"] .p-row-sub, html[lang="ar"] .p-field label,
html[lang="ar"] .cx-item-sub { font-weight: 400; }

/* ------------------------------------------------------------------
   Arabic rendering foundation — applies to ANY Arabic content on any
   page (html[lang="ar"] matches the whole document; :lang(ar) also
   matches Arabic spans nested inside EN/JP pages). Font-family keeps
   Noto Sans JP after IBM Plex so Japanese glyphs never break.
   ------------------------------------------------------------------ */
:lang(ar) {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans JP', 'Segoe UI', Tahoma, sans-serif;
    /* Corrective rendering for smaller Arabic sizes — grayscale hinting
       keeps the typically thin Plex Arabic glyphs from appearing
       pixelated/blurry on macOS (Safari/Firefox) and sub-pixel-heavy LCDs. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

:lang(ar) * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Arabic line-height tuned for Plex Arabic (taller diacritics + ascenders)
   so small text stays readable instead of cramped/pixelated. */
html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] .p-row-sub,
html[lang="ar"] small { line-height: 1.65; }

html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 { line-height: 1.3; }