/* ============================================================
   VANSHI · 设计令牌  assets/tokens.css
   唯一来源：颜色、字体、容器宽度、字号阶梯。
   ed.css（首页 + 内页）、pages.css（内页）、design-notes.html 都只引用这里的变量，
   谁要改字号，改这一处 —— 全站跟着动。
   ============================================================ */

:root{
  /* 颜色 */
  /* ── 中性色阶（六级纸 + 四级墨）──────────────────────────────
     原来 CSS 里散着 25 个硬编码灰：E9E9E6 / EDEDE9 / E4E4E0 / E6E3DB /
     D8D2C4 / E0DBD0 / CFC9BC / 8C877D … 它们之间的差别只有 1–3%，人眼看不出，
     但一半带黄（D8D2C4、E0DBD0 是米黄），一半不带 —— 同屏并排就"脏"，
     这正是"用了大量米黄，显得不高级"的来源。
     现在收成一条中性灰阶：纸 4 级、墨 5 级、线 3 级，全部同一个色相（R=G≈B，误差≤2）。 */
  --paper:#FAFAF9;   /* 主底 */
  --paper2:#F2F2F0;  /* 一带一底色：首屏右栏、估算带、同区域 */
  --paper3:#EDEDEA;  /* 图片占位、静默块 */
  --paper4:#E2E2DE;  /* 示意图底纹、网格线 */
  --white:#FFFFFF;
  --on-dark:#EDEDEA; /* 深色块上的正文 */
  --on-dark2:#B2B6BB;/* 深色块上的次要文字 */
  --ink5:#8A8E93;    /* 超大装饰数字（01 02 03）：比正文浅，但不能糊 */
  --ink:#101215;
  --ink2:#46494F;
  --ink3:#63676E;    /* 正文小字的下限：纸底上 5.4:1，过 WCAG AA */
  /* --ink4 在纸底上只有 2.8:1。它只配出现三种地方：分隔线、图标描边、
     以及靠字重与位置就能认出来的装饰（时间戳类另算，一律走 ink3）。
     2026-10-21：有 5 条小字规则用它配 11–13px，实测读不清，全部改回 ink3。
     要用浅灰又必须能读，用 ink3 —— 不要为「更淡一点」牺牲可读性。 */
  --ink4:#94989E;
  --line:#E5E5E2;
  --line2:#EFEFEC;
  --line3:#D8D8D4;   /* 强分隔：输入框下划线、按钮描边 */
  --brand:#C01018;
  --brand-d:#A00D14; /* 品牌红的按下态：比主色深一档，同一色相 */
  --ink-press:#000000; /* 墨色按钮的按下态：唯一允许的纯黑，只给实心按钮用 */

  /* ── 三元组（2026-10-21）──────────────────────────────────────
     rgba() 里塞不进 var(--ink)：它要的是三个数字，不是一个颜色。
     没有这三个令牌，阴影、描边、遮罩就只能写死 rgba(16, 18, 21, .06)，
     于是同一个墨色在 CSS 里出现 19 次 —— 改一次主色要去 19 个地方。
     令牌存 16,18,21 就是 --ink:#101215 的十进制，两者必须同步改。 */
  --ink-rgb:16,18,21;
  --white-rgb:255,255,255;
  --brand-rgb:192,16,24;

  /* ── 户型工具（tool.css）用的四个派生色 ──────────────────────
     它们不在六级纸/四级墨上：hover 描边比 --line3 深一档、SVG 墙线介于墨与次墨之间、
     滚动条滑块、品牌红的两种浅底。原来是散在 tool.css 里的字面量，
     改配色时最容易漏掉的就是这几个。集中在这里，至少改的时候只改一处。 */
  --line-hover:#C6C6C1;
  --line-plan:#3A3D42;
  --scroll:#C9C9C4;
  --brand-wash:#F0DCDC;
  --brand-wash2:#F7E9E9;
  --brand-wash2-rgb:247,233,233;

  /* ── 品牌点缀层（2026-10-23 美化改造新增）─────────────────────
     病历：改造前全站 7 个页面「品牌色出现次数 = 0」。整站只有纸白与墨黑，
     眼睛在页面上找不到落点，读起来像 PDF 而不是「一家有主张的招商公司」。
     但红不能撒——撒多了就是促销页。所以红只许出现在四类位置：
       ① 页头 h1 上方那一道签发线  ② 小节标题前的竖条与序号
       ③ 关键承诺（0 元 / 当天答复） ④ 可点元素的 hover 与当前页
     这四类之外的红色，一律不批。 */
  --brand-hair:rgba(192,16,24,.16);  /* 品牌红发丝线：分隔、描边 */
  --brand-mid:#E3C4C5;               /* 比 hair 实一档，卡片顶线用 */
  --brand-soft:#F8EDEC;              /* 红浅底：chips 选中、引用块 */
  --brand-deep:#8E0C12;              /* 红按压态：比主色深两档 */

  /* ── 功能色（2026-10-26 DEEP-1026 补）───────────────────────────
     tool.css 的别名表（文件开头 :root）把工具页的旧调色盘指回共享令牌，
     但漏了三个，而规则里是**裸引用**：
       tool.css:935  .menu-item.danger{ color:var(--rose) }
       tool.css:1220 .diagnostic.warn{ color:var(--ink2); background:var(--amber-soft) }
       tool.css:1221 .diagnostic.warn .icon{ color:var(--amber) }
     浏览器遇到未定义的 var() 会**丢弃整条声明**，不报错。结果是：
     「删除项目」那项不是红的、警告诊断块没有底色，页面看着正常。
     本例与 --measure 是同一类问题，一天内第二例，所以才建了 _audit_vars.mjs。

     为什么 danger 不复用 --brand：#C01018 是全站的「品牌强调」（hover / 当前页 /
     关键承诺），tools 页里它出现 200 多次。功能色若与它同值，
     「这一项危险」和「这一项被强调」就分不出来了。所以取同族更深一档的冷红。
     对比度实测（_dev/_contrast.mjs，2026-10-26）：
       --rose 在纸底 7.14:1（正文线 4.5）· --amber 在 --amber-soft 上 5.29:1
       （图形线 3）· --ink2 在 --amber-soft 上 8.05:1（正文线 4.5）。 */
  --rose:#A81530;        /* 危险操作（删除/清空）：同族更深一档，与品牌强调区分 */
  --amber:#8A5A00;       /* 警告文字与图标 */
  --amber-soft:#FBF1DD;  /* 警告浅底 */

  /* ── 深墨段（全站唯一允许的反白区块底色）─────────────────────
     长页（装修 8421px、关于 7430px）读到中段会失去层次，
     因为每一块都是浅底。给 1–2 处深墨段，页面才有"章节感"。
     --ink-deep 不是纯黑：纯黑配纸白对比过硬，14,17,20 仍带一点冷调。 */
  --ink-deep:#14171C;
  --ink-deep2:#1D2126;
  --on-deep:#E9EAE7;
  --on-deep2:#9EA3A9;
  --on-deep3:#8A9099;   /* 深底上的三级文字：4.6:1，闸门判红的边界值之上 */

  /* ── 图标描边与圆角 ─────────────────────────────────────────
     图标全是 24 格线性、stroke=1.5。1.7 在 14px 显示尺寸下会糊成一团，
     1.2 又太虚；1.5 是 14/16/18/20/24 五档都能立住的那个值。 */
  --ico:1.5;

  /* ── 圆角（2026-10-25 收口）──────────────────────────────────
     病历：全站原来 6 种裸值 —— 3px×37、2px×10、4px×3、1px×3，
     外加 50%（圆形）与 0（显式清零）。
     1px / 2px / 3px 这三个值在同一屏上并排时，人眼分不出差别，
     但放大到 2× 屏、或者截图放进提案里，就露出来了 ——
     它们不是"三种圆角"，是"同一个圆角被随手写了三遍"。
     收成两档 + 圆形。为什么只有两档：
       这是 B2B 招商站，圆角越大越像消费品。2px 是"有一点收边"，
       4px 是"卡片有一点软"。8px 以上会立刻变"互联网产品风"，
       与本站在用的纸白 / 墨黑 / 发丝线体系不是一套语言。
     ⚠ 0 不换成令牌：`border-radius:0` 是一个**明确的决定**
       （去掉父级圆角、直角表格），换成 var(--r-0) 反而看不出意图。
     ⚠ 50% 同理，它是"圆形"，不是"圆角的一档"。 */
  --r-1:2px;
  --r-2:4px;

  /* 字体 */
  --serif:"Noto Serif SC","Songti SC","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --en:"Helvetica Neue",Helvetica,Arial,sans-serif;

  /* 版面 */
  --w:1360px;
  --hh:clamp(420px,56vh,580px);
  --ease:cubic-bezier(.4,0,.2,1);

  /* ── 动效节奏（2026-10-25）────────────────────────────────────
     病历：全站 transition 时长原来有 12 种取值 ——
       .14s ×11 · .16s ×3 · .18s ×14 · .2s ×53 · .22s ×10
       .25s ×34 · .3s ×3 · .6s ×2 · .8s ×2 · 1s ×2 · 140ms · 180ms
     和间距是同一个病：每个组件随手取一个"差不多"。
     单看每一处都像 0.2 秒，一千多处累积起来就是"每个交互的速度都不一样"。
     —— 这个差异人眼几乎分不出（20ms），但手能摸出来：连点三下，
        一处比另一处慢半拍，就是"不跟手"。

     收成 4 档，覆盖原来全部 12 种，每档位移不超过 20ms：
       --dur-1 160ms  微反馈：hover 变色、下划线、图标位移
       --dur-2 220ms  状态切换：按钮底色、卡片抬起、页签
       --dur-3 300ms  层级变化：展开、浮层、抽屉
       --dur-4 800ms  大块入场：区块 reveal（.rv 现有节奏，不改，长页读着更稳）
     ⚠ 时长令牌只用于 transition / animation-duration。
       不要用它做 animation-delay 的倍数运算 —— 那样又会出现 480ms、660ms 这种新值。 */
  --dur-1:160ms;
  --dur-2:220ms;
  --dur-3:300ms;
  --dur-4:800ms;
  /* 出场用 ease-out：快起慢收，收尾"停得住"。--ease 是 in-out，
     适合来回运动的元素（位移、缩放），不适合单次入场。 */
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ── 阅读尺（measure）：2026-10-23 通宵优化新增 ──────────────
     以前段落写 42em、列表也写 42em，看着是"同一把尺"，实际不是：
     .dtxt 的基准字号 17px → 42em = 714px（42 字/行）
     .cfl  的基准字号 15px → 42em = 630px（42 字/行）
     字/行一致，但右缘差 84px，同一节里段落比列表长出小半个字栏——
     1440 下看着像"列表没画完"。em 会跟着字号变，px 不会。
     600–720px 是中文长文的舒适区间（40–46 字/行）。
     ⚠ 2026-10-25：原来取 700，注释里写「15px 下 46.7 字，两端都在区间内」——
     46.7 已经越过它自己写的上限 46。而全站 `.dtxt p` 正是 15px，
     于是每一段长文都比标准宽 0.7 个字，字号闸门报「每行 47 字（>46）」，
     关于页 / 装修页 / 流程页 / 服务页一次 20 多条。
     不收判据（46 字是这条注释自己定的标准），改数值：690。
       15px → 46.0 字 · 17px → 40.6 字，两端都在 40–46 内。 */
  --measure:690px;

  /* ── 标题行高（h2）：2026-10-23 夜统一 ──────────────────────
     同一级 h2（24px）实测三套行高：
       公司六页 .cp-h        36px（1.50）
       内容页 .dsec h2       42px（1.75，从 .dtxt 的 2.05 继承下来）
       资讯页 .h2            42px，且字距 0.24px（与全站 0.72 不同）
     标题不是正文，2.05 的行高把它撑得像「两行之间又垫了一段」，
     与下面正文的间距（26px）反而显得比行内间距还小 —— 层级读不出来。
     1.45 是 24px 标题的常规值：既分得开行，又不吃掉 --sp-h2。 */
  --lh-h2:1.45;
  --ls-h2:.03em;
  /* ── 锚点落位（anchor）：2026-10-23 统一 ──────────────────────
     吸顶页头 76px，留 13px 呼吸 = 89。
     原来三处各写一个数：全局 [id] 89、#units 82、.cp-svc li[id] 96。
     差的 7–14px 单看没问题，但同一页里从页脚跳「选址顾问」和从导航跳
     「#schedule」会停在两个不同的高度，读起来像没对齐。 */
  --anchor:89px;

  /* ── 垂直节奏（只有三档，不许再随手加）────────────────────────
     原来每个区块各写各的：42 / 44 / 54 / 56 / 60 / 64 / 76 / 80 / 96，
     相邻两块一个 56 一个 76，肉眼看不出差 20px，但整页读下来就是"每段都不太一样"。
     现在收成：附属区块与色带 64（--sp-band）、内页首屏标题区 32（--sp-head）、
     首页大区块 96（--sp-sec）。 */
  --sp-head:32px;
  --sp-band:64px;
  --sp-sec:96px;
  --sp-sec-sm:64px;
  /* 标题行高：中文大标题原来 1.18 / 1.20 / 1.30 / 1.32 四种，
     单行看不出，一旦折行（长楼盘名、说明页长句）行间就明显不一样。 */
  --lh-h1:1.22;
  /* 区块标题到内容的距离：34 / 24 / 42 / 26 —— 四个值都"差不多"，
     并排翻页时标题与内容的松紧关系却每次都在变。统一 26。 */
  --sp-h2:26px;
  /* 大字倍率：只在 ≥2100 的大屏上调，笔记本一律 1 —— 改它不会动小屏 */
  --k:1;

  /* ── 字号阶梯（10 档）──────────────────────────────────────────
     之前全站 32 级、142 处 font-size，其中 12 级挤在 10–15px 之间
     （10 / 10.5 / 11 / 11.5 / 12 / 12.5 / 13 / 13.5 …），相邻比值只有 1.02–1.07，
     人眼分不出来，只是让每个新组件随手取一个"差不多"的值。
     现在收成 10 档，全部整数、相邻比值 1.07–1.53。
     为什么不是 1.25 等比：中文 11/12/13 三级是界面刚需（角标 / 标签 / 数据），
     等比阶梯会把它们拉到 11 / 13.75 / 17.2，反而出现半像素。整数优先。 */
  /* 2026-10-23：--fs-xs 从 11 抬到 12。
     全站排版取证（_dev/audit_look.mjs）扫出 96 处 11px，其中 128 个 dt、
     84 个 span、64 个 .dag-k 不是「角标/编号」而是实打实的中文标签
     （「成立」「累计服务企业」「轮值顾问」「办公地址」）。11px 汉字在
     1× 屏上笔画会糊在一起；同一批标签在 12px 下仍然比正文低两档，层级不丢。
     两个 token 同值是有意的：保留 --fs-xs 这个名字，160 处调用不用改。 */
  --fs-xs:12px;      /* 角标、单位、图注编号（已与 --fs-sm 同值，见上） */
  --fs-sm:12px;      /* 标签、页签、面包屑、元信息 */
  --fs-bs:13px;      /* 密集数据：键值对的值、表格单元、链接 */
  --fs-md:14px;      /* 卡片正文、列表说明 */
  --fs-base:15px;    /* 正文默认 */
  --fs-lg:17px;      /* 强调正文、卡片标题 */
  --fs-num:19px;     /* 数字（电话、估算值）、引文 */
  --fs-h3:24px;      /* 小节标题 */
  --fs-h2:30px;      /* 区块标题 */
  /* 2026-10-25 补：深色实力带（.co-f b）的大数字原本写的是
     `calc(var(--fs-h2) * var(--k) * 1.2)` —— 1440 下算出来 36px，
     阶梯上根本没有这一级；更麻烦的是这个 ×1.2 会跟着 --fs-h2 的响应断点一起缩，
     ≤1080 算出 33.6、≤760 算出 31.2，**每一档都脱阶梯**（闸门只测 1440/1920/1280，
     所以只抓到了 36 这一处）。数字带需要一级「比小节标题大一档、比页面标题小一档」，
     与其让复合算式凑，不如明写一级、并给窄屏配同级令牌。 */
  --fs-num-lg:36px;  /* 深色带大数字 */
  --fs-h1:46px;      /* 页面标题 */
  --fs-display:52px; /* 首屏主标题：全站唯一比 h1 更大的一级 */

  /* ── 展示级：把「用系数算出来」的尺寸显式命名（2026-10-26）────────────
     这一批原来是 premium.css 里的 calc(var(--fs-x) * 1.42) / * 1.28 / * 1.7 之类。
     问题不在"大一点"，在于**算出来的值不在台阶上**：
       fs-h1 × 1.28 = 58.88 · fs-h3 × 1.42 = 34.08 · fs-md × 1.7 = 23.8
       fs-h3 × 1.38 = 33.12 · fs-num × 1.34 = 25.46 · fs-xs × .92 = 11.04
     这些小数在页面上与邻近整数档只差 0.1–0.5px，肉眼分不出，却让详情页
     一屏出现 21 种字号（其中 6 种是这种「说不清为什么存在」的碎片）。
     现在每一级给一个名字、一个整数，窄屏在各自断点里配同级值。
     设计意图完全保留（详情页标题仍然明显大于其他页的 46），只是不再靠乘法凑。 */
  --fs-d1:60px;      /* 详情页主标题（原 58.88） */
  --fs-d2:34px;      /* 详情页小节标题（原 34.08） */
  --fs-stat:24px;    /* 数据块的值（原 23.8） */
  --fs-spec:33px;    /* 房源面积规格（原 33.12） */
  --fs-price:26px;   /* 房源价格（原 25.46） */
  /* 2026-10-27：--fs-cap 从 11 抬到 12，与 --fs-xs 同值。
     排版取证在第 25 步报出 406 个 dt + 84 个 em 落在 10.9px（premium.css 里
     `.dstat dt` / `.dstat dd em` 用它）。11px 汉字在 1× 屏上笔画糊在一起，
     和 10-23 把 --fs-xs 从 11 抬到 12 是同一个判断；这个令牌只剩「尾注」
     一类用法，抬一档不破坏层级（它仍然是浅墨，不比标签更抢眼）。 */
  --fs-cap:12px;     /* 极小单位标注（原 11.04 → 12），只给「元/㎡/天」这类尾注 */
  --fs-h1k:20px;     /* h1 里的品类后缀「写字楼出租」。原来是 .34em（60×.34=20.4），
                        em 相对 h1 走，每个断点都算出小数；给三个整数档。 */

  /* ⚠ 2026-10-26 DEEP-1026：这里本来还写着一条 `--measure:700px;`，
     理由是「这个令牌被引用 6 次但从未定义过」。

     那个前提是错的 —— 本文件第 169 行**早就有** `--measure:690px`
     （10-25 通宵优化时定的，并且明确记着「原来取 700，46.7 字越过自己写的
     上限 46，所以取 690」）。后定义静默覆盖前定义，于是：
       · 已修好的「每行 47 字（>46）」在关于/装修/流程/服务页复发 20 多条；
       · 而病因看起来像「令牌没定义」，查起来完全对不上。
     教训：往 :root 里加令牌之前先 grep 一遍同名 —— 重复定义不报错、不警告，
     只会让最后一次赋值生效，且把前一次的修复悄悄退回。 */
}

