/* ============================================================
   《美的源代码》设计系统  v1.0
   这本书的全部 UI/UX 由本文件约束。
   第〇章（pages/design-system.html）是它的人类可读文档。
   ------------------------------------------------------------
   设计立场：
   1. 像一本精装印刷书，而不是一个网页。
   2. 一切尺寸落在 8px 网格上；一切字号来自模数化字阶。
   3. 颜色只有五种语义角色：纸、墨、朱砂、黛青、金。
   4. 装饰永远服务于内容层级，否则删除。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700;900&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:ital,wght@0,400;0,600;1,400&display=swap');

/* ---------- 1. Design Tokens ---------- */
:root {
  /* 色彩 · 五个语义角色 */
  --paper:       #FAF7F0;  /* 纸：全书底色，暖白 */
  --paper-deep:  #F1EBDE;  /* 纸·深：图版衬底、代码底 */
  --ink:         #211D19;  /* 墨：正文 */
  --ink-soft:    #5A524A;  /* 墨·淡：次要文字 */
  --ink-faint:   #978D81;  /* 墨·微：标注、页码 */
  --vermilion:   #C2452D;  /* 朱砂：强调、章号、关键动作 */
  --vermilion-soft: #C2452D22;
  --indigo:      #2D5A6B;  /* 黛青：链接、代码关键字 */
  --indigo-soft: #2D5A6B14;
  --gold:        #B98A2F;  /* 金：高亮批注、星标 */
  --line:        #E3DBCA;  /* 分隔线 */

  /* 字体 · 三个声部 */
  --serif: "Noto Serif SC", "Songti SC", serif;          /* 正文：庄重 */
  --sans:  "Noto Sans SC", "PingFang SC", sans-serif;    /* 标签：克制 */
  --mono:  "JetBrains Mono", "SF Mono", monospace;       /* 代码：精确 */

  /* 字阶 · 1.25 模数 */
  --fs-xs:   13px;
  --fs-sm:   15px;
  --fs-base: 18px;
  --fs-md:   22px;
  --fs-lg:   28px;
  --fs-xl:   36px;
  --fs-xxl:  46px;
  --fs-hero: 58px;

  /* 间距 · 8px 网格 */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 48px; --s8: 64px; --s12: 96px;

  /* 版心 */
  --measure: 720px;   /* 正文栏宽 ≈ 中文 36 字 */
  --measure-wide: 960px; /* 图版破栏宽 */

  --radius: 6px;
  --shadow-art: 0 2px 6px rgba(33,29,25,.10), 0 16px 40px rgba(33,29,25,.12);
}

/* ---------- 2. 基底 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-base);
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  /* 纸的肌理：极淡的噪点渐变 */
  background-image:
    radial-gradient(circle at 15% 10%, #fff8 0, transparent 45%),
    radial-gradient(circle at 85% 90%, #efe7d655 0, transparent 50%);
  background-attachment: fixed;
}

::selection { background: var(--vermilion-soft); color: var(--ink); }

/* ---------- 3. 版面 ---------- */
.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s8) var(--s3) var(--s12);
}

/* ---------- 4. 文字 ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 900; line-height: 1.4; }

h2 {
  font-size: var(--fs-lg);
  margin: var(--s8) 0 var(--s3);
  display: flex; align-items: baseline; gap: var(--s2);
}
h2 .sec-no {
  font-family: var(--mono); font-weight: 600;
  font-size: var(--fs-sm); color: var(--vermilion);
}

h3 { font-size: var(--fs-md); margin: var(--s6) 0 var(--s2); }

p { margin: 0 0 var(--s3); text-align: justify; }
p + p { text-indent: 0; }

a { color: var(--indigo); text-decoration: none; border-bottom: 1px solid #2d5a6b55; transition: .15s; }
a:hover { color: var(--vermilion); border-bottom-color: var(--vermilion); }

strong { font-weight: 700; }
em { font-style: normal; background: linear-gradient(transparent 65%, #b98a2f3d 65%); padding: 0 1px; }

ul, ol { margin: 0 0 var(--s3) 1.5em; }
li { margin-bottom: var(--s1); }

hr {
  border: none; height: 1px; background: var(--line);
  margin: var(--s8) auto; width: 50%;
  position: relative;
}
hr::after {
  content: "❖"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper); padding: 0 var(--s2);
  color: var(--ink-faint); font-size: var(--fs-xs);
}

/* 术语：首次出现的关键概念 */
.term {
  font-weight: 700;
  border-bottom: 2px solid var(--gold);
}

/* ---------- 5. 章头 ---------- */
.chapter-head { margin: var(--s8) 0 var(--s8); }

.kicker {
  font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--vermilion); letter-spacing: .08em;
  margin-bottom: var(--s2);
}
.kicker::before { content: "// "; color: var(--ink-faint); }

