/* ============================================================
   base.css —— 设计 token、CSS 重置、字体栈、基础排版
   ============================================================ */

:root {
  /* 配色 */
  --bg:           #FAF8F4;
  --surface:      #FFFFFF;
  --surface-2:    #F4F1EA;
  --ink:          #1F2230;
  --ink-soft:     #4A4E5C;
  --ink-muted:    #8B8F9C;
  --primary:      #3E4ECC;
  --primary-soft: #ECEEFB;
  --primary-deep: #2A37A0;
  --accent:       #E8704A;
  --accent-soft:  #FBEDE5;
  --success:      #2F9E6E;
  --success-soft: #E6F4ED;
  --warning:      #C97A1F;
  --warning-soft: #FCEFD9;
  --danger:       #C24A4A;
  --danger-soft:  #FBE6E6;
  --border:       #E8E4DC;
  --border-soft:  #F1EEE7;
  --code-bg:      #1C1F2B;
  --code-ink:     #E7E9F1;
  --code-muted:   #8089A0;
  --code-accent:  #FFB37B;
  --code-string:  #9BD68F;
  --code-key:     #8FB6FF;
  --code-comment: #6A7080;

  /* 字体 */
  --font-sans:
    -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;

  --font-mono:
    ui-monospace, "JetBrains Mono",
    "SF Mono", "Cascadia Code",
    Menlo, Consolas, monospace;

  /* 尺寸 */
  --header-h:     56px;
  --sidebar-w:    280px;
  --toc-w:        220px;
  --content-max:  720px;
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    16px;

  /* 阴影 */
  --shadow-1: 0 1px 2px rgba(31, 34, 48, 0.04), 0 1px 1px rgba(31, 34, 48, 0.03);
  --shadow-2: 0 4px 16px rgba(31, 34, 48, 0.06), 0 2px 4px rgba(31, 34, 48, 0.04);
  --shadow-3: 0 16px 48px rgba(31, 34, 48, 0.12);

  /* 动画 */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-deep); }
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(62, 78, 204, 0.28);
  outline-offset: 3px;
}
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.35; color: var(--ink); }
h1 { font-size: 2.1rem; letter-spacing: 0; margin: 0 0 1.2rem; }
h2 { font-size: 1.5rem; margin: 3rem 0 1rem; letter-spacing: 0; }
h3 { font-size: 1.2rem; margin: 2rem 0 .8rem; letter-spacing: 0; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.4em; margin: 0 0 1.1em; }
li { margin: 0.3em 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 3rem 0; }
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: var(--primary-deep);
}
strong { color: var(--ink); font-weight: 700; }
em { font-style: normal; background: linear-gradient(transparent 60%, var(--accent-soft) 60%); padding: 0 2px; }

/* 选中色 */
::selection { background: var(--primary-soft); color: var(--primary-deep); }

/* 滚动条(更含蓄) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(31, 34, 48, 0.15); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(31, 34, 48, 0.25); }

/* 文本工具 */
.muted { color: var(--ink-muted); }
.soft { color: var(--ink-soft); }
.small { font-size: 0.92rem; }
.tiny { font-size: 0.82rem; }
.center { text-align: center; }