/* =========================================================
   Tipografi Arab: satu sumber untuk SEMUA halaman.

   Faris, 29 Sep 2026: «heading = El Messiri, copy = Almarai ... buat untuk
   semua page, jangan satu pun tertinggal». Sebelum ini Arab dipaparkan dengan
   empat cara berbeza pada halaman berbeza: IBM Plex Sans Arabic (halaman
   pemasaran), Noto Naskh Arabic (halaman dokumen), Geeza Pro iaitu fon sistem
   Mac (SELURUH dashboard, semua sembilan tab) dan tiada apa-apa (changelog).

   Fail ini dipaut oleh setiap public/*.html. scripts/check-arabic-fonts.mjs
   menggagalkan deploy kalau ada halaman yang tidak memautnya, atau kalau
   tumpukan Arab lama kembali dalam mana-mana CSS.

   - Tajuk (h1 hingga h6) Arab: El Messiri.
   - Copy, menu, butang, senarai, borang: Almarai.
   - Glif ﷺ ﷽ ﷲ: dipinjam daripada Noto Naskh Arabic (subset 6 KB, di-host
     sendiri, lesen SIL OFL). El Messiri tiada glif itu dan glif Almarai kecil
     sangat, jadi tanpa ini ﷺ dalam tajuk jatuh ke fon sistem yang nipis.

   Sengaja TIDAK diubah (teks ilmiah dan tiruan UI pihak ketiga, bukan copy laman):
   - Amiri untuk nama perawi, rujukan kitab dan soalan/jawapan contoh dalam demo
     halaman produk, dan untuk petikan hadis dalam halaman lama;
   - huruf hiasan pada canvas kompas dan astrolab;
   - tetingkap tiruan macOS, Windows dan Claude dalam tab Setup (fon sistem
     ialah sebahagian daripada tiruan itu).

   Almarai hanya ada berat 300, 400, 700 dan 800. Permintaan 500 jatuh ke 400
   dan 600 ke 700; itu tingkah laku CSS biasa, bukan pepijat.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&family=Almarai:wght@300;400;700;800&display=swap");

@font-face {
    font-family: "AR Salawat";
    src: url("assets/fonts/ar-salawat.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    /* Hanya tiga glif ini. Semua aksara lain dilangkau, jadi fon ini tidak
       pernah menyentuh teks biasa dan boleh diletak paling depan dalam tumpukan. */
    unicode-range: U+FDF2, U+FDFA, U+FDFD;
}

:root {
    /* Nama sahaja, tanpa kata kunci generik, supaya boleh disisip di tengah
       tumpukan lain (tumpukan Latin halaman menambahnya sebagai sandaran,
       jadi teks Arab dalam halaman Inggeris pun tidak jatuh ke fon sistem). */
    --ar-copy-fonts: "AR Salawat", "Almarai";
    --ar-display-fonts: "El Messiri", "AR Salawat", "Almarai";
    --ar-copy: var(--ar-copy-fonts), "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
    --ar-display: var(--ar-display-fonts), "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
}

/* Token induk halaman selain halaman pemasaran: dashboard (landing.css) dan
   log masuk. Halaman pemasaran memakai --x-font-ar* dalam landing-x.css,
   yang kini merujuk token di atas. */
html[lang="ar"] {
    --font-sans: var(--ar-copy);
    --font-display: var(--ar-copy);
}

html[lang="ar"] body {
    font-family: var(--ar-copy);
}