/* 容器四档：笔记本 1360 → 2K 1960 → 4K/带鱼 2120。
   每档同时抬 --k，字不跟着长就会在大屏上显得"字变小了"。 */
@media (min-width:1600px){ :root{ --w:1520px; } }
@media (min-width:1800px){ :root{ --w:1680px; } }
@media (min-width:2100px){ :root{ --w:1820px; --k:1.12; } }
@media (min-width:2500px){ :root{ --w:1960px; --k:1.22; } }
@media (min-width:3100px){ :root{ --w:2120px; --k:1.34; } }

/* 1280–1420 这一类笔记本：首屏左栏实际只有 510–570 宽。
   52px 的「写字楼租赁最大的成本，」是 11 个字 × 52 = 572px —— 差 9px 塞不进 563 的栏，
   于是标题被折成三行（首屏凭空高出 68px），读起来是"写字楼租赁最大 / 的成本，/ 不是租金。"，
   把原本对仗的两句拆散。
   降到 46 × 11 = 506，两行成立；46 本来就在阶梯上（= --fs-h1），不新增级数。 */
@media (max-width:1420px){ :root{ --fs-display:46px; } }

/* 窄屏只改令牌，不改用法：所有 calc(var(--fs-x) * var(--k)) 自动跟着缩，
   不需要在每个组件里再写一遍 clamp。 */
