/* ============================================================ Design Tokens — kc.chuangkeyundns.com 前台 (zsff) 单一事实源：品牌色 / 文字灰阶 / 背景 / 字号 / 间距 / 圆角 / 阴影 均由此定义。引入位置：style.html（reset.css 之后，style.css 之前）。 说明：token 取值对齐【当前线上真实调色板】，因此把散落的十六进制 替换为 var(--token) 时视觉等价（零风险）；唯一刻意改变的是价格红—— 原 #ff4a4a / #ea2f2f / #e93323 / #ff5656 四种红统一为单一 --c-price， 达成"6 红→1"的审计 P1 目标。 ============================================================ */ :root{ /* —— 品牌与主色（蓝系） —— */ --c-primary:#2c8eff; /* 主导航蓝：按钮 / 链接 / 激活态（原 #2c8eff） */ --c-primary-light:#409dff; /* 浅蓝：渐变 / 悬停（原 #409dff / #539dfd / #509efb） */ --c-primary-dark:#2c65f7; /* 深蓝：渐变起点（原 #2c65f7） */ /* —— 语义强调色 —— */ --c-accent:#ff6b00; /* 橙：免费 / CTA（原 #ff6b00） */ --c-price:#ff4a4a; /* 价格 / 错误红：#ff4a4a/#ea2f2f/#e93323/#ff5656 → 单值 */ --c-gold:#eeb669; /* 金币 / 会员金（原 #eeb669） */ --c-success:#3ab034; /* 成功绿（原 #3ab034） */ /* —— 文字灰阶 —— */ --c-text-1:#282828; /* 主文字 / 标题（原 #282828） */ --c-text-2:#333333; /* 次级文字（原 #333333 / #343434 统一） */ --c-text-3:#6b7280; /* 辅助 / 占位（原 #6b7280，#fff 上 4.6:1 达 WCAG AA） */ --c-text-4:#9a9a9a; /* 弱化文字（原 #9a9a9a） */ /* —— 背景与边框 —— */ --c-bg-page:#f5f5f5; /* 页面底色（原 #f5f5f5 / #f2f2f2 统一） */ --c-bg-card:#ffffff; /* 卡片底（原 #ffffff） */ --c-white:#ffffff; /* 纯白（文字 / 底） */ --c-border:#eeeeee; /* 分隔线（原 #eeeeee / #e6e6e6 统一） */ /* —— 字号阶梯（rem@375 屏，1rem=50px） —— */ --fs-xs:.24rem; /* 12px 次要文字下限 */ --fs-sm:.26rem; /* 13px 正文下限 */ --fs-base:.28rem; /* 14px */ --fs-md:.32rem; /* 16px */ --fs-lg:.36rem; /* 18px */ --fs-xl:.44rem; /* 22px 区块标题 */ /* —— 间距韵律（8px 基准，1rem=50px） —— */ --sp-1:.08rem; /* 4px */ --sp-2:.16rem; /* 8px */ --sp-3:.24rem; /* 12px */ --sp-4:.32rem; /* 16px */ --sp-5:.40rem; /* 20px */ --sp-6:.48rem; /* 24px */ --sp-8:.64rem; /* 32px */ /* —— 圆角 —— */ --radius-sm:.08rem; --radius-md:.16rem; --radius-lg:.24rem; --radius-pill:999px; /* —— 阴影 —— */ --shadow-card:0 .02rem .2rem rgba(0,0,0,.06); --shadow-pop:0 .04rem .24rem rgba(0,0,0,.12); } /* 暗色主题（预留）：仅当 时启用，默认不触发。 品牌/语义色（蓝/橙/红/金/绿）在深色上也成立，保持原值； 中性色（文字/背景/边框）完整反转。完整视觉暗色仍依赖组件层 逐步 token 化（见审计 P1 后续 + 本文件组件类），当前为可切换地基。 */ :root[data-theme="dark"]{ /* 品牌/语义色保留 */ --c-primary:#2c8eff; --c-primary-light:#409dff; --c-primary-dark:#2c65f7; --c-accent:#ff6b00; --c-price:#ff6a6a; /* 深色上略提亮，保证对比 */ --c-gold:#f0c27a; --c-success:#54c95a; /* 中性色反转 */ --c-text-1:#f2f4f7; --c-text-2:#c2c9d2; --c-text-3:#9aa3ad; --c-text-4:#7b8492; --c-bg-page:#0f1115; --c-bg-card:#1a1d23; --c-white:#ffffff; --c-border:#2a2e36; --shadow-card:0 .02rem .2rem rgba(0,0,0,.4); --shadow-pop:0 .04rem .24rem rgba(0,0,0,.55); } /* 暗色画布底座：在未被内联样式覆盖处生效（index.html 的 body 内联背景 属已知例外，需后续移除内联才能全量翻转）。 */ :root[data-theme="dark"] body, :root[data-theme="dark"] #app{ background-color:var(--c-bg-page); color:var(--c-text-2); } /* ============================================================ 通用组件类（token 化，供模板逐步接入；当前为设计系统底座） ============================================================ */ .card{ background:var(--c-bg-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); } .section-title{ font-size:var(--fs-xl); font-weight:600; color:var(--c-text-1); } .price{ color:var(--c-price); font-weight:600; } .tag{ display:inline-block; padding:0 var(--sp-2); font-size:var(--fs-xs); line-height:1.6; color:var(--c-white); background:var(--c-primary); border-radius:var(--radius-sm); } .btn-primary{ display:inline-flex; align-items:center; justify-content:center; color:var(--c-white); background:var(--c-primary); border-radius:var(--radius-md); }