/* ============================================================
   theme-notion.css — 采用 Notion 设计系统的视觉语言
   令牌来源：Notion 设计规范
   - 暖中性色：#ffffff / #f6f5f4 / #615d59 / #a39e98
   - 近黑正文：rgba(0,0,0,.95)
   - whisper 边框：1px solid rgba(0,0,0,.1)
   - 单一饱和强调色：Notion Blue #0075de（active #005bab）
   - 语义色：Success #1aae39 / Warning #dd5b00
   - 4 层低透明度卡片阴影（max opacity 0.04）
   ============================================================ */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: rgba(0, 0, 0, .95);
  --muted: #615d59;
  --line: rgba(0, 0, 0, .1);
  --brand: #0075de;
  --brand-deep: #005bab;
  --brand-soft: #f2f9ff;
  --warm: #f6f5f4;
  --radius: 12px;
  --shadow-card:
    0 4px 18px rgba(0, 0, 0, .04),
    0 2.025px 7.847px rgba(0, 0, 0, .027),
    0 .8px 2.925px rgba(0, 0, 0, .02),
    0 .175px 1.041px rgba(0, 0, 0, .01);
  --font: -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
}

::selection { background: var(--brand-soft); }

:focus-visible {
  outline: 2px solid #097fe8;
  outline-offset: 3px;
}

a { color: var(--brand); }
a:hover { color: var(--brand-deep); }

/* ---------- 页头 ---------- */

.site-header {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--line);
}

.brand .mark { background: #31302e; }
.brand .mark svg rect { fill: #31302e; }

.brand-text strong { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.brand-text small { color: #a39e98; }

.site-header nav a {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.site-header nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- 标题与正文 ---------- */

.kicker,
.section-label {
  font: 600 12px/1.4 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kicker { color: #615d59; }
.section-label { color: #a39e98; }

h1,
.hero h1 {
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}

.lede {
  color: var(--muted);
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.45;
}

.hero { padding: 84px 0 56px; }
.hero .sub { color: var(--muted); font-size: 16.5px; line-height: 1.75; }

.section h2 {
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 700;
  margin: 0 0 22px;
}

.section h3 {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.prose p { color: var(--ink); }

/* ---------- 按钮（Notion：4px 圆角 / 单一强调色） ---------- */

.btn {
  background: var(--brand);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 600;
  transition: background .15s ease, transform .1s ease;
}
.btn:hover { background: var(--brand-deep); color: #fff; }
.btn:active { transform: scale(.97); }

.btn-ghost {
  background: rgba(0, 0, 0, .05);
  color: var(--ink);
  border-color: transparent;
}
.btn-ghost:hover { background: rgba(0, 0, 0, .08); color: var(--ink); }

/* ---------- 章节（Notion 的暖白交替，无硬分隔线） ---------- */

.section { border-top: 0; padding: 72px 0; }
#solution,
#team { background: var(--warm); }

.stats-band {
  background: var(--warm);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ---------- 数据带 ---------- */

.stat b {
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums;
}
.stat span { color: var(--muted); }
.stat small { color: #a39e98; }

/* ---------- 概念卡 ---------- */

.mock-card {
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.mock-kicker { color: #a39e98; font-weight: 500; }
.mock-rows li { border-radius: 8px; }
.mock-rows li.done { background: #fff; }
.mock-rows li.pending { background: #fff9f3; border-color: #f0cdb2; }

.tick { background: #e9f9ec; color: #1aae39; font-weight: 700; }
.pending .tick { background: #fdf0e6; color: #dd5b00; }

.row-src { color: #a39e98; }
.mock-foot { color: #a39e98; }
.mock-family em { background: var(--warm); border-color: transparent; color: var(--muted); }
.mock-cap { color: #a39e98; }

/* ---------- 断点流程 ---------- */

.flow-step { border-radius: 12px; }
.flow-step .n { color: #a39e98; font-family: inherit; letter-spacing: .06em; }
.flow-step.broken { border-color: #e6b98f; background: #fffaf5; }
.flow-step.broken .n,
.flow-step.broken::after { color: #dd5b00; }

.note { color: #a39e98; }

/* ---------- 方案 ---------- */

.step { border-radius: 12px; box-shadow: var(--shadow-card); }
.step .n { background: var(--brand); }

.principle {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.principle h3 { color: var(--ink); }
.principle p { color: var(--muted); }

/* ---------- 卡片 ---------- */

.card { border-radius: 12px; box-shadow: var(--shadow-card); }
.card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, .07); }
.card .more { color: var(--brand); }
.card .more:hover { color: var(--brand-deep); }

/* ---------- 团队 ---------- */

.team-name strong { font-size: clamp(28px, 3.4vw, 36px); letter-spacing: -.02em; }
.team-name span { color: #a39e98; }
.members li { border-radius: 8px; font-weight: 500; }
.avatar { background: var(--warm); color: #31302e; }

/* ---------- 时间线 ---------- */

.timeline { border-left-color: var(--line); }
.timeline li::before { background: var(--brand); border-color: #fff; }
.timeline li.future::before { background: #a39e98; }
.timeline .when {
  color: #a39e98;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .04em;
}
.timeline p { color: var(--muted); }

/* ---------- 内页 ---------- */

.meta-box {
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.meta-box dt { color: #a39e98; }

details { border-radius: 12px; }
summary { font-weight: 600; }
summary:hover { background: rgba(0, 0, 0, .03); }
summary::after { color: #a39e98; }

.probe { border-left-color: var(--line); color: var(--muted); }
.opts { color: var(--muted); }
.opts .dot { color: #a39e98; }

.callout {
  background: var(--warm);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
}

.ethics {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--warm);
}
.ethics ul { color: var(--muted); }

.backlink { color: var(--brand); }

/* ---------- 页脚 ---------- */

.site-footer { border-top: 1px solid var(--line); color: #a39e98; }

/* ---------- 杂项 ---------- */

.chip { background: var(--warm); border-color: transparent; color: var(--muted); }
.skip { background: #31302e; }

h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }