/* =====================================================================
   i18n Typography System
   Per-language font stacks & typographic rules. System fonts only
   (no external requests, no CLS). Loaded AFTER style.css.
   Language is driven by <html lang="..."> (set by app.js).
   ===================================================================== */

:root {
  --font-latin: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-sc: "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-tc: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Source Han Sans TC", "Heiti TC", sans-serif;
  --font-ja: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  --font-ko: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Nanum Gothic", sans-serif;
  --font-th: "Thonburi", "Leelawadee UI", "Leelawadee", "Noto Sans Thai", "Sukhumvit Set", -apple-system, BlinkMacSystemFont, Tahoma, sans-serif;
  --font-cyr: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-vi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* ---------- Global polish ---------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

h1, h2, h3,
.section-h2, .license-card-title, .ztczy-certs-title {
  text-wrap: balance;
}

p, li, dd {
  text-wrap: pretty;
}

/* Tabular figures for prices / metrics / PnL */
.num, .price, .col-price, .v, .pnl, .ledger-row .v,
.about-num, .about-metric .v, .strategy-stat-box,
[class*="metric"] .v, [class*="stat"] strong, [class*="price"] {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Latin: pt / en / es / it / id ---------- */
html[lang^="pt"] body,
html[lang^="en"] body,
html[lang^="es"] body,
html[lang^="it"] body,
html[lang^="id"] body {
  font-family: var(--font-latin);
}

/* ---------- Vietnamese (stacked diacritics need room) ---------- */
html[lang^="vi"] body {
  font-family: var(--font-vi);
  line-height: 1.6;
}
html[lang^="vi"] .hero-inner h1,
html[lang^="vi"] .section-h2,
html[lang^="vi"] .about-hero-left h1,
html[lang^="vi"] .about-head h2,
html[lang^="vi"] .about-body .ztczy-certs-title,
html[lang^="vi"] .labs-hero-left h1,
html[lang^="vi"] .labs-about-inner h2,
html[lang^="vi"] .labs-rd h2,
html[lang^="vi"] .app-inner h2,
html[lang^="vi"] .rewards-text h2 {
  line-height: 1.32;
  letter-spacing: 0;
}

/* ---------- Simplified Chinese ---------- */
html[lang="zh-CN"] body,
html[lang="zh-Hans"] body,
html[lang="zh"] body {
  font-family: var(--font-sc);
}

/* ---------- Traditional Chinese (TC glyph forms, never SC first) ---------- */
html[lang="zh-TW"] body,
html[lang="zh-HK"] body,
html[lang="zh-Hant"] body {
  font-family: var(--font-tc);
}

/* ---------- Japanese ---------- */
html[lang^="ja"] body {
  font-family: var(--font-ja);
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  font-feature-settings: "palt" 0;
}

/* ---------- Korean ---------- */
html[lang^="ko"] body {
  font-family: var(--font-ko);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ---------- Thai (tall ascenders/descenders + tone marks) ---------- */
html[lang^="th"] body {
  font-family: var(--font-th);
  line-height: 1.65;
  word-break: normal;
  overflow-wrap: break-word;
}
html[lang^="th"] p,
html[lang^="th"] li {
  line-height: 1.75;
}
html[lang^="th"] .hero-inner h1,
html[lang^="th"] .section-h2,
html[lang^="th"] .about-hero-left h1,
html[lang^="th"] .about-head h2,
html[lang^="th"] .about-body .ztczy-certs-title,
html[lang^="th"] .labs-hero-left h1,
html[lang^="th"] .labs-about-inner h2,
html[lang^="th"] .labs-rd h2,
html[lang^="th"] .app-inner h2,
html[lang^="th"] .rewards-text h2 {
  line-height: 1.45;
  padding-top: 0.06em;
  padding-bottom: 0.06em;
}
html[lang^="th"] h3,
html[lang^="th"] .license-card-title,
html[lang^="th"] .about-card h3,
html[lang^="th"] .labs-card h3,
html[lang^="th"] .about-vc strong,
html[lang^="th"] .footer-col-links h2 {
  line-height: 1.55;
}
html[lang^="th"] .about-metric .v {
  line-height: 1.4;
}

/* ---------- Russian / Cyrillic (long words) ---------- */
html[lang^="ru"] body {
  font-family: var(--font-cyr);
}
html[lang^="ru"] p,
html[lang^="ru"] li {
  hyphens: auto;
  -webkit-hyphens: auto;
}
html[lang^="ru"] h1,
html[lang^="ru"] h2,
html[lang^="ru"] .section-h2 {
  hyphens: manual;
  overflow-wrap: break-word;
}
@media (min-width: 1181px) {
  html[lang^="ru"] .section-h2 { font-size: 42px; }
  html[lang^="ru"] .about-hero-left h1 { font-size: 40px; line-height: 1.22; }
  html[lang^="ru"] .labs-hero-left h1 { font-size: 46px; line-height: 1.2; }
  html[lang^="ru"] .about-head h2,
  html[lang^="ru"] .about-body .ztczy-certs-title { font-size: 34px; }
  html[lang^="ru"] .labs-about-inner h2,
  html[lang^="ru"] .labs-rd h2 { font-size: 38px; }
}

/* ---------- Letter-spacing: no negative tracking for CJK / Thai / Cyrillic ---------- */
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3,
html[lang^="ja"] h1, html[lang^="ja"] h2, html[lang^="ja"] h3,
html[lang^="ko"] h1, html[lang^="ko"] h2, html[lang^="ko"] h3,
html[lang^="th"] h1, html[lang^="th"] h2, html[lang^="th"] h3,
html[lang^="th"] body,
html[lang^="ru"] h1, html[lang^="ru"] h2, html[lang^="ru"] h3 {
  letter-spacing: 0;
}

/* Monospace areas keep their stack regardless of language */
code, pre, kbd, samp, .mono {
  font-family: var(--font-mono);
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  html[lang^="th"] .hero-inner h1,
  html[lang^="th"] .section-h2,
  html[lang^="th"] .about-hero-left h1,
  html[lang^="th"] .labs-hero-left h1 { line-height: 1.5; }
}