@media (max-width:1080px){ :root{ --fs-display:44px; --fs-h1:40px; --fs-h2:28px; --fs-num-lg:30px;
  --fs-d1:46px; --fs-d2:30px; --fs-stat:21px; --fs-spec:29px; --fs-price:23px; --fs-h1k:16px; } }
@media (max-width:760px){ :root{ --fs-display:34px; --fs-h1:32px; --fs-h2:26px; --fs-h3:22px; --fs-num-lg:24px;
  --fs-d1:33px; --fs-d2:25px; --fs-stat:18px; --fs-spec:24px; --fs-price:20px; --fs-h1k:12px; } }
/* 2026-10-27：--fs-h1k 在 760 档从 11 → 12。
   h1 后面的品类后缀「写字楼出租」在手机上只有 11px，取证每次都报它（33 处）。
   它是**可读的中文标签**，不是角标；10-23 已经承认过一次「11px 汉字笔画糊」，
   这一档只是漏了。12px 仍然比 h1 主体低两档以上，层级没变。 */

/* ============================================================
   打印令牌
   —— 纸上没有浅灰底、没有发丝线、没有品牌红（彩色打印也要省墨）。
      在这里把令牌重定义一次，全站所有 var() 自动变黑白，
      不用去 pages.css 里逐条盖颜色，也就不用写 !important。
   ============================================================ */
