@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;700;900&family=Noto+Serif+JP:wght@400;700;900&family=Noto+Serif+TC:wght@400;500;700;900&family=Tajawal:wght@400;500;700;800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Old+Mincho:wght@400;700;900&display=swap");

:root {
  --cfo-font-en-body: "Manrope", "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cfo-font-jp-body: "Zen Kaku Gothic New", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cfo-font-tc-body: "Noto Sans TC", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cfo-font-ar-body: "Cairo", "Tajawal", "Noto Naskh Arabic", system-ui, sans-serif;
  --cfo-font-en-heading: "Zen Old Mincho", "Noto Serif JP", Georgia, "Times New Roman", serif;
  --cfo-font-jp-heading: "Zen Old Mincho", "Noto Serif JP", "Yu Mincho", serif;
  --cfo-font-tc-heading: "Noto Serif TC", "Noto Serif JP", "Songti TC", serif;
  --cfo-font-ar-heading: "Noto Naskh Arabic", "Cairo", serif;
}

html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea {
  font-family: var(--cfo-font-en-body);
}

html[lang="ja"] body,
html[lang="ja"] button,
html[lang="ja"] input,
html[lang="ja"] select,
html[lang="ja"] textarea {
  font-family: var(--cfo-font-jp-body);
}

html[lang="zh-TW"] body,
html[lang="zh-TW"] button,
html[lang="zh-TW"] input,
html[lang="zh-TW"] select,
html[lang="zh-TW"] textarea {
  font-family: var(--cfo-font-tc-body);
}

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: var(--cfo-font-ar-body);
}

html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] .serif,
html[lang="en"] .serif-heading,
html[lang="en"] .metric-num,
html[lang="en"] .step-num {
  font-family: var(--cfo-font-en-heading);
}

html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] .serif,
html[lang="ja"] .serif-heading,
html[lang="ja"] .metric-num,
html[lang="ja"] .step-num {
  font-family: var(--cfo-font-jp-heading);
}

html[lang="zh-TW"] h1,
html[lang="zh-TW"] h2,
html[lang="zh-TW"] .serif,
html[lang="zh-TW"] .serif-heading,
html[lang="zh-TW"] .metric-num,
html[lang="zh-TW"] .step-num {
  font-family: var(--cfo-font-tc-heading);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] .serif,
html[lang="ar"] .serif-heading,
html[lang="ar"] .metric-num,
html[lang="ar"] .step-num {
  font-family: var(--cfo-font-ar-heading);
}

html[lang="en"] .eyebrow,
html[lang="en"] .label,
html[lang="en"] .card-tag,
html[lang="en"] .citation-meta,
html[lang="en"] .links,
html[lang="en"] .nav-links,
html[lang="en"] .langs,
html[lang="en"] .button,
html[lang="en"] .btn {
  font-family: var(--cfo-font-en-body);
}

html[lang="ja"] .eyebrow,
html[lang="ja"] .label,
html[lang="ja"] .card-tag,
html[lang="ja"] .citation-meta,
html[lang="ja"] .links,
html[lang="ja"] .nav-links,
html[lang="ja"] .langs,
html[lang="ja"] .button,
html[lang="ja"] .btn {
  font-family: var(--cfo-font-jp-body);
}

html[lang="zh-TW"] .eyebrow,
html[lang="zh-TW"] .label,
html[lang="zh-TW"] .card-tag,
html[lang="zh-TW"] .citation-meta,
html[lang="zh-TW"] .links,
html[lang="zh-TW"] .nav-links,
html[lang="zh-TW"] .langs,
html[lang="zh-TW"] .button,
html[lang="zh-TW"] .btn {
  font-family: var(--cfo-font-tc-body);
}

html[lang="ar"] .eyebrow,
html[lang="ar"] .label,
html[lang="ar"] .card-tag,
html[lang="ar"] .citation-meta,
html[lang="ar"] .links,
html[lang="ar"] .nav-links,
html[lang="ar"] .langs,
html[lang="ar"] .button,
html[lang="ar"] .btn {
  font-family: var(--cfo-font-ar-body);
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
}