/* ============================================================ 伊比利亚研学洞察系统 · 设计令牌 v3.1 ------------------------------------------------------------ 纪律：品牌色一律取自 明德AI 品牌 tokens.css（权威值，禁止凭记忆配色） —— 八色常量段【原样保留，不得改动】 本文件是**全站唯一的 HEX 声明处**；本文件之外（app.css）不得出现任何 自造 HEX，也不得出现走私 rgba 三元组（详见文件末「自查」）。 版本脉络： v1 = 深海蓝铺底（被项目负责人判"有点 low"） v2 = 墨线纸感（蓝退为点睛，结构交给中性墨色） v3 = **亮版「宣纸镀金」** —— 把项目负责人认可的「启动页」调性（墨蓝 + 暖沙金箔线 + 大字距 + 充足留白）翻成亮色版，搬进内容界面。 v3.1 = **令牌收敛**（评审 §B-1 #3/#4/#5/#25 落地），把"看起来齐全、实际全硬编码" 的令牌表变成"有档位、有语义、可一处改全站"： · 金箔透明度 21 档 → 5 档（--gold-veil/hair/soft/line/hi） · 字号 19 档 → 7 档（--fs-cap…--fs-display）+ 1 个 a11y 专用值 · 圆角 15 档 → 5 档（--r-pill/paper/card/btn/sm） · 死令牌 8 个 → 4 个启用 / 4 个删除 · 走私色 rgba(15, 23, 42) 6 处 → rgba(11,18,32)（= --n-950） ============================================================ */ :root{ /* ---------- ① 品牌八色常量（权威值，原样保留） ---------- */ --md-primary-deep:#1D4ED8; /* 深海蓝 */ --md-primary-bright:#1E5BFF; /* 专家蓝 */ --md-accent:#22D3EE; /* 柔波青 */ --md-metallic:#E8C99B; /* 暖沙金 */ --md-base:#F8FAFC; /* 极光白 */ --md-neutral:#94A3B8; /* 雾蓝灰 */ --md-ink:#1F2937; /* 石墨灰 */ --md-insight:#FFB14D; /* 洞察金（≤3% 面积） */ /* ---------- ② 中性层（非品牌色；黑白灰属通用结构色） ---------- */ /* v3.1：删除 --n-900（声明后引用数=0，死令牌） */ --n-950:#0B1220; /* 墨蓝黑（= 启动页底色 / 唯一"深色"来源） */ --n-100:#F1F5F9; --n-200:#E7ECF2; --n-300:#D5DDE7; /* ---------- ③ 界面用色 ---------- */ --brand:var(--md-primary-deep); /* v3：仅留「链接 / 焦点环」两处 */ --brand-focus:var(--md-primary-bright); --accent:var(--md-accent); /* 极少量数据点缀 */ --gold:var(--md-metallic); /* 暖沙金（100% 不透明的箔金本体） */ --key:var(--md-insight); /* 洞察金（≤3%，仅状态点睛） */ --deep:var(--n-950); /* 深色面：启动页 / 封面 */ --ink-strong:var(--n-950); /* ★ v3：标题 / 主按钮 / 字标 / 底栏选中 —— 与启动页同族的墨蓝黑 */ /* ---------- ④ 纸面（v3：宣纸感） ---------- */ --bg:var(--md-base); /* 宣纸底（极光白） */ --bg-warm:var(--gold-veil); /* 叠在宣纸上的暖晕（v3.1：由 .12 并入金箔"面色"档） */ --bg-elev:#FFFFFF; /* 纸面（卡） */ --bg-sunken:var(--n-100); /* 凹陷区（指标条 / 引文） */ --text:var(--md-ink); /* 墨色正文 */ --text-2:#5A6779; /* 次级（≥4.5:1）★ v3.1：底栏未选中 / 小字统一用它 */ --text-3:#8593A5; /* 三级（仅装饰 / ≥18.66px 大字；不得承载正文信息） */ --on-deep:#F4F7FB; /* 深底上的文字 */ --on-deep-2:rgba(244,247,251,.72); /* 深底上的次级（仅用于照片上的大字号） */ /* ---------- ⑤ 箔金层（★ v3.1 收敛：21 档透明度 → 5 档，按语义取用） ---------- 取用规则（唯一入口，不要再在 app.css 里写暖沙金 rgba 字面量）： --gold-veil : 面色（填充 / 渐变里的"面" / 选中底 / 空态金环） --gold-hair : 极淡线（1px 装饰线、渐变起点） --gold-soft : 描边（1px 边框 / inset 内描边环） --gold-line : 主线（结构骨架金线：顶栏底线 · 区块头 · 录音条 · 底栏上沿） --gold-hi : 深底 / 高强调（启动页金字 · 录音中描边 · 封面英文小标） 所有**渐变末端**统一写 transparent，不再用一个独立的极低透明度值。 */ --line:var(--n-200); /* 冷灰细线（内容分隔，保持清爽） */ --line-2:var(--n-300); --gold-veil:rgba(232,201,155,.30); /* 面色 */ --gold-hair:rgba(232,201,155,.34); /* 极淡线 */ --gold-soft:rgba(232,201,155,.58); /* 描边 */ --gold-line:rgba(232,201,155,.62); /* 主线（结构骨架） */ --gold-hi:rgba(232,201,155,.92); /* 深底金字 / 高强调 */ /* ---------- ⑥ 字体（★ 只使用 微软雅黑 与 思源黑体） ---------- */ /* 说明：思源黑体有多个发行名 —— Adobe 版 Source Han Sans（SC/CN）、 Google 同源版 Noto Sans SC / Noto Sans CJK SC —— 均属同一款字体，非第三种。 */ --font:"Microsoft YaHei","Source Han Sans SC","Source Han Sans CN","Noto Sans SC","Noto Sans CJK SC","Source Han Sans",sans-serif; --num:var(--font); /* 数字同字体，靠 font-variant-numeric 对齐 */ /* ★ v3.1 字阶：19 档 → 7 档（+1 个无障碍专用值）。取用一律 var()，不再写 px 字面量。 | 档 | 令牌 | 值 | 语义定位 | | ① | --fs-cap | 10.5px | 眉标 / 区块编号 / 说话人 / 启动页小标（全站最小） | | ② | --fs-tiny | 12px | 次级小字：列表副行 / 录音副行 / 品牌行 / 底栏标签 | | ③ | --fs-sec | 13px | 控件与反馈：按钮·吐司·空态·加载 / 顶栏动作 / 分段控件 | | ④ | --fs-body | 15px | 正文默认：卡片 / 要点 / 译文 / 列表主行 / 按钮 | | ⑤ | --fs-lead | 16px | 强调正文：关键洞察引文 / 指标数字（★ 与 a11y 下限同值，见下） | | ⑥ | --fs-h2 | 23px | 页面主标题：hero h1 / 封面 h2 | | ⑦ | --fs-display | 33px | 启动页主标题（全站唯一，不再做窄屏降号） | | ★ | --fs-input | 16px | **非字号档**：iOS 输入控件 <16px 时聚焦会自动放大且不还原， 故 16px 是硬性下限（配套 #10 解除页面缩放限制）。 ⚠ 它与 --fs-lead 巧合同值，但**故意分成两个名字**： 将来调字阶时不能把 a11y 下限一起改掉。 | */ --fs-cap:10.5px; --fs-tiny:12px; --fs-sec:13px; --fs-body:15px; --fs-lead:16px; --fs-h2:23px; --fs-display:33px; --fs-input:16px; --lh-body:1.72; --lh-title:1.32; --track-wide:.2em; /* 英文小标大字距（启动页 .sp-eb 的 .26em 为单列展示值，不并入） */ /* ---------- ⑦ 形状与进阶 ---------- */ /* ★ v3.1 圆角：15 档 → 5 档。同心圆角规则：内层圆角 ≈ 外层圆角 − 内边距 */ --r-pill:999px; /* 胶囊：徽标 / 标签 / 顶栏动作 / 圆点 / 1–2px 细线端头 */ --r-paper:28px; /* 纸面圆肩：hero 下沿白纸 / 抽屉 hero 下沿 */ --r-card:18px; /* 卡片面：.card / .list-item */ --r-btn:14px; /* 控件面：.btn / 抽屉返回键 / 错误块 / 启动页进入键 */ --r-sm:8px; /* 微型面：录音条 / 缩略图(18−10) / 录音指示灯 / 区块编号 */ /* v3.1：--sh-3（引用数=0）与 --ring（与 :focus-visible 的 outline 方案重复）已删除 */ --sh-1:0 1px 2px rgba(11,18,32,.04); --sh-2:0 2px 6px rgba(11,18,32,.05),0 12px 28px -12px rgba(11,18,32,.10); /* ---------- ⑧ 结构尺寸 ---------- */ --top-h:54px; --tab-h:60px; } /* ============================================================ 色纪律自查（两条，缺一条就会漏 —— 走私 rgba 三元组是默认 grep 扫不到的盲区） ------------------------------------------------------------ ① 自造 HEX（app.css 期望**无输出**；tokens.css 只允许 ①/②/④ 段的调色板声明） grep -oE "#[0-9A-Fa-f]{6}" src/frontend/assets/css/app.css | sort -u ② rgba 三元组白名单（期望：全部命中的三元组都在下表内） grep -ohE "rgba\([0-9]+,[0-9]+,[0-9]+" src/frontend/assets/css/*.css | sort -u 11,18,32 墨蓝黑 --n-950 / --ink-strong / --deep（唯一深色） 31,41,55 石墨灰 --md-ink 94,163,184 雾蓝灰 --md-neutral 232,201,155 暖沙金 --gold（仅允许写在 tokens.css 的 ⑤ 段） 255,177,77 洞察金 --key 34,211,238 柔波青 --accent 30,91,255 专家蓝 （仅 --brand-focus 的焦点环） 248,250,252 / 244,247,251 / 255,255,255 / 0,0,0 中性 ★ 15, 23, 42（Tailwind slate-900）必须清零 —— v3.1 已全部改为 11,18,32 ============================================================ */