/* Site type system — faces load from FONT_CDN_BASE (R2). See /static/fonts/HOW_TO_R2.txt */

:root {
    --font-en-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-en-display: "Space Grotesk", "Outfit", system-ui, sans-serif;
    /* 简体：拉丁字 Space Grotesk，汉字 Noto Sans SC */
    --font-zh-hans: "Space Grotesk", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    /* 繁体：Taipei 主，Noto Sans TC 回落 */
    --font-zh-hant: "Taipei Sans TC", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    --font-warm: "LXGW WenKai TC", "Noto Serif TC", "Songti TC", serif;
    /* My Blog：英文 Space Grotesk，中文文楷（不论文档语言） */
    --font-blog: "Space Grotesk", "LXGW WenKai TC", "Noto Serif TC", "Songti TC", serif;
    --font-body: var(--font-en-body);
    --font-display: var(--font-en-display);
}

html[data-locale="en"] {
    --font-body: var(--font-en-body);
    --font-display: var(--font-en-display);
}

html[data-locale="zh_Hans"] {
    --font-body: var(--font-zh-hans);
    --font-display: var(--font-zh-hans);
}

html[data-locale="yue_Hant"] {
    /* 繁体默认全文温暖文楷；错误提示单独回落无衬线 */
    --font-body: var(--font-warm);
    --font-display: var(--font-warm);
}

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

h1, h2, h3,
.font-display,
.brand-title,
.site-brand {
    font-family: var(--font-display);
}

/* 首页这三处文案：任意语言都保持与英文界面相同字体 */
.outlined-top-left,
.hero-subtitle {
    font-family: var(--font-en-body);
}

.hero-title,
.hero-title .hero-title-line {
    font-family: var(--font-en-display);
}

/* My Blog: Latin → Space Grotesk, 中文 → 文楷（任意界面语言） */
body.my-blog {
    --font-body: var(--font-blog);
    --font-display: var(--font-blog);
    font-family: var(--font-blog);
}

body.my-blog :is(h1, h2, h3, .font-display, .brand-title, .site-brand) {
    font-family: var(--font-blog);
}

.font-warm {
    font-family: var(--font-warm);
}

.font-zh-hant {
    font-family: var(--font-zh-hant);
}

/* 错误弹窗 / flash 提示：繁体用 Taipei / Noto Sans TC，保证可读 */
html[data-locale="yue_Hant"] [role="alertdialog"],
html[data-locale="yue_Hant"] [role="alertdialog"] :is(h1, h2, h3, .font-display, .brand-title, .site-brand),
html[data-locale="yue_Hant"] .flash-message {
    font-family: var(--font-zh-hant);
}

button,
input,
select,
textarea {
    font-family: inherit;
}