/* ============================================================
   tokens.css — 设计令牌
   方向：工业实用（Industrial）
   底色取纸品暖白，文字取油墨近黑，唯一强调色为油墨朱红。
   所有组件只能引用变量，不得硬编码色值。
   ============================================================ */
:root {
  /* --- 表面与文字 --- */
  --paper: #f4f1ea;          /* 页面底色：未涂布纸 */
  --paper-deep: #eae5da;     /* 次级底色：纸板 */
  --surface: #fbfaf6;        /* 卡片/表格底 */
  --ink: #14140f;            /* 主文字：油墨近黑（非纯黑） */
  --ink-soft: #3b3a33;       /* 次级文字 */
  --muted: #6f6c61;          /* 辅助文字，对 paper 4.66:1 */
  --muted-deep: #5b584d;     /* 纸板底（footer）上的辅助文字，5.67:1 */
  --hair: rgba(20, 20, 15, 0.14);   /* 发丝线 */
  --hair-strong: rgba(20, 20, 15, 0.32);
  --accent: #d2401e;         /* 强调色：油墨朱红，用于填充、描边与大字号 */
  --accent-text: #a8320f;    /* 小字号强调文字专用：对 paper 5.95:1，满足 AA */
  --accent-ink: #a52f12;     /* 强调色深一档，用于 hover 与文字 */
  --accent-wash: rgba(210, 64, 30, 0.08);

  /* --- 材料色（样本条用，取自材料本色，不作装饰） --- */
  --mat-fragile: #d9cbb4;
  --mat-void: #2f3a4a;
  --mat-tire: #1d1d1b;
  --mat-removable: #c8b9a4;
  --mat-pi: #b8873f;
  --mat-wire: #9aa3a8;
  --mat-synthetic: #e6e2d8;
  --mat-film: #cfd6d2;
  --mat-pet: #b9c4c9;
  --mat-static: #dfe6e4;

  /* --- 字体 --- */
  --font-display: "Archivo Black", "Noto Sans SC", "Source Han Sans SC",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "IBM Plex Sans", "Noto Sans SC", "Source Han Sans SC",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  /* --- 字阶（1.25 模块化比例，含流体缩放） --- */
  --fs-hero: clamp(3.1rem, 8.6vw, 7.4rem);
  --fs-h2: clamp(1.9rem, 4.4vw, 3.2rem);
  --fs-h3: clamp(1.15rem, 1.8vw, 1.45rem);
  --fs-lead: clamp(1.02rem, 1.5vw, 1.22rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* --- 间距梯度 --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 132px;
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 68rem;

  /* --- 形状 --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* --- 高度层级（阴影带环境色，非纯黑） --- */
  --shadow-1: 0 1px 2px rgba(30, 26, 16, 0.06);
  --shadow-2: 0 8px 24px rgba(30, 26, 16, 0.1);
  --shadow-3: 0 24px 64px rgba(30, 26, 16, 0.16);

  /* --- 动效 --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
}