.chapter-head h1 {
  font-size: var(--fs-xxl);
  letter-spacing: .02em;
  margin-bottom: var(--s3);
}

.epigraph {
  border-left: 3px solid var(--line);
  padding-left: var(--s3);
  color: var(--ink-soft);
  font-size: var(--fs-base);
}
.epigraph cite {
  display: block; font-style: normal; font-family: var(--sans);
  font-size: var(--fs-xs); color: var(--ink-faint); margin-top: var(--s1);
}
.epigraph cite::before { content: "—— "; }

/* ---------- 6. 图版（本书最重要的组件） ---------- */
figure.art {
  margin: var(--s6) calc((var(--measure-wide) - var(--measure)) / -2) var(--s6);
  text-align: center;
}
@media (max-width: 1040px) { figure.art { margin-left: 0; margin-right: 0; } }

figure.art img, figure.art svg.plate {
  max-width: 100%;
  border-radius: 2px;
  box-shadow: var(--shadow-art);
  background: var(--paper-deep);
}

figure.art figcaption {
  max-width: var(--measure);
  margin: var(--s3) auto 0;
  text-align: left;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--ink-soft);
}
figcaption .art-title { font-weight: 700; color: var(--ink); }
figcaption .art-meta {
  font-size: var(--fs-xs); color: var(--ink-faint);
  display: block; margin-bottom: 4px;
  font-family: var(--mono);
}
/* 鉴赏点：figcaption 里的"怎么看" */
figcaption .how-to-look { display: block; margin-top: var(--s1); }
figcaption .how-to-look::before {
  content: "怎么看"; font-weight: 700; color: var(--vermilion);
  margin-right: var(--s1);
}

/* ---------- 7. 标注框 ---------- */
.callout {
  margin: var(--s4) 0;
  padding: var(--s3) var(--s3) var(--s2);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  line-height: 1.9;
}
.callout .callout-label {
  display: block;
  font-family: var(--sans); font-weight: 700;
  font-size: var(--fs-xs); letter-spacing: .12em;
  margin-bottom: var(--s1);
}
.callout p { margin-bottom: var(--s2); }

/* 程序员视角：把美学概念翻译成工程语言 */
.callout.dev { background: var(--indigo-soft); border-left: 3px solid var(--indigo); }
.callout.dev .callout-label { color: var(--indigo); }
.callout.dev .callout-label::before { content: "{ } "; font-family: var(--mono); }

