/* nd-i18n.css — tipografi untuk 23 bahasa.

   Prinsip: webfont Latin TIDAK PERNAH dibebani merender skrip non-Latin.
   Noto CJK 8-16 MB dan Noto Indic/Thai 200-500 KB per skrip — untuk trafik sebesar ini
   itu bukan trade-off. Skrip non-Latin memakai font sistem yang sudah dioptimalkan
   per platform; unicode-range di nd-fonts.css menjamin webfont Latin tidak pernah
   diminta merender glyph-nya (nol fase tofu, nol unduhan sia-sia).

   --nd-lh-script / --nd-ls-script adalah PENGALI per skrip: Thai & Indic butuh
   line-height lebih longgar (tanda di atas/bawah baris), Arab butuh letter-spacing
   dinetralkan (aksara menyambung — spasi antar huruf merusak bentuk kata).
*/
/* public/css/nd/nd-i18n.css */
:root{
  /* Font emoji ditaruh di ekor: judul kanal dari provider kerap memuat emoji
     (mis. "Hot \1F525"), dan tanpa ini glif-nya jadi kotak tofu karena webfont
     ND Text di-subset tanpa blok emoji. Semua varian --nd-font-text berakhir di
     var(--nd-font-sys), jadi satu tempat ini menutup ke-7 varian sekaligus. */
  --nd-font-sys: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
  --nd-font-text: "ND Text", "ND Text Fallback", var(--nd-font-sys);
  --nd-font-display: "ND Display", "ND Display Fallback", var(--nd-font-text);
  --nd-lh-script: 1;      /* pengali line-height per skrip */
  --nd-ls-script: 1;      /* pengali letter-spacing per skrip (0 = netralkan) */
}

/* --- stack per skrip: webfont Latin TETAP di depan (unicode-range akan
       melewatkannya untuk glyph non-Latin), lalu font sistem skrip itu --- */
html[lang|="ja"]{ --nd-font-text:"ND Text","Hiragino Sans","Yu Gothic UI","Noto Sans JP","Meiryo",var(--nd-font-sys);
                  --nd-font-display:var(--nd-font-text); --nd-lh-script:1.10; --nd-ls-script:0; }
html[lang|="ko"]{ --nd-font-text:"ND Text","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",var(--nd-font-sys);
                  --nd-font-display:var(--nd-font-text); --nd-lh-script:1.10; --nd-ls-script:0; }
html[lang|="zh"],html[lang|="zh-Hant"],html[lang="zh-Hant"]{
                  --nd-font-text:"ND Text","PingFang TC","Microsoft JhengHei","Noto Sans TC",var(--nd-font-sys);
                  --nd-font-display:var(--nd-font-text); --nd-lh-script:1.10; --nd-ls-script:0; }
html[lang|="th"]{ --nd-font-text:"ND Text","Sarabun","Leelawadee UI","Noto Sans Thai",var(--nd-font-sys);
                  --nd-font-display:var(--nd-font-text); --nd-lh-script:1.26; --nd-ls-script:0; }
html[lang|="hi"],html[lang|="bn"],html[lang|="ta"],html[lang|="te"]{
                  --nd-font-text:"ND Text","Nirmala UI","Noto Sans Devanagari","Noto Sans Tamil","Noto Sans Telugu","Noto Sans Bengali",var(--nd-font-sys);
                  --nd-font-display:var(--nd-font-text); --nd-lh-script:1.22; --nd-ls-script:0; }
html[lang|="ar"]{ --nd-font-text:"ND Text","Segoe UI Historic","Geeza Pro","Noto Naskh Arabic","Tahoma",var(--nd-font-sys);
                  --nd-font-display:var(--nd-font-text); --nd-lh-script:1.24; --nd-ls-script:0; }
html[lang|="vi"]{ --nd-lh-script:1.06; }   /* diakritik ganda butuh ruang */

/* --- line-height: SEMUA token lh ditulis sebagai calc(base * script) --- */
:root{
  --nd-lh-display: calc(1.06 * var(--nd-lh-script));
  --nd-lh-tight:   calc(1.16 * var(--nd-lh-script));
  --nd-lh-snug:    calc(1.30 * var(--nd-lh-script));   /* judul kartu 2 baris */
  --nd-lh-base:    calc(1.52 * var(--nd-lh-script));
  --nd-lh-relaxed: calc(1.72 * var(--nd-lh-script));
}
/* --- letter-spacing: SEMUA token ls dikalikan --nd-ls-script --- */
:root{
  --nd-ls-display: calc(-0.028em * var(--nd-ls-script));
  --nd-ls-tight:   calc(-0.018em * var(--nd-ls-script));
  --nd-ls-snug:    calc(-0.008em * var(--nd-ls-script));
  --nd-ls-base:    calc(0em      * var(--nd-ls-script));
  --nd-ls-caps:    calc(0.10em   * var(--nd-ls-script));
}

html[lang|="ar"] .nd-eyebrow, html[lang|="th"] .nd-eyebrow,
html[lang|="hi"] .nd-eyebrow, html[lang|="bn"] .nd-eyebrow,
html[lang|="ta"] .nd-eyebrow, html[lang|="te"] .nd-eyebrow,
html[lang|="ja"] .nd-eyebrow, html[lang|="ko"] .nd-eyebrow,
html[lang|="zh"] .nd-eyebrow{ text-transform:none; }

:root{ --nd-dir:1 } html[dir="rtl"]{ --nd-dir:-1 }
/* contoh indikator bottom-nav, lihat §9.3 */