/* Tajuk Arab.
   Halaman pemasaran dan dokumen membungkus teks Arab dalam <span
   data-om-lang="ar">, jadi pemilih pertama mengenai teks Arab sahaja dan
   TIDAK menyentuh tajuk Latin seperti wordmark «Hadith Agent» (h1).
   Dashboard dan log masuk meletakkan teks Arab terus dalam tajuk (data-i18n),
   jadi mereka dikenali melalui body.account-page dan body.auth-page; h1 di
   halaman pemasaran dikecualikan kerana ia wordmark.

   Jangan letakkan «semua halaman yang memuat hadith-agent-i18n.js» di sini.
   Sebuah halaman masuk skop ini HANYA bila rentetannya sudah ada dalam blok
   `ar`: tanpa itu ia memaparkan tajuk Inggeris, dan El Messiri untuk tajuk
   Inggeris kelihatan seperti serif hiasan yang tersalah tempat (itu yang
   berlaku pada log masuk sebelum terjemahan Arabnya ditulis, 29 Sep 2026).
   scripts/check-arabic-fonts.mjs menguatkuasakan syarat ini. */
html[lang="ar"] :is(h1, h2, h3, h4, h5, h6) [data-om-lang="ar"],
html[lang="ar"] body.account-page :is(h1, h2, h3, h4, h5, h6),
html[lang="ar"] body.auth-page :is(h1, h2, h3, h4, h5, h6),
html[lang="ar"] body.x-site :is(h2, h3, h4, h5, h6) {
    font-family: var(--ar-display);
    /* Jarak huruf negatif pada tajuk (-0.05em) melanggarkan glif tulisan
       bersambung; huruf besar tiada dalam Arab. */
    letter-spacing: 0;
    text-transform: none;
    /* Tinggi baris tajuk Latin (0.98) memotong harakat dan ekor huruf. */
    line-height: 1.45;
    font-style: normal;
}

/* Miring tiruan pada tulisan Arab merosakkan bentuk huruf. */
html[lang="ar"] :is(h1, h2, h3, h4, h5, h6) em {
    font-style: normal;
}

/* Jarak huruf memusnahkan sambungan naskh, positif mahupun negatif. Semua
   teks Arab dalam halaman dwibahasa dikembalikan kepada normal, termasuk
   label kecil, butang dan pil yang menetapkan jarak sendiri. Miring juga:
   Arab tiada tradisi miring, dan pelayar hanya menceduk huruf ke tepi
   (miring tiruan), yang memutuskan sambungan. */
html[lang="ar"] [data-om-lang="ar"],
html[lang="ar"] [data-om-lang="ar"] * {
    letter-spacing: 0;
    font-style: normal;
}

/* Butang, medan dan pilihan tidak mewarisi font secara lalai; pelayar memberi
   mereka fon sistem (Arial atau Helvetica pada Mac), jadi «قريبًا» dan «أيّ مكتبة
   تناسبني؟» dalam tab Setup dashboard dicat dengan Arial walaupun seluruh
   halaman Almarai. :where() menjadikan specificity peraturan ini sifar: ia
   mengalahkan gaya lalai pelayar tetapi tunduk kepada setiap kelas yang sengaja
   memilih font lain. */
:where(html[lang="ar"]) :where(button, input, select, textarea, optgroup) {
    font-family: inherit;
}

/* Dashboard, log masuk dan halaman lain di luar helaian pemasaran menyapu
   jarak huruf pada SEMUA teks dalam mod Arab, kerana teksnya diisi oleh
   skrip (data-i18n) dan tidak dibungkus span bahasa yang boleh disasarkan.
   Sebelum ini enam kelas (tajuk carta, label bar, lencana skill, dll.)
   menyimpan jarak -0.01em hingga 0.06em pada teks Arab. Kod, kunci lesen dan
   arahan terminal dikecualikan: itu Latin monospace dan jaraknya disengajakan.
   Miring disapu bersama (baris «Other (3)» dalam carta skill dan label
   «draft» dalam senarai skill mati menyimpan font-style: italic), dan dengan
   !important: peraturan komponen seperti `.ha-bar-row.is-other .ha-bar-label`
   (0,3,0) mengalahkan sapuan ini (0,2,3), jadi tanpa !important setiap kelas
   baharu yang memiringkan teks akan lolos senyap. */
html[lang="ar"] body:not(.x-site) :where(*):not(code, code *, kbd, kbd *, samp, samp *, pre, pre *) {
    letter-spacing: 0;
    font-style: normal !important;
}