@media print{
  :root{
    --ink-rgb:0,0,0;
    --paper:#fff; --paper2:#fff; --paper3:#fff; --paper4:#fff;
    --ink:#000; --ink2:#111; --ink3:#333; --ink4:#555; --ink5:#777;
    --line:#bbb; --line2:#ddd; --line3:#999;
    --brand:#000;
  }
}

/* ============================================================
   层级阶梯（z-index）
   —— 全站只认这 11 档。数字本身没有含义，位置才是含义：
      写 12 / 13 / 18 / 26 / 32 / 35 / 55 / 61 的地方，谁也说不清
      差那 1 是故意的还是当年随手加的，改一次要数一遍谁压谁。
      同一档里的两个元素，等于承认「它们不该互相压」—— 先后交给 DOM 顺序。
   —— 加新浮层时先在这里挑一档；挑不到就说明阶梯缺一层，那也该先改这里。
   ============================================================ */
:root{
  --z-raised:8;    /* 内容区内的抬高：画布属性面板、卡片角标 */
  --z-float:12;    /* 压在内容上的浮层：工具提示条、图例、视图栏、缩放框 */
  --z-pop:20;      /* 弹出的二级层：搜索联想、空态、拖放遮罩、轴测预览 */
  --z-chrome:30;   /* 侧栏与贴边操作条：工具侧栏、房源列表底部条 */
  --z-topbar:40;   /* 顶栏 */
  --z-scrim:50;    /* 抽屉遮罩 */
  --z-drawer:55;   /* 抽屉面板：压在遮罩之上 */
  --z-header:60;   /* 吸顶导航、跳过链接、下拉菜单 */
  --z-overlay:120; /* 全屏浮层：方案预览 */
  --z-toast:150;   /* 提示条：永远最上 */
  --z-tip:500;     /* 地图瓦片失败提示：压住一切，包括提示条 */
}

