/* Japanese typography definitions: rely solely on fonts bundled with the OS */

/* Sans-serif. Pin weights 400 / 700 to faces that exist on each OS so no faux bold is synthesized */
@font-face {
  font-family: "JaSans";
  font-weight: 400;
  src: local("Hiragino Sans"), local("HiraginoSans-W3"),
       local("Yu Gothic Medium"), local("YuGothic-Medium"),
       local("Meiryo");
}
@font-face {
  font-family: "JaSans";
  font-weight: 700;
  src: local("Hiragino Sans W6"), local("HiraginoSans-W6"),
       local("Yu Gothic Bold"), local("YuGothic-Bold"),
       local("Meiryo Bold");
}

/* Serif (Mincho). For headings and brand elements */
@font-face {
  font-family: "JaSerif";
  font-weight: 400;
  src: local("Hiragino Mincho ProN W3"), local("HiraMinProN-W3"),
       local("Yu Mincho"), local("YuMincho-Regular");
}
@font-face {
  font-family: "JaSerif";
  font-weight: 700;
  src: local("Hiragino Mincho ProN W6"), local("HiraMinProN-W6"),
       local("Yu Mincho Demibold"), local("YuMincho-Demibold");
}

:root {
  /* Render Latin text with OS fonts that carry no Japanese glyphs and let Japanese fall through to JaSans.
     On Windows, system-ui resolves to Yu Gothic UI and swallows kana, so Segoe UI is used instead */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "JaSans", sans-serif;
  --font-serif: "JaSerif", serif;
  /* Only Safari resolves ui-monospace; other browsers pick from the fallbacks */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html {
  font-family: var(--font-sans);
  font-synthesis: none;
  line-height: 1.8;
}

/* Headings enable proportional kerning (palt), then letter-spacing is tuned on top of it */
h1, h2, h3, .display {
  font-weight: 700;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Headings and brand elements switched to serif */
.serif {
  font-family: var(--font-serif);
}

/* Tables, forms and lists prioritize information density */
table, form, .dense {
  line-height: 1.5;
}

/* Align digits in amounts, times and counts while keeping the body typeface */
.num, td.num {
  font-variant-numeric: tabular-nums;
}

/* Identifiers, code and hash values */
code, kbd, .id {
  font-family: var(--font-mono);
}