/* 日本語書体定義: OS 内蔵フォントのみで完結する */

/* ゴシック。各 OS に実在する太さを 400 / 700 に固定し、擬似太字を出さない */
@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");
}

/* 明朝。見出し・ブランド要素用 */
@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 {
  /* 欧文は日本語グリフを持たない OS 書体で描画し、日本語は JaSans に流す。
     Windows の system-ui は Yu Gothic UI に解決されてかなを巻き込むため Segoe UI を使う */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "JaSans", sans-serif;
  --font-serif: "JaSerif", serif;
  /* ui-monospace は Safari だけが解決し、他ブラウザは後続で決まる */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

/* 見出しは字詰めを有効にし、字間はその上で調整する */
h1, h2, h3, .display {
  font-weight: 700;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* 明朝に切り替える見出し・ブランド要素 */
.serif {
  font-family: var(--font-serif);
}

/* 表・フォーム・一覧は情報密度を優先する */
table, form, .dense {
  line-height: 1.5;
}

/* 表の金額・時刻・件数は本文書体のまま桁を揃える */
.num, td.num {
  font-variant-numeric: tabular-nums;
}

/* 識別子・コード・ハッシュ値 */
code, kbd, .id {
  font-family: var(--font-mono);
}