以首页为样板页，展示「设计底座落地 + 氛围层 + 排版层级 + 可访问性」四类改动的实际效果。
改动前的问题不是「不够好看」，而是设计底座没落地 —— 88 个样式文件里 78% 绕过了 token。
左侧是改造前（HEAD 版本的真实取值），右侧是改造后。两侧均用 app.wxss 里的真实 token 渲染，1rpx = 0.5px。
#FF4F91 仅 3.10:1。
--mini-starfield 星点 + 夜空渐变 + 两个定位光晕（右上珊瑚粉、左下靛蓝）。全部用 CSS 渐变，零图片、零额外请求。
--gradient-brand-solid → 4.73:1；文字链接换 --color-primary-strong → 5.33:1。
padding:0 顶到屏幕边缘。
这是本轮改动里唯一一处「功能级」缺陷修复，值得单独看。
品牌色分级是这一版最重要的结构性决定：基础品牌色 #E96B6B 无论做背景还是做文字都不满足 4.5:1，因此拆成三个语义层。
| Token | 取值 | 对比度 | 用途限制 |
|---|---|---|---|
--color-primary |
#E96B6B | 3.10:1 | 仅大色块、渐变、光晕、图标底。禁止承载文字。 |
--color-primary-strong |
#B8434A | 5.33:1 | 所有品牌色文字、小图标、纯文字链接。 |
--color-primary-solid |
#C24C50 | 4.73:1 | 实心按钮底（配白字）、小徽标底色。 |
--gradient-brand |
#FF6A78 → #E96B6B | 2.77:1 | 明亮活泼，仅装饰填充，不得压白字。 |
--gradient-brand-solid |
#C24C50 → #B8434A | 4.73 ~ 5.33 | 所有承载白字的 CTA 渐变（本轮新增）。 |
--color-text-tertiary |
#777 → #646C85 | 5.22:1 | 说明文字。旧值 4.48:1 卡在阈值下沿。 |
--mini-glow-coral / --mini-glow-indigo |
rgba 粉 / 蓝 | — | 夜空光晕层（本轮新增，参考图关键特征）。 |
--mini-starfield |
5 个径向渐变 | — | 星点层（本轮新增），叠在夜空渐变之上。 |
--mini-glass / --mini-hairline |
rgba(255,255,255,.10/.16) | — | 深底玻璃面与分隔线（本轮新增）。 |
--tap-min / --tap-gap |
88rpx / 16rpx | 44px | 触摸目标下限与最小间距（本轮新增）。 |
--ease-spring / --press-scale |
cubic-bezier(.34,1.4,.64,1) / 0.97 | — | 按压回弹与缩放（本轮新增）。 |
不只是样式替换 —— 其中三条是会被静默吞掉的语法级错误。
recommend-card、discover、service-station 里出现
box-shadow:…rgba(255,79,145,.18)min-width:var(--tap-min); 这类缺少分号的合并声明。
浏览器会把整条声明判为非法并丢弃 —— 于是「喜欢」按钮的 44px 热区与阴影双双静默失效，
而花括号平衡、hex 配额等所有静态检查仍然全绿。--button-press-feedback、--color-bg-input 此前从未定义，
导致过渡动画与输入框背景直接失效（无报错、无告警）。@media (max-width:340px) 里 .empty-actions{display:none}，
在窄屏机型上把「调整条件 / 公益红娘」两个入口整块移除，属功能级缺陷。.safety-card{padding:0} 覆盖了 .section 的左右内边距，
该卡片比其它区块宽 48rpx、直接贴到屏幕边缘。min-height:auto、
「喜欢」键 31px、区块标题右侧 action 18px —— 全站已统一到 44px 下限。以下为实际执行结果，非声明性描述。
background 多层渐变与 radial-gradient 需要在真机（iOS / Android 各一台）复验，尤其确认低端机上不出现色带。