/* ==========================================================================
   WFF Design Tokens
   --------------------------------------------------------------------------
   来源：wefulfil.com/china-3pl 的 div.p004 作用域样式（7,104 字符）实测提取。
   规则：所有颜色 / 字阶 / 间距 / 圆角 / 阴影只在此文件定义一次。
        页面层禁止重复定义。

   ⚠️ 重要：原站 h1 声明 clamp(44px,6vw,76px)，但被上游规则覆盖，
      实际渲染为固定 52px（移动 40px）。此处以「渲染值」为准。
   ========================================================================== */

:root {
  /* ---------- 色板 ---------- */
  --wff-navy: #071a2d;        /* hero / 深色区 / 标题 */
  --wff-navy-2: #0d2841;      /* 深色区内层卡 */
  --wff-navy-3: #123b59;      /* .final 渐变终点 */
  --wff-teal: #25d9c7;        /* 主色：按钮 / 眉标 / 编号章 / 卡顶描边 */
  --wff-teal-ink: #087d73;    /* 浅底链接盒内链接 */
  --wff-teal-check: #0d9f91;  /* 勾选标记 */
  --wff-coral: #ff766c;       /* 「不适合」描边 */
  --wff-ink: #10283c;         /* 浅底正文 */
  --wff-muted: #607385;       /* 次级说明文字 */
  --wff-paper: #ffffff;
  --wff-wash: #f3f8f8;        /* .alt 区块背景（目标页） */
  --wff-wash-2: #f2f7f6;      /* 首页 .section-soft 近值 */
  --wff-line: #dce9e9;        /* 边框 / 分隔线 */
  --wff-note-bg: #e9fbf8;
  --wff-note-line: #bcefe8;

  /* 深色区文字层级 */
  --wff-on-dark: #dce9f0;
  --wff-on-dark-2: #cfdee8;
  --wff-on-dark-chip: #e8f4f5;

  /* 深色区装饰 */
  --wff-ring: rgba(37, 217, 199, 0.18);
  --wff-chip-bg: rgba(255, 255, 255, 0.07);
  --wff-chip-line: rgba(255, 255, 255, 0.18);
  --wff-btn-ghost-line: rgba(255, 255, 255, 0.5);

  /* ---------- 阴影 ---------- */
  --wff-shadow: 0 18px 50px rgba(8, 35, 52, 0.1);
  --wff-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.25);

  /* ---------- 字体 ---------- */
  --wff-font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --wff-font-num: "Inter", Arial, sans-serif;

  /* ---------- 字阶（渲染值） ---------- */
  --wff-fs-h1: 52px;
  --wff-fs-h1-m: 40px;
  --wff-fs-h2: clamp(32px, 4vw, 50px);
  --wff-fs-h3: 22px;
  --wff-fs-hero-p: 20px;
  --wff-fs-hero-p-m: 18px;
  --wff-fs-lead: 19px;
  --wff-fs-body: 16px;
  --wff-fs-eyebrow: 14px;
  --wff-fs-small: 14px;

  --wff-lh-h1: 1.02;
  --wff-lh-h2: 1.12;
  --wff-lh-h3: 1.25;
  --wff-lh-body: 1.65;

  --wff-ls-h1: -0.045em;
  --wff-ls-h2: -0.035em;
  --wff-ls-eyebrow: 0.14em;

  --wff-fw-eyebrow: 900;
  --wff-fw-h1: 600;
  --wff-fw-h2: 600;
  --wff-fw-h3: 600;
  --wff-fw-btn: 800;
  --wff-fw-bold: 850;
  --wff-fw-black: 900;

  /* ---------- 间距 ---------- */
  --wff-wrap: min(1120px, 100% - 40px);
  --wff-wrap-m: min(100% - 32px, 1120px);
  --wff-section-y: 76px;
  --wff-section-y-m: 58px;
  --wff-hero-y: 86px;
  --wff-hero-y-m: 64px;
  --wff-gap: 20px;
  --wff-gap-split: 34px;
  --wff-card-pad: 28px;

  /* ---------- 圆角 ---------- */
  --wff-r-card: 20px;
  --wff-r-sm: 14px;
  --wff-r-lane: 22px;
  --wff-r-step: 16px;
  --wff-r-note: 18px;
  --wff-r-pill: 999px;

  /* ---------- 尺寸 ---------- */
  --wff-header-h: 103px;
  --wff-header-h-m: 64px;
  --wff-btn-h: 52px;
  --wff-num: 42px;
  --wff-step-num: 54px;
  --wff-lane-img-h: 260px;
  --wff-lane-img-h-m: 220px;
  --wff-z-nav: 999;
  --wff-z-float: 10000;
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --wff-motion: 0ms;
  }
}

/* ==========================================================================
   中文本地化令牌
   --------------------------------------------------------------------------
   为什么要单独一套？中文和英文的排版规则不一样，直接套英文参数会坏：
   1. 字体：Inter / Arial 没有中文字形，中文会掉到系统随机字体，行高字重全乱
   2. 字距：拉丁标题用 -0.045em 收紧很好看，中文收紧会「挤字」
   3. 行高：中文方块字需要更松的行距，1.02 会把两行粘在一起
   4. 字重：中文字体普遍只有 400/500/700，900 会被浏览器合成假粗体
   5. 行长：中文按字算，1120px 里塞 60 个字会非常难读
   ========================================================================== */

:root {
  /* 拉丁字体在前（数字/英文用 Inter），中文兜底用系统黑体 */
  --wff-font-zh: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Source Han Sans SC", "Noto Sans SC", "WenQuanYi Micro Hei", sans-serif;

  /* 中文专用度量 */
  --wff-ls-h1-zh: -0.01em;   /* 不是 -0.045em */
  --wff-ls-h2-zh: -0.005em;
  --wff-ls-eyebrow-zh: 0.08em; /* 不是 0.14em，中文太散 */

  --wff-lh-h1-zh: 1.22;
  --wff-lh-h2-zh: 1.3;
  --wff-lh-h3-zh: 1.5;
  --wff-lh-body-zh: 1.85;

  --wff-fw-eyebrow-zh: 700;  /* 900 会变假粗体 */
  --wff-fw-black-zh: 700;

  /* 行长：中文约 28–34 字一行最舒服 */
  --wff-measure-zh: 30em;
}