/* ============================================================
   tokens.css — 设计令牌
   所有配色、字体、尺度的唯一来源。改品牌调性只需改此文件。
   ============================================================ */

:root {
  /* ── 配色：水墨青绿 + 赭橙 ─────────────────────────── */
  --c-paper: #f7f5f0;          /* 主底，纸感暖白 */
  --c-paper-2: #efebe3;        /* 次级底、hover 底 */
  --c-paper-3: #e7e2d8;
  --c-ink: #10221e;            /* 近黑绿，深色块底 */
  --c-brand-deep: #0e332c;
  --c-brand: #1f5e52;          /* 品牌主色，松绿 */
  --c-brand-soft: #2f7466;
  --c-aqua: #7fb6a8;           /* 水色浅调，用于 SVG 纹样 */
  --c-accent: #c2703d;         /* 赭橙，序号与数字，取「岸」意象 */
  --c-accent-soft: #d9975f;

  --c-text: #1a1f1d;
  --c-text-mute: #6b726e;
  --c-text-faint: #9aa09c;
  --c-text-inv: rgba(255, 255, 255, 0.88);
  --c-text-inv-mute: rgba(255, 255, 255, 0.56);
  --c-text-inv-faint: rgba(255, 255, 255, 0.32);

  --c-rule: #d8d2c7;           /* 细分隔线 */
  --c-rule-soft: #e4dfd5;
  --c-rule-inv: rgba(255, 255, 255, 0.18);
  --c-rule-inv-soft: rgba(255, 255, 255, 0.1);

  /* ── 字体栈 ─────────────────────────────────────── */
  --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong",
    Georgia, "Times New Roman", "SimSun", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Courier New",
    monospace;
  --font-num: "DIN Alternate", "Oswald", "Haettenschweiler", Impact,
    var(--font-mono);

  /* ── 字号阶梯 ───────────────────────────────────── */
  --fs-3xs: 11px;
  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-base: 17px;             /* 中文正文，不用 16 */
  --fs-md: 20px;
  --fs-lg: 26px;
  --fs-xl: 34px;
  --fs-2xl: 46px;

  --fs-h2: clamp(32px, 5.6vw, 72px);        /* section 中文标题 */
  --fs-h3: clamp(24px, 3.2vw, 38px);
  --fs-hero: clamp(44px, 10.5vw, 140px);    /* 西文/数字 hero */
  --fs-hero-cn: clamp(36px, 7vw, 96px);     /* 中文 hero，低一档 */
  --fs-watermark: clamp(64px, 12vw, 190px); /* 背景水印数字 */

  /* ── 行高：中文关键 ─────────────────────────────── */
  --lh-none: 0.86;
  --lh-tight: 1.12;
  --lh-title: 1.24;
  --lh-lead: 1.85;
  --lh-body: 1.9;

  /* ── 字距：中文关键 ─────────────────────────────── */
  --ls-body: 0.02em;
  --ls-title: 0.06em;
  --ls-cn-wide: 0.3em;
  --ls-cn-mid: 0.16em;
  --ls-en-caps: 0.22em;
  --ls-num: -0.02em;

  /* ── 间距：8pt 制 + 杂志级留白 ──────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 180px;
  --sp-12: 240px;

  --sp-section: clamp(80px, 12vw, 190px);
  --maxw: 1360px;
  --measure: 32em;             /* 中文栏宽约 32 字 */
  --gutter: clamp(16px, 2.2vw, 32px);
  --pad-x: clamp(20px, 5vw, 72px);
  --header-h: 72px;

  /* ── 圆角：直角为主，直角即印刷感 ───────────────── */
  --r-0: 0;
  --r-sm: 2px;
  --r-pill: 999px;

  /* ── 分隔：靠线不靠影 ───────────────────────────── */
  --rule: 1px solid var(--c-rule);
  --rule-soft: 1px solid var(--c-rule-soft);
  --rule-strong: 2px solid var(--c-ink);
  --rule-inv: 1px solid var(--c-rule-inv);
  --shadow-lift: 0 18px 48px -24px rgba(16, 34, 30, 0.35);
  --shadow-card: 0 24px 64px -32px rgba(16, 34, 30, 0.45);

  /* ── 动效 ───────────────────────────────────────── */
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 720ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── 视觉块调色板 ───────────────────────────────── */
  --pal-aqua-1: #1f5e52;
  --pal-aqua-2: #7fb6a8;
  --pal-moss-1: #2c4a32;
  --pal-moss-2: #8fa97c;
  --pal-clay-1: #8a4a2a;
  --pal-clay-2: #c2703d;
  --pal-ink-1: #10221e;
  --pal-ink-2: #33504a;
}

/* 移动端字距与留白调整：小字号下大字距会散架 */
@media (max-width: 767px) {
  :root {
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 22px;
    --fs-xl: 28px;
    --fs-2xl: 36px;
    --ls-title: 0.02em;
    --ls-cn-wide: 0.2em;
    --ls-en-caps: 0.16em;
    --sp-section: clamp(64px, 16vw, 96px);
    --header-h: 60px;
  }
}