/* ============================================================ WOJIA OS 设计令牌 v4 · 微信风（WeUI 口径） 唯一色彩来源：组件只允许引用本文件变量。 UI 主色 = 微信绿 #07C160；海报内容色 = 品牌松绿（见 --poster-*）。 明 / 暗两套主题，暗色经 [data-theme="dark"] 切换。 V2.46.0 桌面化：本系统仅桌面端使用（手机端=小程序/移动H5 独立承载， 小屏布局手法见 docs/mobile-legacy.md 留档册）；文末附小程序映射台账。 ============================================================ */ :root { /* ---- 品牌 / 功能色（UI 层）---- 默认皮肤 = 五行金（李叔 2026-10-09「五行色都上吧，默认 五行金」）。 微信绿等其余五套皮肤走文末「皮肤系统」段 [data-skin] 覆盖，此处即金的值。 */ --brand: #B8860B; /* 主按钮、选中态、强调 · 赤金 */ --brand-press: #A2760A; /* 按下 */ --brand-soft: #F7EED8; /* 主色浅底 */ --danger: #FA5151; --danger-soft: #FDEBEB; --danger-tint: #FFFCFC; /* 最淡一层红：整块元素的"不合格"底色，几乎白但带指向 */ --danger-soft-hover: #FADFDF; /* 危险浅底的悬浮态（必须比常态深，否则 hover 没反馈） */ --warn: #FA9D3B; --warn-soft: #FDF3E7; --link: #10AEFF; --link-wechat: #576B95; /* 微信链接蓝（KB 来源卡 / 引用 / 图例），比 --link 沉稳 */ --link-soft: #EEF1F7; /* 链接蓝的浅底 */ --paper: #F7F5F0; /* 纸张米白：登录页底 / 页面浅色纸张预览。两主题同值（纸不随主题变色），勿移入 dark 段 */ --gold: #C9A227; /* 点缀（会员、推荐标） */ --gold-soft: #F7F0DA; /* 暖金浅底 */ --on-gold: #8A6D14; /* 暖金浅底上的前景（比 --gold 更深，保证可读） */ --on-warn: #B25E09; /* 琥珀浅底（--warn-soft）上的前景； --warn 本体太浅，压在 soft 底上读不清，专有前景要另给一档 */ --fx-mint: #3DE8B0; /* 引擎控制台青绿（品牌绿同色相延伸，仅生成动效） */ --fx-ink: #07120D; /* 控制台舱底（品牌松绿压至极暗，非纯黑） */ /* ---- 海报内容色（仅预览/导出海报内使用，不进入界面组件） ---- */ --poster-pine: #1E7A46; --poster-pine-bright: #2E9159; --poster-gold: #C9A227; --poster-red: #C42A1F; /* 批三八四：UI 层的品牌松绿（确认=内容落账的按键色，与主操作金分工）。 值与 --poster-pine 同源（品牌松绿不動），但用途在界面组件层—— 小程序侧同名令牌即 --pine，两端同值。 */ --pine: #1E7A46; /* ---- 中性色（浅色） ---- */ --bg: #F7F7F7; /* 页面灰底 */ --card: #FFFFFF; /* 卡片 */ --card-2: #FAFAFA; /* 卡片内嵌区块 */ --topbar: #FFFFFF; --text: rgba(0, 0, 0, 0.90); --text-2: rgba(0, 0, 0, 0.55); --text-3: rgba(0, 0, 0, 0.35); --line: rgba(0, 0, 0, 0.08); --line-strong: rgba(0, 0, 0, 0.14); --mask: rgba(0, 0, 0, 0.55); --hover: rgba(0, 0, 0, 0.03); /* ---- 可读性底线（批一三一 外壳重构立） ---- --text-3（0.35 黑）在白底上只有 2.4:1，11px 小字读不清。凡是「要被读到」的 界面文字一律 ≥ --t3；--text-3 只留给纯装饰（分隔线、占位底纹）。 老代码里的 --text-3 不强行替换（一次动太多），新写/重写的区块按本条走。 */ --t3: rgba(0, 0, 0, 0.55); /* ---- 动效曲线（批一三一） ---- 交互反馈用 --ease（160ms 级，进出都干脆）； 容器出入用 --ease-soft（240–280ms，收尾软，不弹跳）。不许各自现造 cubic-bezier。 批四五四 增第三档 --dur-glide：**进度条滑行专用**——500ms 心跳下一次位移动画， 时长必须 ≥ 心跳间隔，否则条子"走一步冻三步"（批四〇二~四一五 300ms 心跳 + 160ms 过渡的蠕颤感，李叔 10-14 判「太粗俗」的真因之一）。与既有档位不重叠，不替换。 */ --ease: cubic-bezier(.2, .8, .2, 1); --ease-soft: cubic-bezier(.16, 1, .3, 1); /* ---- 字体家族（全项目唯一栈：UI / 海报预览 / 导出 HTML 同口径） ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace; /* 引擎控制台数字/日志 */ /* ---- 文字令牌 v7（HIG 阶梯 ×0.9 整体缩小，2026-09-27 李叔定） ---- 每级差 ≥1.5px 保持可辨，字号+字重+颜色三重分层不变。 HIG 样式 本令牌 用途 字重/颜色 */ --t-page: 21.5px; /* Title 2 → 页标题 / 页眉大标题 700 + text */ --t-card: 16px; /* Headline → 卡片标题 / 强调行 600 + text */ --t-body: 14.5px; /* Body → 正文 / 按钮 400 + text */ --t-aux: 12.5px; /* Subhead → 辅助说明 400 + text-2 */ --t-weak: 11px; /* Caption 1 → 最弱提示 / 时间戳 400 + text-3 */ --lh: 1.55; /* ---- 圆角 / 间距 / 阴影 ---- */ --r-s: 6px; --r-m: 8px; --r-l: 12px; --gap: 16px; /* 卡片间距 */ --pad: 20px; /* 卡片内边距 */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.18); /* ============================================================ UI 语言层（批一四九归纳 · 从批一三二~一四八六屏重构沉淀） ------------------------------------------------------------ 为什么有这一段：体检发现同一句 UI 语言在全仓写了几十遍—— border-radius 14px 22 处 / 按钮圆角 10px 49 处 / 胶囊 999px 50 处 / transition .16s 49 处 / translateY(-1px) 19 处 / 绿晕 9 处 / 输入框 44px 14 处 / 空态 48px 7 处 / tabular-nums 46 处， 而 KPI 格写了 7 套、空态写了 14 套、chips 写了 15 套。 每处一套数字，改一次要摸六七个文件，必然走形。 规矩：**新写的 CSS 一律消费这里的令牌，不许再写魔法值**（守闸 tests/tokens-guard.test.mjs 第③条钉 about.css 做示范， 后续每改一段就把它加进"零魔法值"名单）。 明/暗：除 --shadow-hover / --focus-ring 在深底上要加浓（见 dark 段）， 其余令牌两主题同值，跟着 :root 走即可。 注意：媒体查询里**不能**用 var()（CSS 规范限制），断点靠约定—— 900 / 760 / 460 三档，写在本文件台账里，不要各自编数字。 ============================================================ */ --r-card: 14px; /* 卡片 / 面板（12px 是旧值，新写一律 14） */ --r-btn: 10px; /* 按钮 / 输入框 / 可点小卡 */ --r-pill: 999px; /* 胶囊：标签 / chips / 版本标 / 徽章 */ --dur: .16s; /* 交互反馈：悬浮 / 描边 / 背景切换 / 按钮 */ --dur-fast: .14s; /* 更轻的反馈：chips / 次要控件 */ --dur-glide: .5s; /* 进度条滑行：≥ 心跳 500ms，条子连续不踏步（批四五四，配 --ease-soft） */ --lift-1: translateY(-1px); /* 悬浮微抬（行 / 格） */ --lift-2: translateY(-2px); /* 悬浮抬升（卡片级） */ --shadow-hover: 0 4px 12px rgba(26, 26, 26, .07); /* 悬浮时的投影 */ --focus-ring: 0 0 0 3px rgba(184, 134, 11, .12); /* 聚焦晕（输入框等）·随皮肤 */ --shadow-brand: 0 4px 12px rgba(184, 134, 11, .30); /* 主行动按钮悬浮：品牌色外发光 */ --shadow-brand-lg: 0 8px 24px rgba(184, 134, 11, .42); /* 主行动按钮按下 / 强强调 */ --shadow-up: 0 -2px 12px rgba(0, 0, 0, .06); /* 向上投影：吸底操作栏（方向是意图，不并入常规档） */ --shadow-knob: 0 1px 3px rgba(0, 0, 0, .20); /* 滑块 / 圆点的小实体影 */ --num: tabular-nums; /* 数字等宽：金额 / 版本号 / 表格 / 计数 */ --h-ctl: 44px; /* 标准控件高度：输入框 / 主按钮 / 胶囊按钮统一 */ --pad-empty: 48px; /* 空态上下留白 */ --white: #FFFFFF; /* 物理纯白常量：开关滑块 / 深蒙层上的字 / 白版 logo。 注意它不是「深色下的反色」——两主题同值，不随 dark 翻转。 */ --on-brand: var(--white); /* 品牌实底（--brand / --brand-press）上的前景。 语义层：日后品牌色若调浅，改这一行即可，不用满仓找 #fff。 */ /* ---- 线的层级只有两级（批一四九收敛） ---- 历史教训：曾冒出第三级 --line-soft，但它从未定义 → var() 静默失效 → border-color 退回初始值 currentColor → 真实渲染成**黑边**（批一四九清债时， app.css 的 .dl-opt / .dl-fl 就顶着黑边跑了很久没人发现）。 想要更淡的线就用 --line，不要再造第三级；真需要加层级，先在这里定义。 */ --brand-strong: #8B6909; /* 品牌实心底（hover 填充用）·默认金；此前只有 fallback 没有定义 */ /* ---- 布局 ---- */ --topbar-h: 60px; --nav-w: 240px; /* 批一三一：216 → 240（组头缩短线 + 条目呼吸，216 挤） */ --rail-w: 64px; /* 桌面窄窗（901–1280px）图标窄栏 */ --wrap: 1080px; --app-min-w: 760px; /* 桌面底线（批一三七 1080→760）：李叔 10-07 要求小屏不堆叠不截断； 全屏重构批一三二~一三五各屏均已带 760 响应式段，760 以下出横滚兜底 */ } [data-theme="dark"] { --brand: #B8860B; --brand-press: #A2760A; --brand-soft: rgba(184, 134, 11, 0.18); --link-wechat: #7A9EC2; /* 深底上链接蓝要提亮 */ --link-soft: rgba(87, 107, 149, 0.18); --danger-soft: rgba(250, 81, 81, 0.14); --danger-tint: rgba(250, 81, 81, 0.06); --danger-soft-hover: rgba(250, 81, 81, 0.22); --gold-soft: rgba(201, 162, 39, 0.16); --on-gold: #DDBC4E; /* 深底上要提亮，否则像脏黄 */ --on-warn: #FFB85C; /* 深底上琥珀前景要比 light 更亮 */ --warn-soft: rgba(250, 157, 59, 0.14); --bg: #111111; --card: #1E1E1E; --card-2: #262626; --topbar: #191919; --text: rgba(255, 255, 255, 0.86); --text-2: rgba(255, 255, 255, 0.55); --text-3: rgba(255, 255, 255, 0.32); --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); --mask: rgba(0, 0, 0, 0.65); --hover: rgba(255, 255, 255, 0.05); --t3: rgba(255, 255, 255, 0.55); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.55); /* UI 语言层：深底上浅色墨投影几乎看不见（原来的 rgba(26,26,26,.07) 等于没有投影）， 悬浮抬升必须靠更浓的黑影才立得住；绿晕同理要加重，否则聚焦看不出来。 */ --brand-bright: #E9C46A; /* dark 下替代品牌色做文字级亮色（版本号 / 更新条目 / 强调词）·默认金 */ --shadow-hover: 0 4px 14px rgba(0, 0, 0, .38); --focus-ring: 0 0 0 3px rgba(184, 134, 11, .22); } /* ============================================================ 皮肤系统（批二三一 · 李叔 2026-10-09「五行色都上吧，默认 五行金」） 机制：html[data-skin] 属性切肤，与 [data-theme] 正交组合；零属性 = 五行金默认。 皮肤只覆盖 brand 五件套 + focus-ring + shadow-brand； 海报内容色 --poster-* / 引擎台 --fx-* / favicon 与顶栏 mark 品牌固定色不参与。 五行出处：金白（赤金承载底）、木青（东）、水玄（北）、火赤（南）、土黄（中央）。 ============================================================ */ /* 微信绿（原默认主色，五件套原值保真，可随时回退） */ [data-skin="wechat"] { --brand: #07C160; --brand-press: #06AD56; --brand-soft: #E8F8EF; --brand-strong: #17633A; --focus-ring: 0 0 0 3px rgba(7, 193, 96, .12); --shadow-brand: 0 4px 12px rgba(7, 193, 96, .30); --shadow-brand-lg: 0 8px 24px rgba(7, 193, 96, .42); } [data-theme="dark"][data-skin="wechat"] { --brand-soft: rgba(7, 193, 96, 0.14); --brand-bright: #7BC79B; --focus-ring: 0 0 0 3px rgba(7, 193, 96, .22); } /* 木 · 青（东方）：松石青 */ [data-skin="wood"] { --brand: #1F8A70; --brand-press: #177A62; --brand-soft: #E3F3EE; --brand-strong: #12604F; --focus-ring: 0 0 0 3px rgba(31, 138, 112, .12); --shadow-brand: 0 4px 12px rgba(31, 138, 112, .30); --shadow-brand-lg: 0 8px 24px rgba(31, 138, 112, .42); } [data-theme="dark"][data-skin="wood"] { --brand-soft: rgba(31, 138, 112, 0.18); --brand-bright: #5ECFB4; --focus-ring: 0 0 0 3px rgba(31, 138, 112, .22); } /* 水 · 玄（北方）：靛青 */ [data-skin="water"] { --brand: #3E5C8F; --brand-press: #33507F; --brand-soft: #E8EEF7; --brand-strong: #2A4468; --focus-ring: 0 0 0 3px rgba(62, 92, 143, .12); --shadow-brand: 0 4px 12px rgba(62, 92, 143, .30); --shadow-brand-lg: 0 8px 24px rgba(62, 92, 143, .42); } [data-theme="dark"][data-skin="water"] { --brand-soft: rgba(62, 92, 143, 0.20); --brand-bright: #8FB0E0; --focus-ring: 0 0 0 3px rgba(62, 92, 143, .22); } /* 火 · 赤（南方）：朱砂（与 --danger 红系保持色相距离，danger 语义不受染） */ [data-skin="fire"] { --brand: #C9432A; --brand-press: #B03A22; --brand-soft: #F9E9E4; --brand-strong: #8F2E1B; --focus-ring: 0 0 0 3px rgba(201, 67, 42, .12); --shadow-brand: 0 4px 12px rgba(201, 67, 42, .30); --shadow-brand-lg: 0 8px 24px rgba(201, 67, 42, .42); } [data-theme="dark"][data-skin="fire"] { --brand-soft: rgba(201, 67, 42, 0.18); --brand-bright: #F09078; --focus-ring: 0 0 0 3px rgba(201, 67, 42, .22); } /* 土 · 黄（中央）：赭土 */ [data-skin="earth"] { --brand: #8B5A2B; --brand-press: #7A4E24; --brand-soft: #F5EADD; --brand-strong: #6B431C; --focus-ring: 0 0 0 3px rgba(139, 90, 43, .12); --shadow-brand: 0 4px 12px rgba(139, 90, 43, .30); --shadow-brand-lg: 0 8px 24px rgba(139, 90, 43, .42); } [data-theme="dark"][data-skin="earth"] { --brand-soft: rgba(139, 90, 43, 0.18); --brand-bright: #D9A96A; --focus-ring: 0 0 0 3px rgba(139, 90, 43, .22); } /* ============================================================ 小程序映射台账（V2.46.0 立 · 后续迭代纪律） 网页端样式只允许引用本文件变量；新增令牌当次必须在本台账补一行映射。 小程序 / 移动 H5 施工时按台账批量生成 WXSS 变量文件； 小屏布局手法查 docs/mobile-legacy.md 留档册。 ------------------------------------------------------------ 换算口径：色值直搬；尺寸 px × 2 = rpx（iPhone 6 基准 375pt）。 ------------------------------------------------------------ --brand #07C160 → --brand （主按钮/选中态） --poster-pine #1E7A46 → --pine （品牌内容色，海报层） --gold #C9A227 → --gold （暖金点缀） --bg #f7f5f0 → --bg （页面底色） --card #ffffff → --card （卡片底） --line #e5e2da → --line （分隔线） --text/--text-2/--text-3 → 同名 （三级文字） --t-body 14px / --t-aux 13px / --t-weak 12px → ×2 = 28/26/24 rpx --radius 系（10/14px） → ×2 = 20/28 rpx --shadow-1/2/3 → 同名（小程序支持 box-shadow） 布局令牌（--topbar-h/--nav-w/--rail-w/--wrap/--app-min-w） 不映射：小程序无顶栏/侧栏概念，导航走原生 tabBar（信息架构取舍 见 docs/mobile-legacy.md 第一节）。 ------------------------------------------------------------ UI 语言层（批一四九新增）： --r-card 14 / --r-btn 10 / --r-pill 999 → 28 / 20 / 999（胶囊不缩放） --dur .16s / --dur-fast .14s → 同名（动效时长不缩放） --lift-1 / --lift-2 → 不映射（手机无悬浮态） --shadow-hover / --focus-ring → 同名；focus-ring 手机端基本用不上 --shadow-brand / --shadow-brand-lg → 同名（主行动按钮悬浮/按下的品牌绿影） --shadow-up / --shadow-knob → 不映射（手机无吸底栏 / 无悬浮控件） --h-ctl 44 / --pad-empty 48 → 88 / 96 --num tabular-nums → 同名（WXSS 支持有限，退等宽字体栈） --white / --on-brand #FFFFFF → 同名（纯白不缩放、不随主题翻转） --gold-soft / --on-gold / --on-warn → 同名（状态标签 / 提示条的前后景） --danger-tint / --danger-soft-hover → 同名（不合格底色 / 危险行的悬浮态） --link-wechat / --link-soft → 同名（引用/来源的蓝，深底提亮） --paper → 同名（纸张米白不随主题翻转） --brand-bright → 同名（dark 文字级亮绿；light 段不消费） 断点约定（媒体查询不支持 var()，只能靠约定）：900 / 760 / 460 三档； 换算参考：760px ≈ 420pt，460px ≈ 375pt（iPhone 6/SE 基准）。 ============================================================ */