/* 鉴赏练习：动手训练 */
.callout.practice { background: #b98a2f14; border-left: 3px solid var(--gold); }
.callout.practice .callout-label { color: var(--gold); }
.callout.practice .callout-label::before { content: "✎ "; }

/* 核心概念 */
.callout.key { background: var(--vermilion-soft); border-left: 3px solid var(--vermilion); }
.callout.key .callout-label { color: var(--vermilion); }
.callout.key .callout-label::before { content: "★ "; }

/* ---------- 8. 对比并置 ---------- */
.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
  margin: var(--s4) 0;
}
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }
.compare > div {
  background: var(--paper-deep);
  border-radius: var(--radius);
  padding: var(--s2);
  text-align: center;
}
.compare .tag {
  display: inline-block;
  font-family: var(--sans); font-size: var(--fs-xs); font-weight: 700;
  padding: 2px 10px; border-radius: 99px; margin-bottom: var(--s2);
}
.compare .bad .tag  { background: #00000010; color: var(--ink-soft); }
.compare .good .tag { background: var(--vermilion); color: var(--paper); }
.compare .note {
  font-family: var(--sans); font-size: var(--fs-xs);
  color: var(--ink-soft); line-height: 1.7; text-align: left;
  margin-top: var(--s2);
}

/* ---------- 9. 原则块 ---------- */
.principle {
  display: flex; gap: var(--s3); align-items: baseline;
  margin: var(--s4) 0;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.principle .no {
  font-family: var(--mono); font-size: var(--fs-lg); font-weight: 600;
  color: var(--vermilion); min-width: 56px;
}
.principle h4 { font-size: var(--fs-md); margin-bottom: var(--s1); }
.principle p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }

/* ---------- 10. 代码 ---------- */
code {
  font-family: var(--mono); font-size: .85em;
  background: var(--paper-deep);
  padding: 2px 6px; border-radius: 4px;
}
pre {
  background: #26221D; color: #EDE6D8;
  border-radius: var(--radius);
  padding: var(--s3);
  overflow-x: auto;
  margin: var(--s4) 0;
  font-size: var(--fs-sm); line-height: 1.7;
}
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
pre .c  { color: #8a8178; }            /* comment */
pre .k  { color: #d98e73; }            /* keyword */
pre .s  { color: #a8c8a0; }            /* string  */

/* ---------- 11. 表格 ---------- */
table {
  width: 100%; border-collapse: collapse;
  margin: var(--s4) 0;
  font-size: var(--fs-sm); font-family: var(--sans);
}
th {
  text-align: left; font-weight: 700;
  border-bottom: 2px solid var(--ink);
  padding: var(--s1) var(--s2);
}
td { border-bottom: 1px solid var(--line); padding: var(--s1) var(--s2); vertical-align: top; }

/* ---------- 12. 章导航 ---------- */
.book-nav {
  font-family: var(--sans); font-size: var(--fs-sm);
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s4);
}
.book-nav a { border: none; color: var(--ink-soft); }
.book-nav a:hover { color: var(--vermilion); }
.book-nav .book-title { font-weight: 700; color: var(--ink); letter-spacing: .05em; }

.chapter-nav {
  display: flex; justify-content: space-between; gap: var(--s2);
  margin-top: var(--s12);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: var(--fs-sm);
}
.chapter-nav a {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  max-width: 46%;
  transition: .15s;
}
.chapter-nav a:hover { border-color: var(--vermilion); background: var(--vermilion-soft); }
.chapter-nav .dir { display: block; font-size: var(--fs-xs); color: var(--ink-faint); }
.chapter-nav .next { margin-left: auto; text-align: right; }

/* ---------- 13. 封面 / 目录（index.html 专用） ---------- */
.cover {
  min-height: 88vh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.cover .kicker { font-size: var(--fs-base); }
.cover h1.book-title-hero {
  font-size: clamp(44px, 8vw, var(--fs-hero));
  font-weight: 900; letter-spacing: .04em;
  line-height: 1.25;
  margin: var(--s3) 0;
}
.cover h1 .accent { color: var(--vermilion); }
.cover .subtitle {
  font-family: var(--sans); font-size: var(--fs-md);
  color: var(--ink-soft); margin-bottom: var(--s5);
}
.cover .colophon {
  font-family: var(--mono); font-size: var(--fs-xs);
  color: var(--ink-faint); line-height: 2.2;
}
.cover-rule {
  width: 96px; height: 4px; background: var(--vermilion);
  margin: var(--s4) 0;
}
.cover .down-hint {
  position: absolute; bottom: var(--s4); left: 0;
  font-family: var(--sans); font-size: var(--fs-xs); color: var(--ink-faint);
}

.toc-part {
  font-family: var(--sans);
  margin: var(--s8) 0 var(--s3);
  display: flex; align-items: baseline; gap: var(--s2);
}
.toc-part .part-no {
  font-family: var(--mono); color: var(--vermilion);
  font-size: var(--fs-sm); font-weight: 600;
}
.toc-part h2 { margin: 0; font-size: var(--fs-md); }
.toc-part .part-desc { font-size: var(--fs-xs); color: var(--ink-faint); }

ol.toc { list-style: none; margin: 0; }
ol.toc li { margin: 0; }
ol.toc a, ol.toc .toc-row {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: var(--s2) var(--s1);
  border: none; border-bottom: 1px dashed var(--line);
  color: var(--ink);
  font-size: var(--fs-base);
  transition: .15s;
}
ol.toc a:hover { background: var(--vermilion-soft); padding-left: var(--s2); }
ol.toc .ch-no {
  font-family: var(--mono); font-size: var(--fs-sm);
  color: var(--ink-faint); min-width: 80px;
}
ol.toc a:hover .ch-no { color: var(--vermilion); }
ol.toc .ch-sub {
  font-family: var(--sans); font-size: var(--fs-xs);
  color: var(--ink-faint); margin-left: auto; text-align: right;
}
ol.toc .toc-row.disabled { color: var(--ink-faint); }
ol.toc .toc-row.disabled .badge {
  font-family: var(--mono); font-size: 11px;
  border: 1px solid var(--line); border-radius: 99px;
  padding: 0 8px; margin-left: auto;
}

/* ---------- 14. 设计系统文档页专用 ---------- */
.swatch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s2); margin: var(--s4) 0; }
.swatch {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--fs-xs);
}
.swatch .chip { height: 72px; }
.swatch .meta { padding: var(--s1) var(--s2); background: #fff6; line-height: 1.6; }
.swatch .meta b { display: block; font-family: var(--sans); font-size: var(--fs-xs); }

.type-specimen { border-bottom: 1px solid var(--line); padding: var(--s2) 0; display: flex; align-items: baseline; gap: var(--s3); }
.type-specimen .label { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-faint); min-width: 120px; }

/* ---------- 15. 响应式 ---------- */
@media (max-width: 640px) {
  :root { --fs-base: 17px; --fs-xxl: 34px; --fs-lg: 24px; }
  .page { padding: var(--s4) var(--s2) var(--s8); }
  .principle { flex-direction: column; gap: var(--s1); }
}