/* ═══════════════════════════════════════════════════════════════════════════
   Rotaract Club of Hong Kong Island East · lang.css
   Per-language type (DIRECTION 4): English, Traditional Chinese (Hong Kong), Simplified Chinese.

   How it works
   1. Every element that carries a lang attribute re-reads the font stacks and the
      metrics for its own language. So <html lang="zh-Hant-HK"> sets up a whole page, and
      a single <span lang="zh-Hans"> in the language panel of an English page is set
      correctly too (with system fonts, because each page loads only its own web fonts).
   2. The metrics are custom properties (--lh-display, --lh-text, --tracking-display …)
      that base.css and components.css consume. Nothing else is needed per component.
   3. All three languages read left to right. There is no right-to-left code in this site.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Font stacks ─────────────────────────────────────────────────────────────
   Written here by tools/build.mjs from src/i18n/languages.json (fonts.display, fonts.text and
   fonts.metrics), one rule per language. This is the ONLY place a family name reaches the CSS:
   edit the registry, never a stylesheet. */
@layer lang {
/* generated from src/i18n/languages.json */
[lang]:lang(en){--font-display:"Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;--font-text:"Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;--cap:0.714;--font-ascent:1.069;--font-descent:0.293;--font-box:1.362}
[lang]:lang(zh-Hant){--font-display:"Noto Sans", "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", "Noto Sans CJK HK", system-ui;--font-text:"Noto Sans", "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", "Noto Sans CJK HK", system-ui;--cap:0.714;--font-ascent:1.069;--font-descent:0.293;--font-box:1.362}
[lang]:lang(zh-Hans){--font-display:"Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui;--font-text:"Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui;--cap:0.714;--font-ascent:1.069;--font-descent:0.293;--font-box:1.362}
}

@layer base {
  /* Re-apply family and rhythm wherever the language changes. :where() keeps this at zero
     specificity, so any component rule still wins. */
  :where([lang]) {
    font-family: var(--font-text);
    line-height: var(--lh-text);
    letter-spacing: normal;
  }
  :where(h1, h2, h3, .h-title, .h-hero, .h-section, .h-sub, .display):where([lang]),
  :where(h1, h2, h3, .h-title, .h-hero, .h-section, .h-sub, .display) :where([lang]) {
    font-family: var(--font-display);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-display);
  }
  :where(h3, .h-sub):where([lang]),
  :where(h3, .h-sub) :where([lang]) {
    line-height: var(--lh-sub);
    letter-spacing: var(--tracking-sub);
  }
}

@layer lang {
  /* ── English: the logo's own pair, a semibold (550) over a light (300), spaced as the logo spaces them ── */
  [lang]:lang(en) {
    --lh-display: 1.06;
    --lh-sub: 1.2;
    --lh-text: 1.65;
    --lh-ui: 1.3;
    --tracking-display: -0.03em;
    --tracking-sub: -0.015em;
    --tracking-light: 0.02em;
    --tracking-slate: 0.12em;
    --case-slate: uppercase;
    --display-scale: 1;
    --text-scale: 1;
    --slate-scale: 1;
    --measure: 36em;
    --mask-pad: .14em;
    --underline-offset: .22em;
    --fw-light: 300;
    --fw-strong: 600;
    --fw-title: 550;
    --fw-display: 550;
    --fw-slate: 300;
  }

  /* ── Chinese: the same super-family, 600 over 300, text at 400. Full-width glyphs need more leading, and
        are never tracked, never slanted and never uppercase. The slate line is 16px. ── */
  [lang]:is(:lang(zh-Hant), :lang(zh-Hans)) {
    --lh-display: 1.25;
    --lh-sub: 1.4;
    --lh-text: 1.8;
    --lh-ui: 1.4;
    --tracking-display: 0em;
    --tracking-sub: 0em;
    --tracking-light: 0em;
    --tracking-slate: 0em;
    --case-slate: none;
    --display-scale: .92;               /* full-width glyphs read larger than Latin at the same size */
    --text-scale: 1;
    --slate-scale: 1.1429;              /* .875rem × 1.1429 = 1rem */
    --measure: 32em;                    /* 32 full-width characters */
    --mask-pad: .12em;
    --underline-offset: .28em;
    --fw-light: 300;
    --fw-strong: 600;
    --fw-title: 600;
    --fw-display: 600;
    --fw-slate: 400;
    line-break: strict;                 /* no line starts with 。，」 or ends with 「 */
    text-autospace: normal;             /* a hair of space between 漢字 and Latin or digits */
  }
}