/* ============================================================
   ── 质感层令牌（2026-10-25 新增，被 assets/premium.css 消费）──
   为什么要加这一组：改之前全站 box-shadow 只用了 6 处 --shadow-sm，
   圆角只有 2px / 4px。整站因此是「印刷品」：发丝线 + 直角 + 纯平。
   这不是错 —— 它是刻意的编辑感（.hd 的注释还专门写过"全站已无毛玻璃"）。
   但它缺一层「手感」：卡片与按钮没有高度差、悬停没有位移、按下没有回弹。
   这一组只补「层次与手感」，不动颜色、不动字号、不动任何纵向留白 ——
   check_unify 只认 {0,8,32,40,44,64,96} 这七档节奏，改内边距会直接判红。

   三条硬规则（写在令牌旁边，免得以后有人随手加）：
     ① 阴影一律用墨色低透明度叠加，不用纯黑：纯黑在纸底上发脏。
     ② 半径只给「可点/可浮」的表面：按钮 3、卡片 6、浮层 10。
        正文区块、表格、图片框继续直角 —— 一圆就散掉编辑感。
     ③ 动效只动 transform / opacity，绝不动 width/height/top/left，
        否则每一处 hover 都会触发重排，4.7 万页的老机器上会掉帧。
   ============================================================ */
