/*
 * KoozhenStudio typography contract
 *
 * Use --koozhen-font for UI copy. It selects the product font for the active
 * document language: Montserrat for English and Noto Sans SC for Chinese.
 */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../assets/fonts/Noto Sans SC/NotoSansSC-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --koozhen-font-latin: "Montserrat", sans-serif;
  --koozhen-font-cjk: "Noto Sans SC", sans-serif;
  --koozhen-font: var(--koozhen-font-latin);
}

html:lang(zh),
html:lang(zh-CN),
html[lang^="zh-"] {
  --koozhen-font: var(--koozhen-font-cjk);
}

html, body, button, input, textarea, select, option {
  font-family: var(--koozhen-font) !important;
}

/* Locale selectors also win over legacy component rules that used !important. */
html:lang(zh) body,
html:lang(zh) button,
html:lang(zh) input,
html:lang(zh) textarea,
html:lang(zh) select,
html:lang(zh-CN) body,
html:lang(zh-CN) button,
html:lang(zh-CN) input,
html:lang(zh-CN) textarea,
html:lang(zh-CN) select,
html[lang^="zh-"] body,
html[lang^="zh-"] button,
html[lang^="zh-"] input,
html[lang^="zh-"] textarea,
html[lang^="zh-"] select {
  font-family: var(--koozhen-font-cjk) !important;
}

pre, code, kbd, samp, .mono, .code, .provider-raw, .error-stack {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
}