:root {
  --bg-paper: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-soft: #F5F5F4;
  --bg-dark: #0F0F0E;
  --bg-dark-soft: #1C1C1A;

  --line: #E6E6E3;
  --line-strong: #D4D4D1;

  --ink: #111110;
  --ink-2: #5A5A57;
  --ink-3: #90908C;
  --ink-invert: #FFFFFF;
  --ink-invert-2: #B4B4AF;

  --brand: #111110;
  --brand-500: #3D3D39;
  --brand-900: #000000;
  --brand-100: #ECECEA;

  --accent: #8A8A85;
  --accent-soft: #E6E6E3;

  --ok: #3D3D39;
  --warn: #6E6E68;
  --err: #A03B2C;
  --info: #4A4A46;

  /* 五行本色（克制、可印） */
  --w-wood: #4A7C59;
  --w-fire: #B85C38;
  --w-earth: #C4A35A;
  --w-metal: #8A9096;
  --w-water: #3D6B8A;

  /* 正文：系统无衬线；标题：衬线提质感 */
  --font-sans: "PingFang SC", "Microsoft YaHei", "Microsoft YaHei UI", SimSun, SimHei, Arial, sans-serif;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "PingFang SC", "Microsoft YaHei", serif;
  --font-en: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-en-sans: "PingFang SC", Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
  --fs-h1: clamp(2rem, 1.45rem + 2vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --fs-h3: clamp(1.1875rem, 1.08rem + 0.5vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-lead: 1.1875rem;
  --fs-caption: 0.8125rem;
  --fs-overline: 0.75rem;

  --lh-tight: 1.15;
  --lh-heading: 1.35;
  --lh-body: 1.8;
  --lh-body-en: 1.65;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;
  --sp-10: 64px;
  --sp-12: 96px;

  --section-y: var(--sp-12);
  --container: 1200px;
  --gutter: var(--sp-5);
  --nav-h: 72px;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  --shadow-hover: 0 2px 12px rgba(17, 17, 16, 0.06);
  --shadow-pop: 0 8px 28px rgba(17, 17, 16, 0.12);
  --focus-ring: 0 0 0 2px var(--bg-paper), 0 0 0 4px var(--brand);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --motion-enter: 900ms;
  --motion-stagger: 140ms;

  --z-nav: 100;
  --z-drawer: 200;
  --z-toast: 300;
}

:root[data-lang="en"] {
  --lh-body: var(--lh-body-en);
  --font-serif: var(--font-en);
  --font-sans: var(--font-en-sans);
}

@media (max-width: 1023px) {
  :root {
    --section-y: var(--sp-10);
  }
}

@media (max-width: 767px) {
  :root {
    --section-y: var(--sp-8);
    --gutter: var(--sp-4);
    --nav-h: 60px;
  }
}