:root{
  /* 半径：三级，只给交互与浮层 */
  --r-btn:3px;
  --r-card:6px;
  --r-panel:10px;

  /* 高度差：四级 + 一级品牌光。
     每级都是「贴地的一层 + 远处的一层」两段叠加 ——
     单段阴影再大也像贴纸，两段才有真实的近实远虚。 */
  --el-1:0 1px 2px rgba(var(--ink-rgb),.05);
  --el-2:0 2px 4px rgba(var(--ink-rgb),.04), 0 10px 24px -10px rgba(var(--ink-rgb),.16);
  --el-3:0 4px 8px rgba(var(--ink-rgb),.05), 0 22px 48px -22px rgba(var(--ink-rgb),.24);
  --el-4:0 8px 16px rgba(var(--ink-rgb),.06), 0 40px 90px -40px rgba(var(--ink-rgb),.32);
  --el-brand:0 12px 32px -14px rgba(var(--brand-rgb),.34);
  /* 发丝环：替代「1px 实线边框」。实线会在纸底上留下一圈硬边，
     环是阴影，跟着圆角走、跟着悬停变，视觉上更"连续"。 */
  --ring-soft:0 0 0 1px rgba(var(--ink-rgb),.06);
  --ring-line:0 0 0 1px rgba(var(--ink-rgb),.10);

  /* 缓动与时长：两档缓动 + 三档时长。
     --ease-expo 是「快到慢」的收尾曲线（Jiro / Linear 那一派的手感），
     用于入场与位移；--ease-soft 用于颜色与阴影这类不该有回弹的变化。 */
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);
  --ms-1:160ms;   /* 按下、描边 */
  --ms-2:320ms;   /* 悬停、阴影 */
  --ms-3:700ms;   /* 入场、图片缩放 */
}