@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Noto+Sans+SC:wght@300;400;500&family=Noto+Sans+TC:wght@300;400;500&family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Serif+TC:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&display=swap");

:root {
  --font-display-en: "Cinzel", "Times New Roman", serif;
  --font-display-zh: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font-display-sc: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-serif: "Cormorant Garamond", "Noto Serif TC", serif;
  --font-ui-en: "Outfit", "Segoe UI", sans-serif;
  --font-ui-zh: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  --font-ui-sc: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
}

html,
body {
  font-family: var(--font-ui-zh), var(--font-ui-en);
}

html[data-lang="en"],
html[data-lang="en"] body {
  font-family: var(--font-ui-en);
}

html[data-lang="zh-Hans"],
html[data-lang="zh-Hans"] body {
  font-family: var(--font-ui-sc), var(--font-ui-en);
}

.font-display {
  font-family: var(--font-display-zh);
  font-weight: 600;
  letter-spacing: 0.06em;
}

html[data-lang="en"] .font-display {
  font-family: var(--font-display-en);
  letter-spacing: 0.18em;
}

html[data-lang="zh-Hans"] .font-display {
  font-family: var(--font-display-sc);
}