/* =============================================================================
WILL · BRAND DESIGN TOKENS — "从 SEO 到 GEO" 视觉 DNA · 单一事实源
-----------------------------------------------------------------------------
气质：温暖 / 纸感 / 编辑·杂志感 / 学者气 / 克制 / 高级 / 手作
东方含蓄 × 西方衬线混搭
用法：在任意 HTML 中
引入字体（放在本文件之前或一同引入）：
-----------------------------------------------------------------------------
规则铁律：HEX 不可偏移。深色底（深松绿 / 深褐）上的文字与链接绝不可用
深绿 #1C5D53（会与底色重合），必须用奶白 #F3EEE2 或亮铜金 #F2C892。
============================================================================= */
:root {
/* ─── 1. 原始色 RAW PALETTE（固定 HEX，不可偏移） ───────────────────────── */
--c-paper: #F7F3EA; /* 纸色主背景 · 米杏 */
--c-paper2: #FBF8F1; /* 浅纸 · 次级背景 */
--c-card: #FFFFFF; /* 卡片白 */
--c-ink: #211E18; /* 主墨 · 正文 · 近黑暖褐 */
--c-ink2: #4A463D; /* 次墨 · 副文 */
--c-muted: #8C8478; /* 弱化 · 注释/占位 */
--c-line: #E4DCCC; /* 描边 · 分隔线 */
--c-pine: #1C5D53; /* 主品牌色 · 松绿（最核心） */
--c-pine-soft: #E3EDEA; /* 松绿软底 */
--c-pine-deep-a: #234B44; /* 深绿反白块渐变 起 */
--c-pine-deep-b: #16524A; /* 深绿反白块渐变 止 */
--c-copper: #BD6B3A; /* 强调色 · 铜（数字/箭头/强调，第二主色） */
--c-copper-soft: #F6E7DA; /* 铜软底 */
--c-gold: #A8843C; /* 点缀金 · 价格/高光（少量） */
--c-dark: #1B1812; /* 深底/页脚 · 近黑暖褐 */
--c-dark-text: #C9C1B2; /* 深底之上的正文 */
/* 深色底专用前景（铁律）：奶白 + 亮铜金，绝不在深底用 --c-pine */
--c-cream: #F3EEE2; /* 奶白 · 深底文字 */
--c-copper-lite: #F2C892; /* 亮铜金 · 深底链接/强调/箭头 */
/* ─── 2. 语义层 SEMANTIC（页面/组件请优先用语义变量） ──────────────────── */
--bg: var(--c-paper); /* 页面背景 */
--bg-soft: var(--c-paper2); /* 次级背景 */
--surface: var(--c-paper2); /* 表面/区块底 */
--card: var(--c-card); /* 卡片底 */
--text: var(--c-ink); /* 正文文字 */
--text-soft: var(--c-ink2); /* 副文文字 */
--muted: var(--c-muted); /* 弱化文字 */
--line: var(--c-line); /* 描边/分隔 */
--brand: var(--c-pine); /* 主品牌色 */
--brand-soft: var(--c-pine-soft); /* 主品牌软底 */
--accent: var(--c-copper); /* 强调色 */
--accent-soft: var(--c-copper-soft);/* 强调软底 */
--gold: var(--c-gold); /* 点缀金 */
--inverse-bg: var(--c-dark); /* 反白容器背景（深底） */
--inverse-text: var(--c-dark-text); /* 反白容器文字 */
--inverse-link: var(--c-copper-lite);/* 反白容器链接（亮铜金，铁律） */
--inverse-cream: var(--c-cream); /* 反白容器奶白文字 */
/* ─── 3. 网点纹理 GRAIN（26px 栅格 · 极淡暖灰网点） ───────────────────── */
--grain-color: rgba(140,132,120,.10);
--grain-size: 26px;
--grain: radial-gradient(circle at 1px 1px, var(--grain-color) 1px, transparent 0);
/* ─── 4. 间距 SPACING（4px 基准节奏） ─────────────────────────────────── */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
/* ─── 5. 圆角 RADIUS ──────────────────────────────────────────────────── */
--r-sm: 12px; /* 小卡片/输入 */
--r-md: 16px; /* 标准卡片 */
--r-lg: 18px; /* 大卡片/容器 */
--r-pill: 50px; /* 胶囊 */
/* ─── 6. 阴影 SHADOW（极柔双层） ─────────────────────────────────────── */
--shadow: 0 1px 2px rgba(33,30,24,.04), 0 8px 30px rgba(33,30,24,.06);
--shadow-sm: 0 1px 2px rgba(33,30,24,.05);
/* ─── 7. 字体栈 FONT STACKS ───────────────────────────────────────────── */
--font-serif: "Noto Serif SC", "Songti SC", serif; /* 中文标题衬线 */
--font-display: "Fraunces", "Noto Serif SC", Georgia, serif; /* 展示数字/英文标题 */
--font-sans: "Noto Sans SC", system-ui, -apple-system, "PingFang SC", sans-serif; /* 中文正文 */
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* kicker/数据 */
/* ─── 8. 排版尺度（可选语义） ─────────────────────────────────────────── */
--lh-body: 1.85; /* 正文行高 */
--ls-mono: .18em; /* mono 字距 .1~.3em */
--maxw: 760px; /* 内容容器最大宽度 */
}
/* =============================================================================
RESET · 基础重置
============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
/* =============================================================================
BODY · 米杏纸底 + 极淡网点栅格
============================================================================= */
body {
font-family: var(--font-sans);
font-weight: 400;
line-height: var(--lh-body);
color: var(--text);
background-color: var(--bg);
background-image: var(--grain);
background-size: var(--grain-size) var(--grain-size);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* =============================================================================
TYPOGRAPHY · 排版（h1-h4 衬线 / 正文无衬线 行高 1.85）
============================================================================= */
h1, h2, h3, h4 {
font-family: var(--font-serif);
color: var(--text);
line-height: 1.25;
font-weight: 700;
letter-spacing: -.01em;
text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 900; margin-bottom: var(--sp-5); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin-bottom: var(--sp-4); margin-top: var(--sp-7); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-bottom: var(--sp-3); margin-top: var(--sp-6); }
h4 { font-size: 1.12rem; margin-bottom: var(--sp-2); margin-top: var(--sp-5); }
p { margin-bottom: var(--sp-4); color: var(--text-soft); }
p.lead { font-size: 1.18rem; color: var(--text); }
strong, b { font-weight: 700; color: var(--text); }
small { font-size: .82rem; color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }
blockquote {
margin: var(--sp-5) 0;
padding: var(--sp-2) var(--sp-5);
border-left: 3px solid var(--accent);
color: var(--text-soft);
font-family: var(--font-serif);
font-style: italic;
}
code, kbd, samp {
font-family: var(--font-mono);
font-size: .88em;
background: var(--brand-soft);
color: var(--brand);
padding: .12em .4em;
border-radius: 6px;
}
/* =============================================================================
LINKS · 链接（默认松绿 + 细下划线）
铁律：深底容器内链接改用亮铜金（见 .on-dark / .tldr 下方覆盖）
============================================================================= */
a {
color: var(--brand);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent);
transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { text-decoration-color: var(--brand); }
/* 深底容器内的链接（亮铜金） —— 满足对比铁律 */
.on-dark a,
.tldr a,
.callout--pine a,
[data-theme="dark"] a {
color: var(--inverse-link);
text-decoration-color: color-mix(in srgb, var(--inverse-link) 50%, transparent);
}
.on-dark a:hover,
.tldr a:hover,
.callout--pine a:hover,
[data-theme="dark"] a:hover { text-decoration-color: var(--inverse-link); }
/* =============================================================================
LAYOUT · .wrap 内容容器
============================================================================= */
.wrap {
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--sp-5);
}
.wrap--wide { max-width: 1080px; }
/* =============================================================================
KICKER · Mono 大写小标（前置 42×1.5px 铜色短横线）
============================================================================= */
.kicker {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-mono);
font-size: .74rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--ls-mono);
color: var(--accent);
margin-bottom: var(--sp-3);
}
.kicker::before {
content: "";
width: 42px;
height: 1.5px;
background: var(--accent);
flex: none;
}
/* 深底上的 kicker 横线与字用亮铜金 */
.on-dark .kicker, .tldr .kicker { color: var(--inverse-link); }
.on-dark .kicker::before, .tldr .kicker::before { background: var(--inverse-link); }
/* =============================================================================
SECTION NUMBER · 巨大斜体衬线序号（Fraunces italic 900 · 铜色）
============================================================================= */
.sec-num {
font-family: var(--font-display);
font-style: italic;
font-weight: 900;
font-size: clamp(3.2rem, 9vw, 5.5rem);
line-height: .9;
color: var(--accent);
display: block;
margin-bottom: var(--sp-2);
}
.sec-num--pine { color: var(--brand); }
.sec-num--gold { color: var(--gold); }
/* =============================================================================
CARD · 圆角卡片 + 极柔阴影
============================================================================= */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--shadow);
padding: var(--sp-6);
}
.card--soft { background: var(--bg-soft); box-shadow: var(--shadow-sm); }
.card--flush { padding: 0; overflow: hidden; }
.card__body { padding: var(--sp-6); }
/* =============================================================================
CHIP / PILL · 胶囊标签
============================================================================= */
.chip {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
font-family: var(--font-mono);
font-size: .72rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-soft);
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-pill);
padding: 5px 12px;
}
.chip--pine { color: var(--brand); background: var(--brand-soft); border-color: transparent; }
.chip--copper { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.chip--gold { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--bg)); border-color: transparent; }
/* .pill 与 chip 同形，惯用于更大号的标签 */
.pill {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-sans);
font-size: .9rem;
font-weight: 500;
border-radius: var(--r-pill);
padding: 8px 18px;
background: var(--brand-soft);
color: var(--brand);
}
.pill--copper { background: var(--accent-soft); color: var(--accent); }
/* =============================================================================
BUTTONS · 按钮
============================================================================= */
.btn {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-sans);
font-size: .95rem;
font-weight: 500;
line-height: 1;
text-decoration: none;
border: 1px solid var(--line);
border-radius: var(--r-pill);
padding: 12px 22px;
cursor: pointer;
background: var(--card);
color: var(--text);
transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary {
background: var(--brand);
border-color: var(--brand);
color: var(--c-cream);
}
.btn-primary:hover { background: color-mix(in srgb, var(--brand) 88%, #000); color: var(--c-cream); }
.btn-ghost {
background: transparent;
border-color: var(--brand);
color: var(--brand);
}
.btn-ghost:hover { background: var(--brand-soft); }
/* =============================================================================
CALLOUT · 软底信息高亮块（松绿 / 铜）
============================================================================= */
.callout {
border-radius: var(--r-md);
padding: var(--sp-5) var(--sp-6);
margin: var(--sp-5) 0;
border-left: 4px solid var(--line);
}
.callout p:last-child { margin-bottom: 0; }
.callout--pine {
background: var(--brand-soft);
border-left-color: var(--brand);
}
.callout--pine .callout__title { color: var(--brand); }
.callout--copper {
background: var(--accent-soft);
border-left-color: var(--accent);
}
.callout--copper .callout__title { color: var(--accent); }
.callout__title {
font-family: var(--font-mono);
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .14em;
margin-bottom: var(--sp-2);
}
/* =============================================================================
ARROW LIST · 铜色 "→" 作列表符号
============================================================================= */
.arrow-list { list-style: none; padding: 0; margin: var(--sp-4) 0; }
.arrow-list li {
position: relative;
padding-left: var(--sp-6);
margin-bottom: var(--sp-3);
color: var(--text-soft);
}
.arrow-list li::before {
content: "→";
position: absolute;
left: 0;
top: 0;
color: var(--accent);
font-weight: 700;
}
/* 深底上的箭头列表用亮铜金 */
.on-dark .arrow-list li::before, .tldr .arrow-list li::before { color: var(--inverse-link); }
/* =============================================================================
PROS & CONS · pro 用 + / con 用 –
============================================================================= */
.proscons { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0; list-style: none; padding: 0; }
.proscons .pro,
.proscons .con {
position: relative;
padding-left: var(--sp-6);
color: var(--text-soft);
}
.proscons .pro::before,
.proscons .con::before {
position: absolute;
left: 0;
top: 0;
width: 1.1em;
text-align: center;
font-family: var(--font-mono);
font-weight: 700;
}
.proscons .pro::before { content: "+"; color: var(--brand); }
.proscons .con::before { content: "–"; color: var(--accent); }
/* =============================================================================
TL;DR · 深松绿反白块（重点信息）
铁律：内部文字奶白，链接/强调亮铜金，绝不用深松绿前景
============================================================================= */
.tldr {
background: linear-gradient(155deg, var(--c-pine-deep-a), var(--c-pine-deep-b));
color: var(--inverse-cream);
border-radius: var(--r-lg);
padding: var(--sp-6) var(--sp-7);
margin: var(--sp-6) 0;
box-shadow: var(--shadow);
}
.tldr h1, .tldr h2, .tldr h3, .tldr h4 { color: var(--inverse-cream); }
.tldr p { color: var(--inverse-cream); }
.tldr strong, .tldr b { color: #fff; }
.tldr .tldr__label {
display: inline-block;
font-family: var(--font-mono);
font-size: .74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--inverse-link);
margin-bottom: var(--sp-3);
}
.tldr .accent, .tldr .num { color: var(--inverse-link); }
/* =============================================================================
ON-DARK · 通用深底容器（页脚 / 反白区块）
============================================================================= */
.on-dark {
background: var(--inverse-bg);
color: var(--inverse-text);
border-radius: var(--r-lg);
padding: var(--sp-7);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--inverse-cream); }
.on-dark p { color: var(--inverse-text); }
.on-dark strong, .on-dark b { color: #fff; }
.on-dark .accent { color: var(--inverse-link); }
/* =============================================================================
SWATCH · 色卡（设计系统展示用）
============================================================================= */
.swatch {
display: inline-flex;
flex-direction: column;
gap: var(--sp-2);
width: 130px;
}
.swatch__chip {
height: 72px;
border-radius: var(--r-sm);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
}
.swatch__name {
font-family: var(--font-sans);
font-size: .82rem;
font-weight: 500;
color: var(--text);
}
.swatch__hex {
font-family: var(--font-mono);
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
}
/* =============================================================================
UTILITIES · 工具类
============================================================================= */
.text-brand { color: var(--brand); }
.text-accent { color: var(--accent); }
.text-gold { color: var(--gold); }
.text-muted { color: var(--muted); }
.bg-pine-soft { background: var(--brand-soft); }
.bg-copper-soft { background: var(--accent-soft); }
.serif { font-family: var(--font-serif); }
.display { font-family: var(--font-display); }
.mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; }
.center { text-align: center; }
.stack > * + * { margin-top: var(--sp-4); }
/* 展示用大数字（Fraunces italic 900 · 铜色） */
.big-num {
font-family: var(--font-display);
font-style: italic;
font-weight: 900;
color: var(--accent);
line-height: 1;
}
/* =============================================================================
RESPONSIVE · 响应式微调
============================================================================= */
@media (max-width: 640px) {
.wrap { padding-inline: var(--sp-4); }
.card { padding: var(--sp-5); }
.tldr { padding: var(--sp-5); }
.on-dark { padding: var(--sp-5); }
}