:root {
    --tbf-font-sans: "TBF OPPO Sans", "HarmonyOS Sans SC", "HarmonyOS Sans", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tbf-font-display: "TBF Outfit", "TBF Harmony Latin", "HarmonyOS Sans", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --tbf-font-size-min: 12px;
    --tbf-ink: #101b31;
    --tbf-ink-2: #344159;
    --tbf-muted: #7d899c;
    --tbf-accent: #ff4f75;
    --tbf-accent-soft: rgba(255, 79, 117, .1);
    --tbf-surface: rgba(255, 255, 255, .78);
    --tbf-surface-strong: rgba(255, 255, 255, .92);
    --tbf-surface-soft: rgba(244, 248, 255, .72);
    --tbf-glass-panel-bg: linear-gradient(135deg, rgba(240, 247, 255, .82), rgba(248, 243, 251, .76));
    --tbf-glass-panel-border: rgba(255, 255, 255, .84);
    --tbf-glass-panel-shadow: 0 24px 62px rgba(35, 51, 82, .12), inset 0 1px 0 rgba(255, 255, 255, .92);
    --tbf-glass-panel-filter: blur(30px) saturate(162%);
    --tbf-glass-inner-bg: rgba(255, 255, 255, .34);
    --tbf-glass-inner-border: rgba(255, 255, 255, .58);
    --tbf-chrome-glass-bg: rgba(238, 246, 255, .42);
    --tbf-chrome-glass-filter: blur(32px) saturate(175%);
    --tbf-border: rgba(16, 27, 49, .09);
    --tbf-border-light: rgba(255, 255, 255, .86);
    --tbf-shadow-sm: 0 12px 34px rgba(36, 54, 91, .075);
    --tbf-shadow-md: 0 24px 70px rgba(36, 54, 91, .12);
    --tbf-radius-sm: 14px;
    --tbf-radius-md: 20px;
    --tbf-radius-lg: 28px;
    /*
     * 全站唯一外层页面版心。
     * 值只在这里按 CSS viewport 分档；Header / 首页 / 归档 / 详情 / Footer
     * 均只读取 --tbf-container，不再各自维护 max-width。
     * 基础断点沿用成熟响应式体系的 576 / 768 / 992 / 1200 节奏，
     * 再为 1440 / 1680 / 1920 / 2K / 4K 增加媒体站宽屏档位。
     */
    --tbf-container: 100%;
}

@media (min-width: 576px) {
    :root { --tbf-container: 540px; }
}

@media (min-width: 768px) {
    :root { --tbf-container: 720px; }
}

@media (min-width: 992px) {
    :root { --tbf-container: 960px; }
}

@media (min-width: 1200px) {
    :root { --tbf-container: 1080px; }
}

@media (min-width: 1440px) {
    :root { --tbf-container: 1200px; }
}

@media (min-width: 1680px) {
    :root { --tbf-container: 1360px; }
}

@media (min-width: 1920px) {
    :root { --tbf-container: 1440px; }
}

@media (min-width: 2200px) {
    :root { --tbf-container: 1600px; }
}

@media (min-width: 2560px) {
    :root { --tbf-container: 1680px; }
}
