/* ===================================================================== 行健 XINGJIAN · 设计令牌（Design Tokens）v1.0 --------------------------------------------------------------------- 唯一真源。全站（网站 / AI 伴侣 / 学习模块）共用同一套变量， 改这里一处，三个产品同步生效。 所有引用均写成 var(--xj-xxx, fallback) 形式： 即使本文件加载失败，页面仍有正确的兜底值，不会崩样式。 2026-09-01 建立 ===================================================================== */ :root { /* --------------------------------------------------------------- 1. 色彩 主绿沿用既有品牌资产 #0e9f6e；辅助色全部降饱和，避免高对比 带来的紧张感（疗愈场景）。 --------------------------------------------------------------- 重要：#0e9f6e 在白底对比度仅 3.35:1，只够大字号/填充使用。 小字号文字一律用 --xj-green-ink（#0b7a54，对比度 5.19:1，达 WCAG AA）。 --------------------------------------------------------------- */ /* 品牌色 */ --xj-green: #0e9f6e; /* 填充绿：按钮底、图标、装饰 · 白底对比度 3.35:1（仅大字号/填充）*/ --xj-green-ink: #0b7a54; /* 文字绿：小字号文字 · 白底对比度 5.19:1（达 AA）*/ --xj-green-deep: #075c40; /* 深绿：标题强调 · 对比度 7.4:1（达 AAA）*/ --xj-green-mist: #e8f5ef; /* 绿雾：浅底、标签背景 */ /* --------------------------------------------------------------- 品牌绿完整色阶（2026-09-15 补） 背景：换肤（B 端白标）需要「改一个基色、整族跟随」。此前代码里 散着 9 个绿族色值的硬编码，只改 --xj-green 会出现「按钮变了、 渐变和描边还是绿的」这种半截换肤。这里把实际在用的色阶全部 登记为语义变量，默认值 = 收敛前的现状值（视觉零变化）。 换肤时不必逐个手填：xj-flavor.js 的 accent 派生会由主色自动 算出一族，也可用 accentScale 逐项覆盖。 --------------------------------------------------------------- */ --xj-green-strong: #0b6b43; /* 浓绿 · 渐变深端、强调底 */ --xj-green-wash: #ecfdf5; /* 洗绿 · 极浅底、AI 气泡 */ --xj-green-mint: #b8efd1; /* 薄荷 · 浅描边、装饰线与环形 */ --xj-green-edge: #a8d5bd; /* 薄荷深 · 头像环等描边（2026-09-15 补） */ --xj-green-lite: #34d399; /* 亮绿 · 渐变亮端、柱状图顶 */ --xj-green-emerald: #10b981;/* 翡翠绿 · 在线状态点 */ --xj-green-rgb: 14,159,110; /* 主绿通道值 · 供 rgba(var(--xj-green-rgb),.18) 使用 */ /* 辅助色的深版（2026-09-15 补：品牌图标里在用的中间调，原先散在代码中）*/ --xj-sky-deep: #4f8b83; /* 深天青 · 图标层次 */ --xj-moss-deep: #6fa594; /* 深苔绿 · 图标层次 */ /* 辅助色（降饱和，疗愈调性）*/ --xj-sky: #5b8c85; /* 天青 · 天行健之「天」，沉静 */ --xj-moss: #7fa899; /* 苔绿 · 舒缓 */ --xj-clay: #c08a6e; /* 陶土 · 人的温度 */ /* ============================================================= 第三辅助色 · 疗愈粉（Healing Rose）—— 官方情感语义色 2026-09-02 正式登记入 VI 令牌体系。 ------------------------------------------------------------- 定位：与「主绿=健康/行动」「赭=警示」并列的情感/疗愈专用色， 承载「环一·爱」的语义（家庭圈/疗愈陪伴/情感表达）。 用于：疗愈陪伴、家庭圈情感区块、声音家书、家风传承等 「向内、滋养、被陪伴」的场景，与「绿=向外、进取、行动」区分。 ------------------------------------------------------------- 同样是填充/文字双版本：#e8617d 白底对比度 3.24:1， 小字一律用 --xj-heal-ink（对比度 4.93:1，达 WCAG AA）。 ============================================================= */ --xj-heal: #e8617d; /* 疗愈粉 · 填充、图标 */ --xj-heal-ink: #c2415f; /* 疗愈粉（文字版）· 对比度 4.93:1，达 AA */ --xj-heal-mist: #fdeef0; /* 粉雾 · 浅底 */ /* 中性色 */ --xj-ink: #2b3a34; /* 墨 · 正文与标题（不用纯黑）*/ --xj-ink-2: #5f6f69; /* 次要文字 */ --xj-ink-3: #8a9a93; /* 辅助/占位文字 */ --xj-paper: #faf8f4; /* 米白 · 纸感底 */ --xj-surface: #ffffff; /* 卡片面 */ --xj-surface-2: #f4f3ee; /* 次级面（输入框、分组底）*/ --xj-line: #eceae3; /* 分割线 */ --xj-line-2: #d9d6cd; /* 强调分割线 */ /* 功能色 警示用赭不用纯红 —— 红色激活警觉与紧张，与疗愈场景冲突， 也与 VI 规范一致（见 compliance.html 第 01 章）。 */ --xj-ochre: #b4623f; /* 赭 · 警示/删除/暂停（替代 #dc2626 纯红）*/ --xj-ochre-mist: #fdf6f3; /* 赭雾 · 警示浅底 */ --xj-amber: #d9a441; /* 暖黄 · 提醒（非警示）*/ --xj-amber-mist: #fff4d6; /* 深色模式（P3 落地，先占位）*/ --xj-dark-bg: #1f2a26; --xj-dark-surface: #2a3a34; --xj-dark-text: #dde6e2; --xj-dark-text-2: #9fb0a9; /* --------------------------------------------------------------- 2. 字体 全部 SIL OFL 1.1 免费商用，可商标、可嵌入、无需付费与署名。 见 fonts.html。 --------------------------------------------------------------- */ --xj-font-serif: "LXGW WenKai Screen", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif; --xj-font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --xj-font-kai: "LXGW WenKai Screen", "LXGW WenKai", "Klee One", cursive, serif; /* 国内实情说明：Google Fonts（思源系列）在国内访问不稳定，硬引会拖慢首屏。 因此只加载一个字体——霞鹜文楷 Screen 版（BootCDN，国内可用，SIL OFL 免费商用）， 它自带楷体韵味，最契合疗愈调性，同时承担标题与情感文案。 正文保持系统无衬线栈（零加载、性能好），思源黑体作为"用户若已安装则优先"的前置项。 */ /* 字号：4 级，正文底线 17px（适老化铁律）。禁止 <13px 的任何界面文字。 */ --xj-fs-title: 22px; /* 页面标题 */ --xj-fs-card: 18px; /* 卡片标题 */ --xj-fs-body: 17px; /* 正文（底线）*/ --xj-fs-note: 14px; /* 次要说明（底线）*/ /* 行高：正文 1.8–2.0（疗愈感），功能 1.5–1.65 */ --xj-lh-body: 1.8; --xj-lh-tight: 1.6; /* 字距：正文略松有呼吸；标题展 */ --xj-ls-body: 0.03em; --xj-ls-title: 0.06em; /* --------------------------------------------------------------- 3. 圆角：3 档（原网站 21 种、伴侣 16 种，统一收敛） --------------------------------------------------------------- */ --xj-radius-card: 16px; /* 卡片、弹层 */ --xj-radius-ctl: 8px; /* 按钮、输入框、标签 */ --xj-radius-pill: 999px; /* 胶囊 */ /* --------------------------------------------------------------- 4. 间距：4 档 --------------------------------------------------------------- */ --xj-sp-1: 4px; --xj-sp-2: 8px; --xj-sp-3: 12px; --xj-sp-4: 16px; --xj-sp-5: 24px; --xj-sp-6: 32px; /* 触摸目标：≥44px（手机端铁律）*/ --xj-tap: 44px; /* --------------------------------------------------------------- 5. 阴影：克制，不用重投影 --------------------------------------------------------------- */ --xj-shadow-1: 0 1px 3px rgba(43, 58, 52, .05); --xj-shadow-2: 0 2px 10px rgba(43, 58, 52, .07); --xj-shadow-3: 0 6px 24px rgba(43, 58, 52, .10); /* --------------------------------------------------------------- 6. 动效：克制、无弹跳（疗愈调性） --------------------------------------------------------------- */ --xj-ease: cubic-bezier(.22, .61, .36, 1); --xj-dur-fast: 180ms; /* 按压反馈 */ --xj-dur-base: 300ms; /* 常规过渡（铁律上限）*/ --xj-dur-slow: 600ms; /* 浮层滑入 */ --xj-dur-breath: 6000ms;/* 一次呼吸（品牌动效，吸 3 呼 3）*/ } /* ---------------------------------------------------------------- 无障碍：尊重系统「减少动态效果」设置 ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --xj-dur-fast: 1ms; --xj-dur-base: 1ms; --xj-dur-slow: 1ms; --xj-dur-breath: 1ms; } }