/**
 * 设计令牌 · 浅色主题（默认） · 自动生成，请勿手工编辑
 * 源文件：packages/tokens/src/*.tokens.json
 * 构建命令：npm run build:tokens
 *
 * 变量间以 var() 相互引用（非字面值展开），因此
 * 覆盖上层令牌即可级联影响下层，主题与品牌色调整都靠这一机制。
 */

:root {
  /* 浅蓝，用于深色背景上的次要文字（.brand .b-sub / .kpi .ks / hero lead） */
  --color-navy-50: #bcd0e6;
  /* 来源：PROJECT-DESIGN 规范 d5 */
  --color-navy-400: #6b9bc4;
  /* 来源：PROJECT-DESIGN 规范 d4 */
  --color-navy-500: #5485b0;
  /* 来源：PROJECT-DESIGN 规范 d3 */
  --color-navy-600: #3d6b94;
  /* 来源：PROJECT-DESIGN 规范 d2 */
  --color-navy-700: #2a5278;
  /* 来源：PROJECT-DESIGN 规范 d1。与现有代码 --navy2 #1b3a5c 仅红通道差 1，视觉无差异，统一采信规范值 */
  --color-navy-800: #1a3a5c;
  /* 品牌最深色。来源：现有代码 app.wxss / style.css 的 --navy。注意：超出 PROJECT-DESIGN 规范的 d1-d5 范围，是整个系统最暗的一档 */
  --color-navy-900: #0f2742;
  /* 金色系最浅 —— 提示框背景 */
  --color-gold-50: #fff8ec;
  /* 金色系浅档 —— 浅金底上的描边与分隔。来源：存量人员档案库与报告模板 */
  --color-gold-200: #e3c585;
  /* 品牌金亮色，渐变终点。来源：现有代码 --gold2。同时承接 #d9b95f、#e9c97f 等近似值 */
  --color-gold-400: #e0bd6e;
  /* 品牌金。来源：现有代码 --gold 与规范一致。同时承接 #c8a45c、#c6a44e 等近似值 */
  --color-gold-600: #c8a24b;
  /* 金色系深档 —— 浅金底上的正文与图标。承接 #9a7b32、#9a6b00、#b8860b 等 */
  --color-gold-700: #a9802f;
  /* 金色系最深（除 note 正文外）—— 承接 #7a5f1e 及深金棕系 */
  --color-gold-800: #7a5f1e;
  /* 金色系最深，用于提示框正文（.note 文字） */
  --color-gold-900: #6b5524;
  /* 页面背景。来源：现有代码 --bg。与规范 #f5f7fa 视觉无差异，取代码值 */
  --color-gray-50: #f4f6f9;
  /* 来源：PROJECT-DESIGN 规范背景色。保留为次级背景 */
  --color-gray-100: #f5f7fa;
  /* 浅底填充（.pill / .badge / .stat-bar 底色） */
  --color-gray-150: #eef2f7;
  /* 卡片 hover 态 */
  --color-gray-200: #f7f9fc;
  /* 描边/分隔线。来源：现有代码 --line */
  --color-gray-300: #e3e8ef;
  /* 卡片 hover 边框 */
  --color-gray-400: #cdd8e6;
  /* 次要文字。来源：现有代码 --muted */
  --color-gray-500: #6b7a8d;
  /* 表格/列表正文 */
  --color-gray-700: #374454;
  /* 主文字。来源：现有代码 --ink */
  --color-gray-900: #1f2a37;
  /* 成功底色。承接 #d1fae5 / #c6efce / #dcfce7 等近似浅绿 */
  --color-green-100: #e6f4ec;
  /* 成功/正常。来源：现有代码 --ok */
  --color-green-600: #2e9e6b;
  /* 成功深档 —— 浅绿底上的正文。承接存量页面里的 #2e8b57 / #27ae60 */
  --color-green-700: #2e8b57;
  /* 警告底色 */
  --color-amber-100: #fbf1e2;
  /* 警告。来源：现有代码 --warn */
  --color-amber-600: #d98a2b;
  /* 危险提示框背景 */
  --color-red-50: #fdeeee;
  /* 危险底色 */
  --color-red-100: #fbeaea;
  /* 危险提示框边框 */
  --color-red-200: #e7b8b7;
  /* 危险/异常。来源：现有代码 --bad */
  --color-red-600: #c0504d;
  /* 来源：PROJECT-DESIGN 规范，标注为「仅安全合规层」使用。与 red-600 并存，语义更强 */
  --color-red-700: #a83a3a;
  /* 危险深档 —— 较深的红，用于浅红底上的强调正文。承接 #991b1b / #8a2b21 */
  --color-red-800: #991b1b;
  /* 危险提示框正文 */
  --color-red-900: #7a3b3a;
  /* 信息底色 */
  --color-blue-100: #eef5fb;
  /* 信息提示框边框 */
  --color-blue-200: #bcd6ee;
  /* 信息。来源：现有代码 --blue */
  --color-blue-600: #2f6fb0;
  /* 信息提示框正文 */
  --color-blue-900: #234866;
  /* 纯白 */
  --color-absolute-white: #ffffff;
  /* 纯黑。仅用于阴影与遮罩，不用于文字 */
  --color-absolute-black: #000000;
  /* 分类色·紫·浅。用于标签/角色徽标的第七类标识 */
  --color-purple-100: #f0e6ff;
  /* 分类色·紫·中 */
  --color-purple-300: #8a78d6;
  /* 分类色·紫·深 */
  --color-purple-600: #7c3aed;
  /* 分类色·紫·最深，用于浅紫底上的文字 */
  --color-purple-700: #5b4fa0;
  /* 分类色·青·浅 */
  --color-teal-100: #e0f7fa;
  /* 分类色·青·深，用于浅青底上的文字 */
  --color-teal-700: #0e7490;
  /* 系统字体栈（2026-09-23 业务方口径：只留两个 —— Mac 取苹方 PingFang SC、Windows 取微软雅黑 Microsoft YaHei）。全部为系统内置，无网络字体依赖。刻意不列 -apple-system / BlinkMacSystemFont / Segoe UI / Roboto / Helvetica / Arial —— 前两者在 macOS 上会先命中 San Francisco，把中文与拉丁文拆成两套观感；后四者在目标平台上多半不存在，只会让字体解析多绕几层。原先还列了 Hiragino Sans GB / Noto Sans CJK SC / Source Han Sans SC 兜老 macOS 与 Linux：业务方要求「移除所有 web 字体、只留雅黑与苹方」，这三个（尤其思源/Noto）在装了它们的机器上会顶掉微软雅黑，故删除；`sans-serif` 只作最后的兜底。 */
  --font-family-sans: PingFang SC, Microsoft YaHei, sans-serif;
  /* 等宽字体：macOS 取 SF Mono / Menlo，Windows 取 Cascadia Mono / Consolas。同样只列系统内置字体 */
  --font-family-mono: SF Mono, Menlo, Cascadia Mono, Consolas, Noto Sans Mono CJK SC, monospace;
  /* 正文字体栈 */
  --font-family-body: var(--font-family-sans);
  /* 等宽字体栈 */
  --font-family-code: var(--font-family-mono);
  /* 极小号。底部注释 / 角标（小程序 20rpx） */
  --font-size-2xs: 10px;
  /* 特小号。胶囊标签 / 徽标（小程序 22rpx） */
  --font-size-xs: 11px;
  /* 小号。表格正文 / 辅助说明（小程序 24rpx） */
  --font-size-sm: 12px;
  /* 中小号。卡片描述（小程序 26rpx） */
  --font-size-md: 13px;
  /* 基准字号。正文（小程序 28rpx）。web 与小程序在此对齐：14px × 2 = 28rpx */
  --font-size-base: 14px;
  /* 中号。小节标题（小程序 30rpx） */
  --font-size-lg: 15px;
  /* 大号。卡片标题（小程序 32rpx） */
  --font-size-xl: 16px;
  /* 特大号。区块标题（小程序 34rpx） */
  --font-size-2xl: 17px;
  /* 标题号。页面标题（小程序 38rpx） */
  --font-size-3xl: 19px;
  /* 大标题。Hero 主标题（小程序 40rpx） */
  --font-size-4xl: 20px;
  /* 展示号。桌面展示页区块标题 —— 后台/小程序的 17px 是为数据密度调小的，品牌门户在 1280px 视口下需要更大的层级差 */
  --font-size-5xl: 28px;
  /* 展示号·大。桌面展示页次级标题（如分节大标题） */
  --font-size-6xl: 36px;
  /* 展示号·特大。桌面展示页 Hero 主标题。原型此位为 36px，实测在 1280×720 下仍偏弱，上调一档以形成首屏视觉重心 */
  --font-size-7xl: 44px;
  /* 正文 */
  --font-weight-regular: 400;
  /* 强调 */
  --font-weight-medium: 500;
  /* 按钮 / 表头 */
  --font-weight-semibold: 600;
  /* 标题 */
  --font-weight-bold: 700;
  /* Hero 主标题 */
  --font-weight-extrabold: 800;
  /* 标题行高 */
  --font-line-height-tight: 1.3;
  /* 正文行高 */
  --font-line-height-base: 1.6;
  /* 宽松行高，用于长段中文 */
  --font-line-height-loose: 1.8;
  /* 金色引子（eyebrow）字距。承接 site 现有 .hero__eyebrow 的 0.28em 字面量，推广为全端引子语言 */
  --font-tracking-eyebrow: 0.28em;
  /* 品牌英文小标字距（VIP GOLD / LONGEVITY CLUB 等）。承接 card 页 .subs__title 0.12em */
  --font-tracking-brand: 0.12em;
  /* 数值微字距。KPI/价格大数字配合 tabular-nums 使用，收得更紧显得笃定 */
  --font-tracking-numeral: 0.04em;
  /* 正文基准 */
  --font-body: var(--font-size-base);
  /* 最小号 —— 页脚、角标 */
  --font-caption: var(--font-size-xs);
  /* 标签 —— 胶囊、徽标 */
  --font-label: var(--font-size-sm);
  /* 说明文字 —— 卡片描述 */
  --font-note: var(--font-size-md);
  /* 小正文 —— 表格 */
  --font-body-sm: var(--font-size-sm);
  /* 四级标题 */
  --font-heading-h4: var(--font-size-lg);
  /* 三级标题 —— 卡片标题 */
  --font-heading-h3: var(--font-size-xl);
  /* 二级标题 —— 区块标题 */
  --font-heading-h2: var(--font-size-2xl);
  /* 一级标题 —— 页面标题 */
  --font-heading-h1: var(--font-size-3xl);
  /* 移动端 Hero 主标题（28px）。此前取值 20px 是因为原语字阶上界只到 20px（font.size.4xl）—— 那是「当时没有更大的档」，不是「移动端该用 20px」。实测 390px 屏上 20px 主标只比 16px 的按钮大 4px，首屏没有重心。28px 约占屏宽 7.2%，是移动端 Hero 的合理比例 */
  --font-heading-hero: var(--font-size-5xl);
  /* 桌面展示页 Hero 主标题（44px）。与 hero 档并存而非替代：hero 是移动端口径，这是 1280px 桌面门户的首屏视觉重心。二者刻意不共用，改一处不会误伤另一处 */
  --font-heading-display: var(--font-size-7xl);
  /* 桌面展示页区块标题（28px）。后台的 h2 是 17px —— 那是数据密集界面的口径，品牌门户需要更大的层级差 */
  --font-heading-section: var(--font-size-5xl);
  /* 桌面展示页导语 / Hero 副标题（17px）。比正文大一档，用于承接主标题下的长句 */
  --font-heading-lead: var(--font-size-2xl);
  /* 桌面展示页卡片标题（20px）。服务卡与等级卡共用 —— 两者在版面上同级 */
  --font-heading-card: var(--font-size-4xl);
  /* 数值大字 —— KPI 数字 */
  --font-metric: var(--font-size-2xl);
  /* 重置（小程序 0rpx） */
  --space-0: 0px;
  /* 发丝线（小程序 1rpx） */
  --space-1: 1px;
  /* 极小间距（小程序 4rpx） */
  --space-2: 2px;
  /* 小程序 6rpx */
  --space-3: 3px;
  /* 小程序 8rpx */
  --space-4: 4px;
  /* 小程序 10rpx */
  --space-5: 5px;
  /* 小程序 12rpx */
  --space-6: 6px;
  /* 小程序 14rpx */
  --space-7: 7px;
  /* 小程序 16rpx */
  --space-8: 8px;
  /* 小程序 18rpx */
  --space-9: 9px;
  /* 小程序 20rpx */
  --space-10: 10px;
  /* 小程序 22rpx */
  --space-11: 11px;
  /* 小程序 24rpx */
  --space-12: 12px;
  /* 小程序 28rpx */
  --space-14: 14px;
  /* 小程序 32rpx */
  --space-16: 16px;
  /* 小程序 40rpx */
  --space-20: 20px;
  /* 小程序 48rpx */
  --space-24: 24px;
  /* 桌面展示页间距档位。后台/小程序的 24px 上限是为屏幕宽度受限的场景设的，1280px 视口下区块间距需要更宽 */
  --space-32: 32px;
  /* 桌面展示页区块标题与正文之间 */
  --space-48: 48px;
  /* 桌面展示页区块纵向留白。原型 .section padding 即 64px 0 */
  --space-64: 64px;
  /* 桌面展示页区块纵向留白·加宽档。「留白即奢华」——品牌门户的主区块间距由此前 48/64 双档升级为 64/96 双档，小程序 192rpx 仅作容量预留，不在小屏使用 */
  --space-96: 96px;
  /* 无圆角 */
  --radius-none: 0px;
  /* 小程序 8rpx。徽标 / 进度条 */
  --radius-sm: 4px;
  /* 小程序 12rpx。小按钮 / 输入框 */
  --radius-md: 6px;
  /* 小程序 14rpx。按钮 / 搜索框 */
  --radius-lg: 7px;
  /* 小程序 16rpx。小卡片 / 面板 */
  --radius-xl: 8px;
  /* 小程序 28rpx。大卡片。由 10px 提到 14px —— 高端私立医院不用锐角，圆角柔和是这套视觉的基本特征 */
  --radius-2xl: 14px;
  /* 小程序 36rpx。大容器 / 强调卡 */
  --radius-3xl: 18px;
  /* 胶囊形。标签 / 徽标 */
  --radius-pill: 9999px;
  /* 无阴影 */
  --shadow-none: 0px 0px 0px 0px #00000000;
  /* 卡片默认阴影。按高端私立医院方向收敛到 3% 不透明：医疗场景要干净明亮，卡片立形靠描边而非投影，重阴影会显得像电商后台 */
  --shadow-sm: 0px 1px 2px 0px #0f27420a;
  /* 卡片 hover 抬升阴影。由 10px/26px/12% 收敛为 4px/12px/8% —— 交互反馈要能感知，但不必张扬 */
  --shadow-md: 0px 4px 12px 0px #0f274214;
  /* 顶栏阴影。压低到刚好与内容分层，避免头部出现一道明显的阴影带 */
  --shadow-nav: 0px 1px 8px 0px #0f274217;
  /* 页面底色 */
  --surface-page: var(--color-gray-50);
  /* 页面底色次档。存量页面中存在 #f4f6f9 与 #f5f7fa 两种近似底色，此令牌承接后者 */
  --surface-page-alt: var(--color-gray-100);
  /* 卡片/面板底色 */
  --surface-card: var(--color-absolute-white);
  /* 卡片 hover 底色 */
  --surface-card-hover: var(--color-gray-200);
  /* 次级填充底色（标签/徽标/进度条槽） */
  --surface-subtle: var(--color-gray-150);
  /* 深色底（Hero / 顶栏 / 页脚） */
  --surface-inverse: var(--color-navy-900);
  /* 模态遮罩。品牌色 40% 透明，比纯黑遮罩更协调 */
  --surface-overlay: rgba(15, 39, 66, 0.4);
  /* 深色区块上的浅色叠加底（7% 白）。用于深色底上的次级卡片 */
  --surface-on-dark-subtle: rgba(255, 255, 255, 0.07);
  /* 深色区块上的浅色叠加底（16% 白）。用于深色底上的图标底板 */
  --surface-on-dark-medium: rgba(255, 255, 255, 0.16);
  /* 主文字 —— 标题、正文 */
  --text-primary: var(--color-gray-900);
  /* 次要文字 —— 说明、辅助信息 */
  --text-secondary: var(--color-gray-500);
  /* 第三级文字 —— 表格正文、列表项 */
  --text-tertiary: var(--color-gray-700);
  /* 深色底上的文字 */
  --text-on-brand: var(--color-absolute-white);
  /* 深色底上的次要文字 */
  --text-on-brand-muted: var(--color-navy-50);
  /* 强调文字 —— 数值高亮、链接强调 */
  --text-accent: var(--color-gold-600);
  /* 金色系强调文字 —— 浅金底上的数值与图标。承接存量页面里的 #a9802f / #9a7b32 / #9a6b00 / #b8860b */
  --text-gold-strong: var(--color-gold-700);
  /* 品牌色文字 —— 标题、页头。深色主题自动翻转为金色 */
  --text-brand: var(--brand-primary);
  /* 深色底上的文字（语义别名，供 SVG fill / 内联场景使用） */
  --text-inverse: var(--color-absolute-white);
  /* 禁用态文字 */
  --text-disabled: var(--color-gray-400);
  /* 极浅分隔线。存量页面中存在 #e8edf2 / #dce3ec 等一列近似值，统一收敛到此令牌 */
  --border-subtle: var(--color-gray-150);
  /* 默认描边 / 分隔线 */
  --border-default: var(--color-gray-300);
  /* 强调描边 —— hover / 选中态 */
  --border-strong: var(--color-gray-400);
  /* 品牌描边 —— 幽灵按钮 */
  --border-brand: var(--color-navy-900);
  /* 金色描边 —— 提示框 */
  --border-accent: var(--color-gold-200);
  /* 深色底上的描边 —— 白色描边用于深色区块内的分隔线 */
  --border-inverse: var(--color-absolute-white);
  /* 发丝线。小程序端 1rpx —— 微信对 1rpx 的处理在部分机型会渲染为 0，需真机验证 */
  --border-width-hairline: 1px;
  /* 标准描边 */
  --border-width-default: 1px;
  /* 强调左侧竖条（提示框）。小程序 8rpx */
  --border-width-thick: 4px;
  /* 品牌标识色。用于标题、强调、描边。浅色主题取现有代码值 #0f2742；深色主题翻转为金色（海军蓝在深色底上不可见） */
  --brand-primary: var(--color-navy-900);
  /* 品牌标识色次档。存量页面大量使用 #1a3a5c 作为标题色，此令牌用于无损承接，避免迁移时产生视觉位移 */
  --brand-primary-alt: var(--color-navy-800);
  /* 品牌色 hover / 渐变终点 */
  --brand-primary-hover: var(--color-navy-800);
  /* 主行动按钮底色。浅色主题为海军蓝。深色主题翻转为金色 —— 需要与 cta.fg 成对覆盖，单独改一个会导致对比度不足 */
  --brand-cta-bg: var(--color-navy-900);
  /* 主行动按钮文字。浅色主题白字压深蓝；深色主题深字压金底。与 cta.bg 必须成对变更 */
  --brand-cta-fg: var(--color-absolute-white);
  /* 品牌辅色（金） —— 强调、进度、点缀 */
  --brand-accent: var(--color-gold-600);
  /* 品牌辅色亮档 —— 渐变终点 */
  --brand-accent-light: var(--color-gold-400);
  /* 品牌色阶·深。用于图表系列、分层区块、次要强调 */
  --brand-shade-deep: var(--color-navy-700);
  /* 品牌色阶·中 */
  --brand-shade-mid: var(--color-navy-600);
  /* 品牌色阶·浅 */
  --brand-shade-soft: var(--color-navy-500);
  /* 品牌色阶·最浅。用于背景层、禁用态、装饰 */
  --brand-shade-pale: var(--color-navy-400);
  /* 品牌横向渐变 —— 顶栏 */
  --brand-gradient-brand: linear-gradient(90deg, var(--color-navy-900), var(--color-navy-800));
  /* Hero 斜向渐变 */
  --brand-gradient-hero: linear-gradient(120deg, var(--color-navy-900), var(--color-navy-800));
  /* 金色渐变 —— logo / 主按钮 */
  --brand-gradient-accent: linear-gradient(135deg, var(--color-gold-600), var(--color-gold-400));
  /* 胶片噪点纹理（fractalNoise + 去饱和），平铺 140px。用法：绝对定位覆盖层的 background-image，配合 decor.noiseOpacity 控制强度；只上 hero 与深色面板，浅色内容区不用。未标 $type：值是 data-uri 字符串，任何值变换都不应触碰它 */
  --decor-noise-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  /* 噪点层强度（浅色主题）。深色下暗部噪点更不易察觉，故深色覆盖提到 0.08 */
  --decor-noise-opacity: 0.05;
  /* 金线发丝 —— 两端消隐的金色水平分隔线，1px 高。hero 下缘、卡片题头下缘、区块之间。中间浅金停靠点 #f0dcae 与 tier 名片带尾色同族 */
  --decor-gold-line: linear-gradient(90deg, transparent 0%, var(--color-gold-400) 22%, #f0dcae 50%, var(--color-gold-400) 78%, transparent 100%);
  /* 金属填充面 —— CTA 按钮面、徽标底。深-浅-深的节奏模拟金属反光；hover 提亮走 filter: brightness(1.05)，不另设令牌 */
  --decor-gold-metal-fill: linear-gradient(135deg, #b8923b 0%, var(--color-gold-400) 45%, #f0dcae 55%, var(--color-gold-600) 100%);
  /* 金属字渐变（background-clip: text）。仅限 ≥24px 的 display 级数字/标题，且需人工目验 —— 渐变中段在白底上不达对比度，小字号禁用。兜底色见 goldTextFallback */
  --decor-gold-text: linear-gradient(105deg, var(--color-gold-700) 0%, var(--color-gold-400) 30%, #f7ead0 50%, var(--color-gold-400) 70%, var(--color-gold-700) 100%);
  /* 不支持 background-clip: text 环境的 color 兜底。取 gold.700：它对白底 ≥4.5:1，是金系唯一能承担小字的前景档 */
  --decor-gold-text-fallback: var(--color-gold-700);
  /* 金色发丝描边（30% 金）。卡片内衬线、分隔线、描边点缀。深色下覆盖为亮金 —— 深底上 30% 深金不可见 */
  --decor-hairline-gold: rgba(200, 162, 75, 0.3);
  /* 金属面上的文字（金底 CTA 等）。必须用恒定深墨而非 brand.primary —— 后者在深色主题翻转为金，金字压金底即失效。浅色取 navy.900，深色覆盖为 surface.page 同款深蓝 */
  --decor-metal-ink: var(--color-navy-900);
  /* 徽章水印强度。品牌徽章以极低透明度置于 hero 角落，是质感不是图形 —— 高于 0.1 就会抢主体 */
  --decor-watermark-opacity: 0.06;
  /* 引子字距（0.28em）。语义层出口：业务代码消费 --decor-tracking-eyebrow，不直接引原语 */
  --decor-tracking-eyebrow: var(--font-tracking-eyebrow);
  /* 品牌英文小标字距（0.12em） */
  --decor-tracking-brand: var(--font-tracking-brand);
  /* 数值微字距（0.04em）。配合 tabular-nums 用于 KPI / 价格 / 电话号码等大数字 */
  --decor-tracking-numeral: var(--font-tracking-numeral);
  /* 打印墨色。打印样式必须与屏幕主题无关 —— 深色主题下 text.primary 是浅灰，直接打印就是白纸印浅字。故单列一组不随主题翻转的语义，而不是在样式里直接写原语（那样品牌/主题调整时会漏掉这里） */
  --print-ink: var(--color-absolute-black);
  /* 纸张底色 */
  --print-paper: var(--color-absolute-white);
  /* 正文主墨 */
  --print-ink-primary: var(--color-gray-900);
  /* 次要文字 */
  --print-ink-secondary: var(--color-gray-500);
  /* 三级文字 */
  --print-ink-tertiary: var(--color-gray-700);
  /* 细分隔线 */
  --print-rule-subtle: var(--color-gray-150);
  /* 默认描边 */
  --print-rule-default: var(--color-gray-300);
  /* 浅底填充 */
  --print-fill-subtle: var(--color-gray-150);
  /* 表头底色 */
  --print-table-header-bg: var(--color-gray-150);
  /* 表头文字 */
  --print-table-header-fg: var(--color-gray-700);
  /* 单元格分隔线 */
  --print-table-cell-border: var(--color-gray-150);
  /* 单元格文字 */
  --print-table-cell-fg: var(--color-gray-900);
  /* 中性标签底 */
  --print-tag-neutral-bg: var(--color-gray-150);
  /* 中性标签字 */
  --print-tag-neutral-fg: var(--color-gray-700);
  /* 成功标签底 */
  --print-tag-green-bg: var(--color-green-100);
  /* 成功标签字 */
  --print-tag-green-fg: var(--color-green-600);
  /* 警告标签底 */
  --print-tag-amber-bg: var(--color-amber-100);
  /* 警告标签字 */
  --print-tag-amber-fg: var(--color-amber-600);
  /* 危险标签底 */
  --print-tag-red-bg: var(--color-red-100);
  /* 危险标签字 */
  --print-tag-red-fg: var(--color-red-600);
  /* 成功状态文字 */
  --print-status-success: var(--color-green-600);
  /* 危险状态文字 */
  --print-status-danger: var(--color-red-600);
  /* 警告状态文字 */
  --print-status-warning: var(--color-amber-600);
  /* 信息状态文字 */
  --print-status-info: var(--color-blue-600);
  /* 警告状态底色 */
  --print-status-warning-bg: var(--color-amber-100);
  /* 成功深档 —— 浅绿底上的正文。承接 #2e8b57 / #27ae60 */
  --status-success-strong: var(--color-green-700);
  /* 成功前景（文字/图标） */
  --status-success-fg: var(--color-green-600);
  /* 成功底色 */
  --status-success-bg: var(--color-green-100);
  /* 成功亮档 —— 渐变终点用。直接复用 fg 会让渐变塌成纯色 */
  --status-success-light: #52c08f;
  /* 警告前景 */
  --status-warning-fg: var(--color-amber-600);
  /* 警告底色 */
  --status-warning-bg: var(--color-amber-100);
  /* 警告强化前景 —— 浅琥珀底上需要更深一档才达到正文对比度要求 */
  --status-warning-strong: #c8740a;
  /* 危险前景 */
  --status-danger-fg: var(--color-red-600);
  /* 危险底色 */
  --status-danger-bg: var(--color-red-100);
  /* 高优危险 —— 仅安全合规层使用 */
  --status-danger-strong: var(--color-red-700);
  /* 危险最深档 —— 浅红底上的强调正文。承接 #991b1b / #8a2b21 */
  --status-danger-deep: var(--color-red-800);
  /* 危险亮档 —— 渐变终点用 */
  --status-danger-light: #e0726f;
  /* 信息前景 */
  --status-info-fg: var(--color-blue-600);
  /* 信息底色 */
  --status-info-bg: var(--color-blue-100);
  /* 中性前景 */
  --status-neutral-fg: var(--color-gray-500);
  /* 中性底色 */
  --status-neutral-bg: var(--color-gray-150);
  /* 微交互 —— hover / focus */
  --motion-duration-fast: 150ms;
  /* 标准过渡 —— 卡片抬升 */
  --motion-duration-base: 180ms;
  /* 面板展开 / 模态 */
  --motion-duration-slow: 300ms;
  /* 标准缓动 */
  --motion-easing-standard: 0.4, 0, 0.2, 1;
  /* 入场缓动 */
  --motion-easing-decelerate: 0, 0, 0.2, 1;
  /* 基础层 */
  --z-index-base: 1;
  /* 吸顶导航 */
  --z-index-sticky: 50;
  /* 遮罩 */
  --z-index-overlay: 100;
  /* 模态框 */
  --z-index-modal: 110;
  /* 轻提示 */
  --z-index-toast: 120;
  /* 小屏手机 —— 设计基准宽度 */
  --breakpoint-sm: 375px;
  /* 平板竖屏分界。≤ 此为窄屏布局 */
  --breakpoint-md: 768px;
  /* 平板横屏 / 小笔记本分界 */
  --breakpoint-lg: 1024px;
  /* PC 后台内容区最大宽度分界 */
  --breakpoint-xl: 1280px;
  /* 内容区最大宽度。沿用现有 web .wrap 设置 */
  --breakpoint-max: 1180px;
  /* 页面左右留白。小程序 24rpx 对应现有 .wrap padding */
  --layout-gutter: var(--space-12);
  /* 最小可点击区域。目标客群年龄偏大，不可低于此值 */
  --layout-touch-target: 44px;
  /* 主按钮底色。引用 cta 对而非 brand.primary —— 深色主题下两者取值不同 */
  --button-primary-bg: var(--brand-cta-bg);
  /* 主按钮 hover */
  --button-primary-bg-hover: var(--brand-primary-hover);
  /* 主按钮文字。与 cta.bg 成对，保证任何主题下对比度充足 */
  --button-primary-fg: var(--brand-cta-fg);
  /* 主按钮描边 */
  --button-primary-border: var(--brand-cta-bg);
  /* 金色主按钮渐变底色 */
  --button-accent-bg: var(--brand-gradient-accent);
  /* 金色按钮文字 —— 深蓝压金底，对比度充足 */
  --button-accent-fg: var(--brand-primary);
  /* 金色按钮描边 */
  --button-accent-border: var(--color-gold-400);
  /* 幽灵按钮底色 */
  --button-ghost-bg: var(--surface-card);
  /* 幽灵按钮文字 */
  --button-ghost-fg: var(--brand-primary);
  /* 幽灵按钮描边 */
  --button-ghost-border: var(--border-brand);
  /* 禁用底色 */
  --button-disabled-bg: var(--surface-subtle);
  /* 禁用文字 */
  --button-disabled-fg: var(--text-disabled);
  /* 按钮圆角 */
  --button-radius: var(--radius-lg);
  /* 按钮横向内边距。小程序 28rpx */
  --button-padding-x: var(--space-14);
  /* 按钮纵向内边距。小程序 14rpx */
  --button-padding-y: var(--space-7);
  /* 按钮字号。小程序 26rpx */
  --button-font-size: var(--font-size-md);
  /* 按钮字重 */
  --button-font-weight: var(--font-weight-semibold);
  /* 按钮最小高度 —— 保证触控可用性 */
  --button-min-height: var(--layout-touch-target);
  /* 卡片底色 */
  --card-bg: var(--surface-card);
  /* 卡片描边 */
  --card-border: var(--border-default);
  /* 卡片 hover 描边 */
  --card-border-hover: var(--border-strong);
  /* 卡片默认阴影 */
  --card-shadow: var(--shadow-sm);
  /* 卡片 hover 阴影 */
  --card-shadow-hover: var(--shadow-md);
  /* 卡片圆角。小程序 28rpx */
  --card-radius: var(--radius-2xl);
  /* 卡片内边距。由 14px 提到 20px —— 留白是这套视觉的主要表达手段，比加装饰更有效 */
  --card-padding: var(--space-20);
  /* 胶囊圆角 */
  --pill-radius: var(--radius-pill);
  /* 胶囊字号。小程序 22rpx */
  --pill-font-size: var(--font-size-xs);
  /* 胶囊横向内边距。小程序 16rpx */
  --pill-padding-x: var(--space-8);
  /* 胶囊纵向内边距。小程序 4rpx */
  --pill-padding-y: var(--space-2);
  /* 默认胶囊底色 */
  --pill-default-bg: var(--status-neutral-bg);
  /* 默认胶囊文字 */
  --pill-default-fg: var(--status-neutral-fg);
  /* 徽标圆角。小程序 8rpx */
  --badge-radius: var(--radius-sm);
  /* 徽标字号 */
  --badge-font-size: var(--font-size-xs);
  /* 徽标横向内边距。小程序 14rpx */
  --badge-padding-x: var(--space-7);
  /* 徽标纵向内边距。小程序 2rpx */
  --badge-padding-y: var(--space-1);
  /* 中性标签底 */
  --tag-neutral-bg: var(--status-neutral-bg);
  /* 中性标签字 */
  --tag-neutral-fg: var(--status-neutral-fg);
  /* 蓝色标签底 */
  --tag-blue-bg: var(--status-info-bg);
  /* 蓝色标签字 */
  --tag-blue-fg: var(--status-info-fg);
  /* 绿色标签底 */
  --tag-green-bg: var(--status-success-bg);
  /* 绿色标签字 */
  --tag-green-fg: var(--status-success-fg);
  /* 琥珀色标签底 */
  --tag-amber-bg: var(--status-warning-bg);
  /* 琥珀色标签字 */
  --tag-amber-fg: var(--status-warning-fg);
  /* 红色标签底 */
  --tag-red-bg: var(--status-danger-bg);
  /* 红色标签字 */
  --tag-red-fg: var(--status-danger-fg);
  /* 紫色标签底 —— 分类专用，无状态含义 */
  --tag-purple-bg: var(--color-purple-100);
  /* 紫色标签字 */
  --tag-purple-fg: var(--color-purple-700);
  /* 紫色标签亮档 —— 渐变终点用，避免与 fg 同色导致渐变塌成纯色 */
  --tag-purple-light: var(--color-purple-300);
  /* 青色标签底 —— 分类专用 */
  --tag-teal-bg: var(--color-teal-100);
  /* 青色标签字 */
  --tag-teal-fg: var(--color-teal-700);
  /* 提示框底色（默认/金色） */
  --note-bg: var(--color-gold-50);
  /* 提示框描边 */
  --note-border: var(--border-accent);
  /* 提示框正文 */
  --note-fg: var(--color-gold-700);
  /* 左侧强调竖条 */
  --note-accent-bar: var(--brand-accent);
  /* 左侧竖条宽度。小程序 8rpx */
  --note-bar-width: var(--border-width-thick);
  /* 提示框圆角 */
  --note-radius: var(--radius-md);
  /* 提示框内边距。小程序 20rpx */
  --note-padding: var(--space-10);
  /* 危险提示框底色 */
  --note-danger-bg: var(--color-red-50);
  /* 危险提示框描边 */
  --note-danger-border: var(--color-red-200);
  /* 危险提示框正文 */
  --note-danger-fg: var(--color-red-900);
  /* 危险提示框左侧竖条 */
  --note-danger-accent-bar: var(--status-danger-fg);
  /* 信息提示框底色 */
  --note-info-bg: var(--color-blue-100);
  /* 信息提示框描边 */
  --note-info-border: var(--color-blue-200);
  /* 信息提示框正文 */
  --note-info-fg: var(--color-blue-900);
  /* 信息提示框左侧竖条 */
  --note-info-accent-bar: var(--status-info-fg);
  /* 成功提示框底色 */
  --note-success-bg: var(--status-success-bg);
  /* 成功提示框描边 */
  --note-success-border: var(--color-green-600);
  /* 成功提示框正文 */
  --note-success-fg: var(--color-green-600);
  /* 成功提示框左侧竖条 */
  --note-success-accent-bar: var(--status-success-fg);
  /* 警告提示框底色 */
  --note-warning-bg: var(--status-warning-bg);
  /* 警告提示框描边 */
  --note-warning-border: var(--color-amber-600);
  /* 警告提示框正文 */
  --note-warning-fg: var(--color-amber-600);
  /* 警告提示框左侧竖条 */
  --note-warning-accent-bar: var(--status-warning-fg);
  /* 信息类徽标蓝 —— 刻意**不随主题翻转**：深色下它仍作为「信息」识别色压在深蓝渐变选中态上，翻转成亮金会与激活底色混淆。先例：site.headerBg */
  --tabs-badge-blue: #4a7ab5;
  /* 选中态下 neutral 徽标的近白底（92% 白）—— 在深蓝渐变按钮上保持可读又不至于纯白刺眼 */
  --tabs-badge-solid-on-brand: rgba(255, 255, 255, 0.92);
  /* 选中态下徽标的描边（70% 白）—— 否则近白徽标在白字按钮上消失 */
  --tabs-badge-on-brand-ring: rgba(255, 255, 255, 0.7);
  /* 表头底色。改为与卡片同色（即取消色带）—— 表头只需靠下边框与数据行分隔 */
  --table-header-bg: var(--surface-card);
  /* 表头文字。由品牌深蓝改为次要灰：表头是索引不是内容，不该与数据争视觉权重 */
  --table-header-fg: var(--text-secondary);
  /* 表头字重。semibold → medium，配合小字号与字距形成"轻标签"感 */
  --table-header-weight: var(--font-weight-medium);
  /* 表头字号。比正文小一档 */
  --table-header-font-size: var(--font-size-sm);
  /* 表头字距。全角中文下适度放开，读起来更从容 */
  --table-header-letter-spacing: 0.06em;
  /* 表头下边框。表头唯一的视觉分隔手段 */
  --table-header-border: var(--border-default);
  /* 数据行 hover 底色。替换斑马纹 —— 静态条纹制造噪音，交互高亮只在需要时出现 */
  --table-row-hover-bg: var(--surface-card-hover);
  /* 单元格文字。由 tertiary 提到 primary：数据是主角，不该比表头还淡 */
  --table-cell-fg: var(--text-primary);
  /* 行分隔线。用最浅一档，避免表格看起来像被切开 */
  --table-cell-border: var(--border-subtle);
  /* 表格字号。12px → 13px，配合行高加大提升可读性 */
  --table-font-size: var(--font-size-md);
  /* 单元格横向内边距。8px → 10px */
  --table-cell-padding-x: var(--space-10);
  /* 单元格纵向内边距。9px → 14px，行高是"呼吸感"最直接的来源 */
  --table-cell-padding-y: var(--space-14);
  /* 表格圆角。xl → 2xl，与卡片圆角一致 */
  --table-radius: var(--radius-2xl);
  /* 顶栏渐变底色 */
  --topnav-bg: var(--brand-gradient-brand);
  /* 顶栏文字 */
  --topnav-fg: var(--text-on-brand);
  /* 顶栏次要文字 */
  --topnav-fg-muted: var(--text-on-brand-muted);
  /* 顶栏高度 —— 仅 Web 端固定高度；小程序端由导航栏接管，不使用此令牌 */
  --topnav-height: 60px;
  /* 顶栏阴影 */
  --topnav-shadow: var(--shadow-nav);
  /* 顶栏告警徽标红 —— 刻意恒定不随主题翻转：它压在深蓝横幅（surface.inverse，两主题都是深色）上，翻转提亮反而读成浅色块；白字对它的对比度两个主题一致 */
  --topnav-alert-badge: #d64545;
  /* Hero 渐变底色 */
  --hero-bg: var(--brand-gradient-hero);
  /* Hero 主文字 */
  --hero-fg: var(--text-on-brand);
  /* Hero 次要文字 */
  --hero-fg-muted: var(--text-on-brand-muted);
  /* Hero 纵向内边距。小程序 40rpx */
  --hero-padding-y: var(--space-20);
  /* 页脚底色 */
  --footer-bg: var(--brand-primary);
  /* 页脚文字 —— 深蓝底上的柔和灰蓝 */
  --footer-fg: #aebfd2;
  /* 页脚字号 */
  --footer-font-size: var(--font-size-xs);
  /* 页脚行高 */
  --footer-line-height: var(--font-line-height-loose);
  /* 进度条槽底色 */
  --progress-track: var(--surface-subtle);
  /* 进度条填充渐变 */
  --progress-fill: var(--brand-gradient-accent);
  /* 进度条高度。小程序 14rpx */
  --progress-height: var(--space-7);
  /* 进度条圆角 */
  --progress-radius: var(--radius-pill);
  /* KPI 数值颜色 */
  --kpi-value-fg: var(--brand-primary);
  /* KPI 标签颜色 */
  --kpi-label-fg: var(--text-secondary);
  /* KPI 数值字号。小程序 34rpx */
  --kpi-value-size: var(--font-metric);
  /* KPI 标签字号。小程序 22rpx */
  --kpi-label-size: var(--font-size-xs);
  /* 深色底上 KPI 数值 —— 金色 */
  --kpi-on-dark-value-fg: var(--brand-accent-light);
  /* 深色底上 KPI 标签 */
  --kpi-on-dark-label-fg: var(--text-on-brand-muted);
  /* 深色底上 KPI 卡片底色。白色 7% 透明 */
  --kpi-on-dark-bg: rgba(255, 255, 255, 0.07);
  /* 深色底上 KPI 卡片描边。金色 30% 透明 */
  --kpi-on-dark-border: rgba(200, 162, 75, 0.3);
  /* 密级标签底色 —— 数据来自 red-600，实际渲染为 22% 透明叠加 */
  --secret-tag-bg: var(--color-red-600);
  /* 密级标签描边 */
  --secret-tag-border: rgba(255, 160, 158, 0.4);
  /* 密级标签文字 */
  --secret-tag-fg: #ffd9d7;
  /* 密级标签字号。小程序 20rpx */
  --secret-tag-font-size: var(--font-size-2xs);
  /* 顶栏高度。项目原型为 60px（web/style.css 的 .topnav .wrap），但那是纯文字栏的高度；此处额定 72px 以容纳品牌 logo（40px）与上下各 16px 留白 —— 顶栏高度同时决定 hero 的可用高度（见 .hero 的 calc），故必须是令牌而非散落的数字 */
  --site-header-height: 72px;
  /* 顶栏实底。原型 .header #1a3a5c（非渐变，区别于后台顶栏） */
  --site-header-bg: var(--color-navy-800);
  /* 深蓝横幅上的次要文字与链接。原型顶栏链接与 hero 副标题 #a8c4d8 —— 比 navy.50(#bcd0e6) 深一档，保证在白字标题旁有层级 */
  --site-on-brand-muted: #a8c4d8;
  /* 深蓝横幅上的半透明胶囊底（10% 白）。原型 .tagline rgba(255,255,255,.1)。 */
  --site-chip-bg: rgba(255, 255, 255, 0.1);
  /* 胶囊描边（20% 白）。原型 rgba(255,255,255,.2) */
  --site-chip-border: rgba(255, 255, 255, 0.2);
  /* 半透明胶囊 hover 底（17% 白）。落地页与认证页页脚的悬停反馈用 —— 加进令牌而非写死在样式里，由 stylelint 强制 */
  --site-chip-bg-hover: rgba(255, 255, 255, 0.17);
  /* 首屏底色。原型 landing：#1a3a5c → #2a5278 @135deg，即规范 d1→d2；与旧版共享样式里的 120deg #0f2742→#1b3a5c 是两套横幅，此页以自身原型为准。深色主题覆盖为全局页面底色（取消色带），见 04-theme-dark */
  --site-hero-bg: linear-gradient(135deg, var(--color-navy-800), var(--color-navy-700));
  /* 首屏下缘发丝线。浅色下是「深蓝横幅压在白页上」的收边；深色下覆盖为 transparent —— 没有色带时这条线无可收之边，留着就是一条悬空的金线 */
  --site-hero-edge: var(--border-accent);
  /* 落地页 CTA 金色。原型 .cta #c8a24b = gold.600 */
  --site-cta-bg: var(--color-gold-600);
  /* CTA hover。原型 #b8923b，介于 gold.600 与 gold.700 之间的实测值，按原型保留字面量 */
  --site-cta-hover: #b8923b;
  /* 页脚深蓝底。原型 .footer #0f1f33 —— 比 navy.900 更黑一点，与 hero 渐变拉开层次 */
  --site-footer-bg: #0f1f33;
  /* 名片带上的文字（等级名 + 一句话定位）。深蓝在三张带的最深一端都有 6.0–6.3:1 —— 带子是「深金属 → 浅金属」的竖向渐变，最深处在顶部。 */
  --tier-band-ink: var(--color-navy-900);
  /* 金卡：顶部实金 → 底部淡香槟。顶部那一段是「这张卡是金色的」的唯一来源，必须够实 */
  --tier-gold-band: linear-gradient(180deg, var(--color-gold-600), #ecd9ac);
  /* 卡片描边（35% 金）—— 有色相但不抢内容 */
  --tier-gold-ring: rgba(200, 162, 75, 0.35);
  /* 铂金卡＝磨砂钢：石墨钢 → 亮银。刻意取**无彩度**的灰（不是蓝灰）—— 与钻石的冰蓝拉开，两者若都偏蓝就会像同一张卡换了深浅 */
  --tier-platinum-band: linear-gradient(180deg, #9aa8b8, #dbe2ea);
  /* 卡片描边（35% 冷灰） */
  --tier-platinum-ring: rgba(143, 164, 188, 0.35);
  /* 钻石卡＝冰蓝：宝石蓝 → 浅冰。蓝的彩度明显高于铂金那张灰，色相也差得开 */
  --tier-diamond-band: linear-gradient(180deg, #7aa7d9, #cfe3f7);
  /* 卡片描边（40% 冰蓝）。蓝比金更需要一点重量，否则读成脏灰而不是「蓝边」 */
  --tier-diamond-ring: rgba(122, 167, 217, 0.4);
  /* 卡面通用金 —— 卡内金色元素（附属卡标题、头像字、关系胶囊字、钻石卡默认字色）。恒定 #c8a24b，不用 brand.accent：后者深色下翻转，会破坏「实体卡不随主题」的约定 */
  --vip-card-gold-accent: #c8a24b;
  /* 卡面主字（附属卡姓名）。语义上等同 text.inverse，单列以保持卡面语义闭环 */
  --vip-card-ink-on-dark: #ffffff;
  /* 卡面次字（编号行 / 名额说明，62% 白） */
  --vip-card-ink-on-dark-muted: rgba(255, 255, 255, 0.62);
  /* 卡面浅色叠加底（附属卡行底，4% 白） */
  --vip-card-veil-on-dark: rgba(255, 255, 255, 0.04);
  /* 弱金描边（42%）—— 附属卡行框、关系胶囊框 */
  --vip-card-gold-ring-soft: rgba(200, 162, 75, 0.42);
  /* 头像金描边（50%） */
  --vip-card-gold-ring-badge: rgba(200, 162, 75, 0.5);
  /* 卡外提示文字（60% 金）—— 出示提示语 */
  --vip-card-gold-tip-ink: rgba(200, 162, 75, 0.6);
  /* 卡面错误提示。恒定：暗底上的柔和红，不用 status.danger.fg（深色下会翻转提亮，卡页恒暗无需双态） */
  --vip-card-danger: #e08c85;
  /* 钻石卡页底 —— 近黑，与卡面拉开 */
  --vip-card-diamond-page-bg: #07090d;
  /* 钻石卡字色 = 通用金 */
  --vip-card-diamond-ink: var(--vip-card-gold-accent);
  /* 钻石卡面 —— 黑金属三段渐变 */
  --vip-card-diamond-face: linear-gradient(150deg, #0c1016, #141a24 60%, #0d1118);
  /* 卡面顶部金色晕光（16% 金） */
  --vip-card-diamond-glow: radial-gradient(120% 90% at 50% 0%, #c8a24b29, transparent 55%);
  /* 卡框（55% 金） */
  --vip-card-diamond-ring: rgba(200, 162, 75, 0.55);
  /* 内衬双线框（28% 金） */
  --vip-card-diamond-ring-inner: rgba(200, 162, 75, 0.28);
  /* inset 1px 亮圈（20% 金） */
  --vip-card-diamond-ring-soft: rgba(200, 162, 75, 0.2);
  /* inset 30px 金色氤氲（6% 金） */
  --vip-card-diamond-halo: rgba(200, 162, 75, 0.06);
  /* 卡投影 —— 卡面是本应用里唯一允许重投影的元素：实体隐喻需要悬浮感 */
  --vip-card-diamond-shadow: 0px 18px 50px 0px #00000099;
  /* 等级英文名 text-shadow（35% 金） */
  --vip-card-diamond-title-glow: rgba(200, 162, 75, 0.35);
  /* 铂金卡页底 —— 深银蓝 */
  --vip-card-platinum-page-bg: #0a1220;
  /* 铂金卡字色 —— 银白蓝 */
  --vip-card-platinum-ink: #c9d6e8;
  /* 铂金卡面 —— 银蓝金属三段渐变 */
  --vip-card-platinum-face: linear-gradient(150deg, #0d1626, #16283f 60%, #0c1422);
  /* 卡面顶部银蓝晕光（14%） */
  --vip-card-platinum-glow: radial-gradient(120% 90% at 50% 0%, #a0bee124, transparent 55%);
  /* 卡框（50% 银蓝） */
  --vip-card-platinum-ring: rgba(160, 190, 225, 0.5);
  /* 内衬双线框（26% 银蓝） */
  --vip-card-platinum-ring-inner: rgba(160, 190, 225, 0.26);
  /* 金卡页底 —— 深金棕近黑 */
  --vip-card-gold-tier-page-bg: #120d04;
  /* 金卡字色 —— 正金，比通用金亮半档以在棕黑底上立住 */
  --vip-card-gold-tier-ink: #d4af37;
  /* 金卡面 —— 金棕金属三段渐变 */
  --vip-card-gold-tier-face: linear-gradient(150deg, #171004, #2a1f0a 60%, #151004);
  /* 卡面顶部金棕晕光（15%） */
  --vip-card-gold-tier-glow: radial-gradient(120% 90% at 50% 0%, #d4af3726, transparent 55%);
  /* 卡框（50% 金） */
  --vip-card-gold-tier-ring: rgba(212, 175, 55, 0.5);
  /* 内衬双线框（26% 金） */
  --vip-card-gold-tier-ring-inner: rgba(212, 175, 55, 0.26);
  /* 搜索框宽度 */
  --table-filter-search-width: 280px;
  /* 筛选项下拉宽度 */
  --table-filter-select-width: 140px;
  /* 标签宽度 */
  --table-filter-label-width: var(--space-20);
  /* 元素间距 */
  --table-filter-gap: var(--space-4);
  /* 图标尺寸 */
  --empty-state-icon-size: 48px;
  /* 图标颜色 */
  --empty-state-icon-color: var(--text-secondary);
  /* 垂直内边距 */
  --empty-state-padding-y: var(--space-20);
  /* 骨架底色 */
  --skeleton-bg: var(--surface-subtle);
  /* 骨架高亮色 */
  --skeleton-highlight: var(--border-subtle);
  /* 动画时长 */
  --skeleton-duration: 1.5s;
  /* 骨架圆角 */
  --skeleton-radius: var(--radius-md);
  /* 表格/区块加载遮罩（80% 白） */
  --spinner-loading-mask: rgba(255, 255, 255, 0.8);
  /* 尺寸 */
  --spinner-size: 20px;
  /* 描边宽度 */
  --spinner-stroke-width: 2px;
  /* 颜色 */
  --spinner-color: var(--brand-primary);
  /* 坐标轴与图例文字 */
  --chart-text: var(--text-secondary);
  /* 坐标轴线 */
  --chart-axis: var(--border-strong);
  /* 网格分割线 */
  --chart-split: var(--border-subtle);
  /* 序列 1 */
  --chart-series1: var(--brand-primary);
  /* 序列 2 */
  --chart-series2: var(--brand-accent);
  /* 序列 3 */
  --chart-series3: var(--status-info-fg);
  /* 序列 4 */
  --chart-series4: var(--status-success-fg);
  /* 序列 5 */
  --chart-series5: var(--status-warning-fg);
}