/* =====================================================
   爬宠志 · 博物学风 / 基础层
   ===================================================== */

/* ---- 设计变量 ---- */
:root {
  /* 主色：牛皮纸 + 深森林绿 + 赭石橙 */
  --bg:           #f4ede1;  /* 牛皮纸米 */
  --bg-deep:      #ebe1cd;  /* 稍深的底（章节交替）*/
  --card:         #faf6ed;  /* 米白卡片 */
  --card-warm:    #f7efd9;  /* 暖卡（标签）*/
  --paper:        #f9f3e3;  /* 标本纸 */

  /* 文字 */
  --ink:          #2a3b2a;  /* 深森林绿主文 */
  --ink-2:        #4a5a4a;  /* 二级 */
  --ink-3:        #8a7e6a;  /* 注释灰褐 */
  --ink-mute:     #b3a78d;  /* 弱化 */

  /* 强调色 */
  --brand:        #b8541f;  /* 赭石橙（主强调）*/
  --brand-deep:   #8a3a14;  /* 深赭石 */
  --brand-soft:   #f1dfc8;  /* 浅赭石底 */

  --accent:       #5e6b3b;  /* 橄榄绿 */
  --accent-soft:  #dde0c7;  /* 浅橄榄底 */

  /* 状态色 */
  --safe:         #6b7a3a;  /* LC / 可饲养 */
  --warn:         #c98a2a;  /* VU / 需许可 */
  --danger:       #a8451f;  /* EN-CR / 禁止 */

  --line:         #d4c4a8;  /* 沙色分隔线 */
  --line-soft:    #e6dcc4;  /* 浅分隔线 */
  --shadow:       rgba(42, 59, 42, 0.08);
  --shadow-deep:  rgba(42, 59, 42, 0.14);

  /* 字体 */
  --font-serif:   Georgia, "Times New Roman", "Source Serif Pro",
                  "Songti SC", "STSong", "SimSun", serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
                  sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;

  /* 节奏 */
  --radius-sm:    3px;
  --radius:       6px;
  --radius-lg:    10px;
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      24px;
  --space-6:      32px;
  --space-7:      48px;
  --space-8:      64px;

  --max-width:    1180px;
  --content-width: 880px;
}

/* ---- Reset & 基础 ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bg);
  /* 牛皮纸纹理 - 用多层渐变模拟 */
  background-image:
    radial-gradient(at 10% 10%, rgba(184, 84, 31, 0.025) 0%, transparent 50%),
    radial-gradient(at 90% 80%, rgba(94, 107, 59, 0.02) 0%, transparent 50%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg { max-width: 100%; height: auto; display: block; }
em { font-style: italic; }
a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}
a:hover { border-bottom-color: var(--brand); color: var(--brand-deep); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}

/* ---- 排版 ---- */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4) 0;
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-4) 0; }

/* Markdown 渲染 */
.markdown { font-size: 16px; line-height: 1.8; }
.markdown h1, .markdown h2, .markdown h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line-soft);
}
.markdown h1 { font-size: 1.6rem; }
.markdown h2 { font-size: 1.35rem; }
.markdown h3 { font-size: 1.15rem; }
.markdown ul, .markdown ol { padding-left: var(--space-5); margin-bottom: var(--space-4); }
.markdown li { margin-bottom: var(--space-2); }
.markdown blockquote {
  border-left: 3px solid var(--brand);
  background: var(--brand-soft);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  font-style: italic;
  color: var(--ink-2);
}
.markdown code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-deep);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.markdown pre {
  font-family: var(--font-mono);
  background: var(--bg-deep);
  padding: var(--space-4);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
}
.markdown pre code { background: transparent; padding: 0; }
.markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: 14px;
}
.markdown th, .markdown td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}
.markdown th {
  background: var(--bg-deep);
  font-weight: 600;
  color: var(--ink-2);
}
.markdown em { color: var(--ink-2); font-style: italic; }

/* ---- 容器 ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.site-main {
  flex: 1 0 auto;
}

/* ---- 工具 ---- */
.muted { color: var(--ink-3); }
.empty-state {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--ink-3);
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.empty-state.large h3 {
  font-size: 1.3rem;
  color: var(--ink-2);
  margin-bottom: var(--space-3);
}
.empty-state.large p { color: var(--ink-3); }