/* ==========================================================================
   tokens.css — 设计变量、reset、基础排版
   深色工程档案风：近黑底 + 低饱和面板 + 三个语义色（品牌蓝 / 效率青 / 成本琥珀）
   配色只有 3 个主色 + 灰阶，状态色仅用于明确语义
   ========================================================================== */

:root {
  /* --- 底色与面板 --- */
  --bg:          #0A0C11;
  --bg-elev:     #0E1118;
  --surface:     #14171F;
  --surface-2:   #1A1E28;
  --surface-3:   #222734;

  /* --- 分隔线（整圈细边框，不做局部彩条） --- */
  --line:        rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .15);

  /* --- 文字 --- */
  --ink:    #E9ECF4;
  --ink-2:  #A6ADC0;
  --ink-3:  #7E8699;

  /* --- 主色：DeepSeek 品牌蓝（点缀，不铺满） --- */
  --brand:       #4D6BFE;
  --brand-ink:   #96A9FF;
  --brand-tint:  rgba(77, 107, 254, .13);
  --brand-line:  rgba(77, 107, 254, .35);

  /* --- 辅色：效率青（压缩、复用、节省） --- */
  --teal:        #35D6B0;
  --teal-ink:    #6FE6C9;
  --teal-tint:   rgba(53, 214, 176, .12);
  --teal-line:   rgba(53, 214, 176, .32);

  /* --- 第三色：成本琥珀（价格、注意） --- */
  --amber:       #F0B450;
  --amber-ink:   #F5C87C;
  --amber-tint:  rgba(240, 180, 80, .12);
  --amber-line:  rgba(240, 180, 80, .32);

  /* --- 状态：仅在「诚实边界」使用 --- */
  --danger:      #FF8080;
  --danger-tint: rgba(255, 128, 128, .12);
  --danger-line: rgba(255, 128, 128, .3);

  /* --- 字体 --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
               "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* --- 间距（8px 基准） --- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px;

  /* --- 圆角 --- */
  --r-sm: 8px;  --r: 12px;  --r-lg: 18px;  --r-xl: 26px;  --r-full: 999px;

  /* --- 阴影（克制的多层柔和阴影） --- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .3), 0 14px 36px rgba(0, 0, 0, .34);

  /* --- 布局 --- */
  --page:  1200px;
  --prose: 720px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 60px;

  /* --- 动效 --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .5s;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
a  { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(77, 107, 254, .35); color: #fff; }

/* 尊重系统的减弱动效偏好：全局关闭过渡与动画 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   排版原子
   ========================================================================== */

.h1 {
  font-size: clamp(2.05rem, 5.2vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.14;
}
.h2 {
  font-size: clamp(1.5rem, 3.1vw, 2.15rem);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.28;
}
.h3 { font-size: 1.15rem; font-weight: 620; }
.h4 { font-size: 1rem; font-weight: 620; }

.lede {
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: var(--ink-2);
  line-height: 1.8;
}
.body  { color: var(--ink-2); }
.small { font-size: .875rem; line-height: 1.7; color: var(--ink-3); }
.tiny  { font-size: .78rem;  line-height: 1.65; color: var(--ink-3); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}

.ink-brand { color: var(--brand-ink); }
.ink-teal  { color: var(--teal-ink); }
.ink-amber { color: var(--amber-ink); }
.ink-danger{ color: var(--danger); }
.ink-2     { color: var(--ink-2); }

.prose { max-width: var(--prose); }
.prose p + p { margin-top: var(--s4); }

/* 屏幕阅读器专用 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}