/* =============================================================
* slides-lite · design-tokens.css v1.1
* Wayne 铁律：字号 >= 20px；行高 120-150%；禁紫色渐变；无 AI 味。
* 覆盖：8 模板配色、6 档字号、8 档间距、3 档圆角、3 档阴影、3 档动画
* 使用方式：在页面 切换模板配色
* ============================================================= */
/* ---------- 1. 基础调色板（Neutral · 中性色，跨模板共用） ---------- */
:root {
/* Ink 墨色 —— 用于文字 */
--ink-900: #0F1115; /* 主标题 */
--ink-800: #1B1F27; /* 副标题 */
--ink-700: #2A2F3A; /* 正文强 */
--ink-600: #4A5162; /* 正文 */
--ink-500: #6B7280; /* 弱化正文/图例 */
--ink-400: #9AA1AE; /* 辅助/占位 */
--ink-300: #C9CED6; /* 描边 */
--ink-200: #E4E7EB; /* 分割线 */
--ink-100: #F1F3F5; /* 弱底 */
--ink-050: #F8F9FA; /* 页面弱底 */
/* Paper 纸底 —— 用于背景 */
--paper: #FFFFFF;
--paper-warm: #FBF8F3; /* 米白 */
--paper-cool: #F7F9FC; /* 冷白 */
/* 语义状态色（跨模板通用；不用作大面积色块） */
--state-success: #2E7D32;
--state-warning: #B7791F;
--state-danger: #B42318;
--state-info: #1D6FBF;
}
/* ---------- 2. 8 模板配色（8 组主色 · 每组含 primary/accent/surface/on-primary） ---------- */
/* T1 · Editorial 编辑体 —— 深墨黑 + 象牙白，报纸/杂志感 */
[data-template="editorial"] {
--brand-primary: #111318;
--brand-primary-ink: #FFFFFF;
--brand-accent: #C8A24A; /* 铜金 */
--brand-surface: #FBF8F3;
--brand-surface-ink: #1B1F27;
--brand-muted: #E9E4D7;
--brand-line: #1B1F27;
}
/* T2 · Bauhaus 包豪斯 —— 原色三角（红黄蓝），强几何 */
[data-template="bauhaus"] {
--brand-primary: #1D3FA6; /* 蓝 */
--brand-primary-ink: #FFFFFF;
--brand-accent: #E4B10F; /* 黄 */
--brand-surface: #F5F1E8;
--brand-surface-ink: #0F1115;
--brand-muted: #E8C79A;
--brand-line: #C13E1F; /* 红 */
}
/* T3 · Swiss 瑞士国际主义 —— 黑白灰 + 一抹红，Grid 至上 */
[data-template="swiss"] {
--brand-primary: #0A0A0A;
--brand-primary-ink: #FFFFFF;
--brand-accent: #D7263D;
--brand-surface: #FFFFFF;
--brand-surface-ink: #0A0A0A;
--brand-muted: #E8E8E8;
--brand-line: #0A0A0A;
}
/* T4 · Terminal 终端 —— 深底 + 荧光绿/琥珀，代码工程感（不用紫色） */
[data-template="terminal"] {
--brand-primary: #0E1116;
--brand-primary-ink: #E6EDF3;
--brand-accent: #4ADE80; /* 荧光绿 */
--brand-surface: #10151C;
--brand-surface-ink: #E6EDF3;
--brand-muted: #1B2028;
--brand-line: #2A2F3A;
}
/* T5 · Ceramic 陶瓷 —— 陶土/骨瓷/釉青，日式极简 */
[data-template="ceramic"] {
--brand-primary: #6C5643; /* 陶土 */
--brand-primary-ink: #FBF8F3;
--brand-accent: #5B7A75; /* 釉青 */
--brand-surface: #F3EEE6;
--brand-surface-ink: #2A2F3A;
--brand-muted: #E1D6C4;
--brand-line: #B9AA92;
}
/* T6 · Botanical 植物学 —— 森绿 + 苔藓 + 米白，自然科普 */
[data-template="botanical"] {
--brand-primary: #234B34;
--brand-primary-ink: #F4F1EA;
--brand-accent: #C57A3D; /* 秋叶橙 */
--brand-surface: #F4F1EA;
--brand-surface-ink: #1A2E22;
--brand-muted: #D8DDBF;
--brand-line: #4C7A4C;
}
/* T7 · Newsroom 新闻编辑室 —— 深靛蓝 + 印刷灰 + 警戒红 */
[data-template="newsroom"] {
--brand-primary: #14213D;
--brand-primary-ink: #FFFFFF;
--brand-accent: #E63946;
--brand-surface: #F7F7F7;
--brand-surface-ink: #14213D;
--brand-muted: #E0E0E0;
--brand-line: #14213D;
}
/* T8 · Blueprint 蓝图 —— 工程蓝 + 白线 + 米黄标注 */
[data-template="blueprint"] {
--brand-primary: #163C6B;
--brand-primary-ink: #F4F1E4;
--brand-accent: #E7B75A; /* 米黄 */
--brand-surface: #1B4A82;
--brand-surface-ink: #F4F1E4;
--brand-muted: #2A5CA2;
--brand-line: #F4F1E4;
}
/* ---------- 3. 字体系统 ---------- */
:root {
--font-display: "Manrope", "Inter", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
--font-body: "Inter", "PingFang SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
--font-serif: "Source Serif Pro", "Noto Serif SC", "Songti SC", Georgia, serif; /* 供 Editorial/Newsroom 用 */
/* 字重梯度 */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-black: 800;
}
/* ---------- 4. 字号（6 档；普通屏幕优先完整显示，投屏仍保持 20px+ 基线） ---------- */
:root {
--fs-xs: clamp(18px, 1.02vw, 20px); /* 图例/标签/脚注 */
--fs-sm: clamp(19px, 1.10vw, 22px); /* 辅助正文 */
--fs-md: clamp(20px, 1.28vw, 24px); /* 正文默认 */
--fs-lg: clamp(26px, 1.85vw, 32px); /* 卡片标题/H3 */
--fs-xl: clamp(34px, 2.75vw, 44px); /* 章节标题/H2 */
--fs-2xl: clamp(46px, 4.25vw, 64px); /* 首页大标题/H1 */
/* 行高（120-150% 区间） */
--lh-tight: 1.20; /* 大标题 */
--lh-snug: 1.30; /* 卡片标题 */
--lh-base: 1.45; /* 正文 */
--lh-loose: 1.50; /* 长段落 */
/* 字距 */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-caps: 0.08em;
}
/* ---------- 5. 间距（8 档 · 4px 基）—— 呼吸感优先 ---------- */
:root {
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: clamp(18px, 1.7vw, 24px);
--sp-6: clamp(22px, 2.2vw, 32px);
--sp-7: clamp(32px, 3.4vw, 48px);
--sp-8: clamp(40px, 4.4vw, 64px);
/* 页面级安全内边距（含 10-20% 出血保护） */
--page-pad-x: clamp(40px, 5vw, 80px);
--page-pad-y: clamp(28px, 4vh, 56px);
--safe-inset: 8%; /* 10-20% 出血区中位 */
}
/* ---------- 6. 圆角（3 档） ---------- */
:root {
--radius-sm: 6px;
--radius-md: 14px;
--radius-lg: 24px;
--radius-full: 999px;
}
/* ---------- 7. 阴影（3 档 · 均为中性阴影，不带彩色晕） ---------- */
:root {
--shadow-sm: 0 1px 2px rgba(15,17,21,0.06), 0 1px 1px rgba(15,17,21,0.04);
--shadow-md: 0 6px 16px rgba(15,17,21,0.08), 0 2px 4px rgba(15,17,21,0.05);
--shadow-lg: 0 24px 48px rgba(15,17,21,0.12), 0 8px 16px rgba(15,17,21,0.06);
}
/* ---------- 8. 动画时长 + 缓动（3 档） ---------- */
:root {
--dur-fast: 180ms;
--dur-base: 320ms;
--dur-slow: 640ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* 出场 */
--ease-in: cubic-bezier(0.55, 0, 0.72, 0.16); /* 退场 */
--ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1); /* 页间转场 */
}
/* ---------- 9. 页面网格 & 层级 ---------- */
:root {
--page-w: 1280px; /* 逻辑设计宽 */
--page-h: 720px; /* 16:9 逻辑高（rAF 缩放到视口） */
--grid-col: 12;
--grid-gap: 24px;
--z-bg: 0;
--z-content: 10;
--z-nav: 50;
--z-modal: 100;
}
/* ---------- 10. 特殊页语义变量（首页/章节/结尾） ---------- */
:root {
--hero-title-size: var(--fs-2xl);
--section-title-size: var(--fs-xl);
--outro-title-size: var(--fs-xl);
}
/* ---------- 11. 全局基类 —— 保底可读 ---------- */
html, body {
font-family: var(--font-body);
font-size: var(--fs-md);
line-height: var(--lh-base);
color: var(--ink-800);
background: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* 强约束：任何 、
、 都不得低于 20px */
p, li, span, td, th, dd, dt, figcaption {
font-size: max(var(--fs-xs), 1em);
}
/* =============================================================
* 12. G1 硬化基类（v1.2 · 单文件交付防塌陷）
* 铁律：一屏一页的高度约束必须写死在 CSS，禁止只靠 runtime.js 注入。
* runtime.js 若因任何原因未执行（内联转义错误 / JS 报错 / 加载失败），
* 页面仍必须每屏一页、不塌陷、不堆叠。
* ============================================================= */
.deck > .slide,
.slide {
position: relative; /* 必须：页脚/角标等 absolute 子元素的定位上下文。
缺失会让所有 .slide__footer 相对视口定位并层层重叠。 */
min-height: 100vh;
min-height: 100dvh; /* 移动端动态视口，优先 */
overflow: hidden; /* 内容超出即裁切，暴露密度问题，禁止悄悄溢出堆叠 */
}
/* deck 必须是真正的滚动容器：否则 scroll-snap 无效、程序化翻页（scrollTo）失灵。
这段原先只存在于 runtime.js 注入的样式里 —— 单文件交付不内联 runtime 时会整体丢失。 */
html, body { margin: 0; height: 100%; }
body { overflow: hidden; overscroll-behavior: none; }
.deck {
height: 100vh;
height: 100dvh;
overflow-y: auto;
overflow-x: hidden;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }
.slide {
scroll-snap-align: start;
scroll-snap-stop: always;
}
@media (prefers-reduced-motion: reduce) {
.deck { scroll-behavior: auto; }
}