/* ═══════════════════════════════════════
   1. 设计 Token
═══════════════════════════════════════ */
:root {
  /* 颜色 */
  --color-bg-base: #ece9e0;
  --color-bg-raised: #f5f3ec;
  --color-bg-overlay: #fdfcf8;
  --color-bg-inverted: #141413;
  --color-text-primary: #141413;
  --color-text-secondary: #6b6860;
  --color-text-muted: #b0aea5;
  --color-text-inverted: #faf9f5;
  --color-text-link: #c96442;
  --color-border-default: #d8d5cc;
  --color-border-subtle: #e8e6dc;
  --color-border-strong: #9b9890;
  --color-accent-orange: #d97757;
  --color-accent-warm: #c96442;
  --color-accent-blue: #6a9bcc;
  --color-accent-green: #788c5d;
  --color-accent-sand: #c4b99a;
  --color-success: #6b8f47;
  --color-warning: #c9943a;
  --color-error: #c0453a;
  --color-info: #5a89b8;

  /* 字体（Latin）
   * 官方品牌字体（来自 brand-guidelines）：Poppins（heading）+ Lora（body）
   * 备选字体（风格相近，可替代）：DM Sans（heading）+ DM Serif（body）
   * 所有字体均已内置在 assets/fonts/ 中
   */
  --font-display: "Lora", "DM Serif Display", "Georgia", serif;
  --font-heading: "Poppins", "DM Sans", "Arial", sans-serif;
  --font-body: "Lora", "DM Serif Text", "Georgia", serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace;

  /* 字重参考（Poppins 可用 300/400/500/600/700）*/
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600; /* 新增：Poppins 有 600，DM Sans 无 */
  --weight-bold: 700;

  /* 字体（简体中文混排）
   * 英文字体在前（已声明 unicode-range，自动跳过 CJK 字符）
   * 中文字体在后，作为 CJK 字符的渲染字体
   */
  --font-display-cn:
    "Lora", "DM Serif Display", "LXGW WenKai", "Songti SC", "STSong", "SimSun",
    serif;
  --font-body-cn:
    "Lora", "DM Serif Text", "LXGW WenKai", "Songti SC", "STSong", "SimSun",
    serif;
  --font-heading-cn:
    "Poppins", "DM Sans", "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
    "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;

  /* 字号 */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --text-4xl: 3.5rem;
  --text-5xl: 4.5rem;

  /* 行高（Latin） */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-loose: 1.75;

  /* 行高（中文：比 Latin 高约 15%）*/
  --leading-cn-tight: 1.4; /* 大标题 */
  --leading-cn-snug: 1.6; /* 小标题 */
  --leading-cn-normal: 1.75; /* 正文 */
  --leading-cn-loose: 1.9; /* 长文阅读 */

  /* 字号（中文：正文下限提升至 15px）*/
  --text-cn-sm: 0.9375rem; /* 15px，替代原 14px */
  --text-cn-base: 1rem; /* 16px */
  --text-cn-md: 1.125rem; /* 18px */

  /* 字重 */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* 间距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* 宽度 */
  --max-width-prose: 680px;
  --max-width-text: 860px;
  --max-width-layout: 1200px;
  --max-width-full: 1440px;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* 动效 */
  --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-base: #1a1916;
    --color-bg-raised: #222119;
    --color-bg-overlay: #2c2b26;
    --color-bg-inverted: #f5f3ec;
    --color-text-primary: #eae7dc;
    --color-text-secondary: #9d9a91;
    --color-text-muted: #5c5a54;
    --color-text-inverted: #141413;
    --color-border-default: #3a3830;
    --color-border-subtle: #2e2d27;
  }
}

/* ═══════════════════════════════════════
   2. 现代 Reset
═══════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  overflow-wrap: break-word;
}
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  appearance: none;
}

/* ═══════════════════════════════════════
   3. 布局工具类
═══════════════════════════════════════ */
.page-container {
  width: 100%;
  max-width: var(--max-width-layout);
  margin: 0 auto;
  padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
}

.section-hero {
  padding-block: clamp(80px, 12vw, 160px);
}
.section-content {
  padding-block: clamp(64px, 8vw, 128px);
}
.section-tight {
  padding-block: clamp(40px, 6vw, 80px);
}

/* ═══════════════════════════════════════
   4. 可访问性
═══════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--color-accent-orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════
   5. 滚动动画工具
═══════════════════════════════════════ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  animation: fadeUp var(--duration-slow) var(--ease-default) forwards;
}
.reveal:nth-child(1) {
  animation-delay: 0ms;
}
.reveal:nth-child(2) {
  animation-delay: 80ms;
}
.reveal:nth-child(3) {
  animation-delay: 160ms;
}
.reveal:nth-child(4) {
  animation-delay: 240ms;
}
.reveal:nth-child(5) {
  animation-delay: 320ms;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s var(--ease-default),
    transform 0.5s var(--ease-default);
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════
   项目自定义 Token（合并保留）
   ═══════════════════════════════════════════════ */
:root {
  /* 阴影（暖色调统一） */
  --shadow-card: 0 2px 12px rgba(20, 20, 19, 0.07);
  --shadow-elevated: 0 8px 32px rgba(20, 20, 19, 0.08);
  --shadow-btn: 0 4px 12px rgba(217, 119, 87, 0.3);

  /* UI 快捷别名 */
  --font-ui: var(--font-heading);

  /* 兼容别名（旧代码引用） */
  --color-bg-surface: var(--color-bg-raised);
  --color-bg-elevated: var(--color-bg-overlay);
  --color-bg-sidebar: #f0ede4;
  --color-bg-input: var(--color-bg-overlay);
  --color-border: var(--color-border-default);
  --color-accent: var(--color-accent-orange);
  --color-accent-dim: rgba(217, 119, 87, 0.12);
  --color-accent-glow: rgba(217, 119, 87, 0.18);
  --color-success-dim: rgba(107, 143, 71, 0.12);
  --color-success-glow: rgba(107, 143, 71, 0.12);
  --color-warning-dim: rgba(201, 148, 58, 0.12);
  --color-error-dim: rgba(192, 69, 58, 0.12);
  --color-text-accent: var(--color-accent-warm);
  --color-text-success: var(--color-success);
  --color-text-error: var(--color-error);
  --color-text-warning: var(--color-warning);
  --color-text-disabled: var(--color-text-muted);
  --color-numeric: var(--color-accent-blue);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-sidebar: #1e1d19;
  }
}