/* 以交接包 Token 为基础；字体、标题级差与分区间距已按后续页面反馈校准。
* 正文字号保持 16px，标题和留白节奏以当前站点截图为准。
*
* 本文件是全站颜色的**唯一真源**（DESIGN.md §4/§6）：
* · styles/experience.css 不再声明 :root 颜色覆写，只引用这里的语义变量；
* · 新增语义色请加在这里，不要在组件里写十六进制近似色。
* · 外观（modern/classic）已固定为 modern 常驻，本文件不再有 classic 分支。
* · **主题（浅色/深色）也只有这一个入口**：浅色是 :root 的默认值，
* 深色是文件下半部分的 `[data-theme='dark']` 覆写块。
* 组件里不要写 `[data-theme='dark'] .xxx { background: #000 }` ——
* 那样子类会散落两套配色，切换主题时必然有人漏改（这条规矩和"颜色单一真源"是同一条）。
* 数值与档位（圆角 10/16/20、手机 23px 边距）见下方注释。 */
/* 调色板：**只在本文件内部使用**，组件一律引用下面的语义变量。
* 把它们写成变量而不是散落的字面量，是因为同一个蓝在浅色与深色下要出现在
* 十来处（边框、焦点环、柔光、文字），写死就意味着十几处一起改。
* 命名前缀 --palette 属于本文件，不属于公共 API。 */
:root {
/* 组件底色轻微透光：普通面 88%，浮层/输入面 94%；不降低内容 opacity。 */
--border-card: 1px solid var(--color-border);
/* 页面材质上的透光分区；深浅颜色随已有语义变量解析。 */
--color-page-header: color-mix(in srgb, var(--color-bg) 8%, transparent);
--color-page-footer: color-mix(in srgb, var(--color-bg) 94%, transparent);
--color-page-section: transparent;
/* 主蓝族：浅色用原始品牌蓝；深色提到 400 档，
因为 #4063FB 压在近黑底上只有约 3.3:1 —— 不到 AA 正文的 4.5:1。 */
--palette-blue: #4063FB;
--palette-blue-hover: #3152E5;
--palette-blue-deep: #234FC4; /* 深底上的按钮底色（白字 ≥4.5:1） */
--palette-blue-bright: #6B8BFF; /* 深底上的文字与描边 */
--palette-blue-soft: #EEF2FF;
--palette-blue-line: #CBD4F5; /* 浅色下的装饰连线，同 --color-topology-line */
--palette-blue-line-dark: #3A4A7A;
--palette-blue-ink: #304FC9; /* 浅蓝底上的深蓝文字 */
--palette-blue-ink-bright: #A9BCFF; /* 深色下的同一角色 */
/* 青绿族：品牌强调色。浅色下的小字号青色对比度不足，
所以"当文字用"的那一档单独取深值（--color-status-forest 已经是这个角色）。 */
--palette-teal: #0FDBBA;
--palette-teal-soft: #D9FAF4;
/* 中性族 */
--palette-ink: #17191D;
--palette-ink-soft: #2B2F36; /* 深中性填充：主按钮 hover */
--palette-gray: #626872;
--palette-line: #E3E6EA;
--palette-line-soft: #E6EAF4;
--palette-line-muted: #E3E8F3;
--palette-surface-muted: #F8FAFF;
--palette-surface-soft: #F7F9FC;
--palette-surface-tint: #F1F4FC;
--palette-section: #F5F7FB;
/* 深色中性族 */
--palette-dark-bg: #0F1115;
--palette-dark-section: #151922;
--palette-dark-surface: #171B24;
--palette-dark-raised: #232830;
--palette-dark-text: #F2F4F8;
--palette-dark-secondary: #A2A9B6;
/* 阴影：浅色是"黑影子"，深色只能靠更深的黑加不透明度 ——
照搬浅色的 rgba(23,25,29,.06) 在深底上等于没画。 */
--palette-shadow-soft: rgba(23, 25, 29, .06);
--palette-shadow-strong: rgba(27, 48, 115, .11);
--palette-shadow-dark: rgba(0, 0, 0, .45);
}
:root {
/* 让浏览器知道本页支持两套主题：没有它，深色页面里的滚动条、
原生 与