/* ========================================================================== Flaxl Claw · Design Tokens v1.5 设计原则：黑白灰 + 一个红 + 一组「身份识别色」。所有颜色 / 字号 / 间距 / 圆角 / 阴影 均由此派生。 不要在任何业务样式里写死色值，一律引用变量。 ========================================================================== */ /* ========================================================================== 浅色作用域 · .adm-light -------------------------------------------------------------------------- 运营后台的右侧工作区固定灰白，不随全局日夜切换 —— 后台是长时间盯着看的 数据界面，整屏深色既刺眼又费眼；左侧模块树保留主题色（跟随日夜）， 右侧恒定灰白，这样"哪里是导航、哪里是内容"一眼分得清。 做法：CSS 自定义属性有一条规则 —— 元素上**已声明**的属性不会继承父级的值。 所以在这个类上把浅色 token 重新声明一遍，深色主题块就再也影响不到它。 注意：类名挂在**容器**上（.workarea / .drawer / .toast）， 不是挂在 html 上 —— 挂到 html 会把左侧也一起变浅。 这份清单是浅色 token 的副本，改浅色主题时两处要同步改。 维护提示：与下方 :root 块的取值必须一致。 */ .adm-light { /* 中性色阶 */ --ink-50: #F8F9FB; /* 页面底 */ --ink-100: #F2F4F7; /* 浅底 · 胶囊底 · 斑马纹 */ --ink-150: #EAEDF1; /* 浅色边框 · 分割线 */ --ink-200: #DFE3E8; /* 常规边框 */ --ink-300: #B7BCC4; /* 禁用 */ --ink-400: #8F959E; /* 辅助信息 · 占位符 */ --ink-500: #676D76; /* 次要说明文字 · 对 --ink-100 底实测 4.73:1（原 #6B717A 只有 4.47:1，差一点点到不了 AA） */ --ink-600: #4A4F57; /* 正文偏浅 */ --ink-700: #2E3238; /* 正文 */ --ink-800: #1E2126; /* 强调正文 */ --ink-900: #14161A; /* 主标题 */ --white: #FFFFFF; /* 卡片底 */ /* 品牌红（浅色模式 · 与 :root 一致） */ --brand-700: #A8000D; --brand-600: #C20010; --brand-500: #E60012; --brand-400: #FF4D4F; --brand-300: #FF8A8F; --brand-200: #FFC9C5; --brand-100: #FFECEA; --brand-50: #FFF6F5; --brand-ink: #DD0011; --brand-on: #FFFFFF; /* 原生控件配色 */ --btn-ink: #14161A; --btn-ink-ink: #FFFFFF; --chip-ink: #14161A; --chip-ink-fg: #FFFFFF; --topbar-bg: rgba(255, 255, 255, .86); --stage-glow: var(--white); --stage-bg: var(--ink-100); /* 功能色浅底 */ --success-bg: #E7F8F0; --success-ink: #0B8F52; --warning-bg: #FFF7E6; --warning-ink: #B26B00; /* 身份识别色（浅色版） */ --tone-blue-bg: #EEF3FF; --tone-blue-ink: #1D4ED8; --tone-indigo-bg: #EFEEFE; --tone-indigo-ink: #4338CA; --tone-violet-bg: #F5F0FF; --tone-violet-ink: #7C3AED; --tone-magenta-bg: #FCEFFB; --tone-magenta-ink: #A21CAF; --tone-amber-bg: #FEF4E6; --tone-amber-ink: #B45309; --tone-teal-bg: #E7F5F3; --tone-teal-ink: #0F766E; --tone-cyan-bg: #E5F4F9; --tone-cyan-ink: #0E7490; /* 阴影：浅色下靠真实的投影分层 */ --sh-xs: 0 1px 2px rgba(20, 22, 26, .05); --sh-sm: 0 1px 3px rgba(20, 22, 26, .07), 0 1px 2px rgba(20, 22, 26, .05); --sh-md: 0 6px 16px -4px rgba(20, 22, 26, .10), 0 2px 6px -2px rgba(20, 22, 26, .06); --sh-lg: 0 16px 40px -12px rgba(20, 22, 26, .16); --sh-focus: 0 0 0 3px rgba(230, 0, 18, .16); } :root { /* ---------- 中性色阶 Ink （承担 95% 的界面面积） ---------- */ --ink-1000: #000000; /* 原稿纯黑：只用于登录页左侧品牌区 */ --ink-950: #0B0D10; --ink-900: #14161A; /* 主标题 · 深色底 · 深色按钮 */ --ink-800: #1E2126; --ink-700: #2E3238; /* 正文 */ --ink-600: #4A4F57; --ink-500: #676D76; /* 次要说明文字 · 对 --ink-100 底实测 4.73:1（原 #6B717A 只有 4.47:1，差一点点到不了 AA） */ --ink-400: #8F959E; /* 辅助信息 · 占位符 */ --ink-300: #B7BCC4; /* 禁用 */ --ink-200: #DFE3E8; /* 常规边框 */ --ink-150: #EAEDF1; /* 浅色边框 · 分割线 */ --ink-100: #F2F4F7; /* 浅底 · 胶囊底 · 斑马纹 */ --ink-50: #F8F9FB; /* 页面/侧栏底色 */ --white: #FFFFFF; /* ---------- 品牌红 Brand （承担 5% 的强调面积） ---------- */ /* 说明：原稿使用纯 #FF0000。纯红在白底上会产生色晕、大面积使用时刺眼。 这里收敛到 #E60012 —— 色相完全一致，但更沉稳、更"贵"。 规范：--brand-500 只用于「主按钮 / 选中态 / 关键数字 / logo 徽标」； 大面积浅色区域一律使用 --brand-100 打底 + --brand-500 描边或文字。 */ --brand-700: #A8000D; --brand-600: #C20010; /* 按下 */ --brand-500: #E60012; /* 主品牌红 · logo cn 徽标同源 */ --brand-400: #FF4D4F; /* 深底上的红字/图标 */ --brand-300: #FF8A8F; /* 深底上的红字（弱）· 通话状态点 */ --brand-200: #FFC9C5; /* 红色描边 */ --brand-100: #FFECEA; /* 红色浅底 */ --brand-50: #FFF6F5; /* 悬停浅底 */ /* 品牌色的另两个角色 —— 与 --brand-500 分开，各司其职： --brand-ink 品牌色**文字**（链接、强调字、选中项文字） --brand-on 品牌色**填充底上的字**（主按钮上的白字） 浅色模式下 --brand-ink 仍用主品牌红（对白底 4.62:1，达标）； --brand-on 用白字。夜间两者的取值见 :root[data-theme="dark"]。 */ --brand-ink: #DD0011; --brand-on: #FFFFFF; /* ---------- 功能色（严格克制，每个色只允许出现在它该出现的地方） ---------- */ --success: #12B76A; /* 仅用于「运行中」状态点、支付成功 */ --success-bg: #E7F8F0; /* 对 --success-bg 实测 4.55:1 —— 原来的 #0B8F52 只有 3.77:1， 达不到注释里承诺的 4.5。徽标上写的「身份通过」「已授权」是要看清的， 压深到刚好达标，底色不动。 */ --success-ink: #098049; --warning: #F59E0B; /* 仅用于「待处理/审核中」 */ --warning-bg: #FFF7E6; --warning-ink: #A46200; /* 对 --warning-bg 实测 4.55:1（原 #B26B00 只有 3.94:1） */ --danger: var(--brand-500); /* 注意：本项目不引入第二个「语义」彩色色系 —— 原稿的蓝 #2A82E4 / 紫 #6E6AE3 已全部废弃。 唯一例外是下面这组「身份识别色」：它不表达状态、品牌或任何业务语义， 只回答"这是哪一个对象"这个问题，因此可以在一屏列表里安全地给出色彩区分。 */ /* ---------- 身份识别色 Identity Tones（仅「数字员工」页使用） ---------- 规则：-bg 作头像底色，-ink 作图标与卡片顶条，同一色相成对使用、不跨色混搭。 对比度（已实测）：-ink 对白底 5.02~7.90:1，-ink 对自身 -bg 4.61~6.94:1 —— 两两均 ≥ WCAG AA 的 4.5:1。 边界：只在数字员工卡上出现（顶条 / 头像 / 状态徽章），不得外溢到其他页面或组件。 */ --tone-blue-bg: #EEF3FF; --tone-blue-ink: #1D4ED8; --tone-indigo-bg: #EFEFFE; --tone-indigo-ink: #4338CA; --tone-violet-bg: #F5F0FF; --tone-violet-ink: #7C3AED; --tone-magenta-bg: #FCEFFB; --tone-magenta-ink: #A21CAF; --tone-amber-bg: #FEF4E6; --tone-amber-ink: #B45309; --tone-teal-bg: #E7F5F3; --tone-teal-ink: #0F766E; --tone-cyan-bg: #E5F4F9; --tone-cyan-ink: #0E7490; /* ---------- 渐变（只保留一处：手机相机键的品牌红） ---------- 原 --grad-ink（深色卡渐变）随数字员工卡改版一起废弃： 7 张深色卡在一屏浅色界面里过重，改版后已全部收敛为浅色卡。 */ --grad-brand: linear-gradient(135deg, #E60012 0%, #A8000D 100%); /* ---------- 字体 ---------- 全部是可免费商用的字体，项目内不打包、不分发任何字体文件： ① Inter —— SIL OFL 1.1，免费可商用（西文 / 数字） ② Noto Sans SC —— SIL OFL 1.1，免费可商用（中文首选） ③ JetBrains Mono —— SIL OFL 1.1，免费可商用（等宽数字） 下面几项是**系统兜底**：CSS 写字体名只是"调用本机字体"， 不涉及分发，因此不需要另取授权；用户机器上没有前三种时才轮到它们。 · PingFang SC macOS 系统字体 · Microsoft YaHei Windows 系统字体 · system-ui 跟随系统界面字体 明确不用的：任何方正 / 汉仪 / 造字工房等商业授权字体，以及需要 单独购买嵌入式授权的字体 —— 原型要能随便发给别人打开，就不能带这些雷。 */ --font-sans: "Inter", "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif; --font-num: "Inter", "JetBrains Mono", "SF Mono", ui-monospace, monospace; /* ---------- 字阶（六档，不再新增） ---------- */ --fs-display: 32px; --lh-display: 42px; /* 空态大标题 */ --fs-h1: 24px; --lh-h1: 34px; /* 页面主标题 */ --fs-h2: 18px; --lh-h2: 28px; /* 区块标题 */ --fs-h3: 15px; --lh-h3: 24px; /* 卡片标题 */ --fs-body: 14px; --lh-body: 22px; /* 正文 */ --fs-sm: 13px; --lh-sm: 20px; /* 次要正文 · 导航 */ --fs-xs: 12px; --lh-xs: 18px; /* 说明 · 表头 */ --fs-2xs: 11px; --lh-2xs: 16px; /* 角标 */ /* 字重只用 3 档：400 常规 / 500 中黑 / 600 半粗 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* ---------- 间距（4pt 栅格，只用这 11 档） ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ---------- 圆角 ---------- */ --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px; /* ---------- 阴影（越靠上层越深） ---------- */ --sh-xs: 0 1px 2px rgba(16, 24, 40, .05); --sh-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04); --sh-md: 0 6px 16px -4px rgba(16, 24, 40, .10), 0 2px 6px -2px rgba(16, 24, 40, .06); --sh-lg: 0 16px 40px -12px rgba(16, 24, 40, .18); --sh-focus: 0 0 0 3px rgba(230, 0, 18, .12); /* ---------- 动效 ---------- */ --ease: cubic-bezier(.22, .61, .36, 1); --t-fast: 140ms cubic-bezier(.22, .61, .36, 1); --t-base: 220ms cubic-bezier(.22, .61, .36, 1); --t-slow: 380ms cubic-bezier(.22, .61, .36, 1); /* ---------- 布局 ---------- */ --sidebar-w: 232px; --topbar-h: 56px; --content-max: 1120px; --z-overlay: 100; --z-modal: 200; --z-toast: 300; /* ---------- 原生控件配色 ---------- color-scheme 告诉浏览器"这个页面是浅色还是深色"， 滚动条、下拉菜单、日期选择器这些浏览器自带的部件会跟着变。 不设的话，深色界面里会出现一条亮白的滚动条 —— 界面明明是暗的，鼠标一放上去右边就亮起一条，是最先被察觉的破功点。 "light dark" = 跟随系统；下面两行再按 data-theme 覆盖成固定值。 */ color-scheme: light dark; } /* ---------- 日间 / 夜间 · 原生控件配色 ---------- color-scheme 的固定值跟着深色 token 块走（见下方 :root[data-theme="dark"]）， 这里只固定"日间"那一种 —— 夜间那条放在深色块里， 免得同一个选择器在文件里出现两处、以后改的时候只改一处。 */ :root[data-theme="light"] { color-scheme: light; } /* 浅色模式下的补充变量（深色模式会在下面覆盖）。 注意放置顺序：深色块必须在这段之后 —— 同等优先级的 :root 规则，后写的赢。放反了深色值会被这里覆盖掉， 表现是"底翻了、某个半透明层没翻"，最难查的那种半深半浅。 */ :root { --btn-ink: #14161A; --btn-ink-ink: #FFFFFF; --chip-ink: #14161A; --chip-ink-fg: #FFFFFF; --topbar-bg: rgba(255, 255, 255, .86); --stage-glow: var(--white); --stage-bg: var(--ink-100); /* ---------- 恒深色（永远深，不随主题翻） ---------- 用来画"设备屏幕""登录页黑底"这类东西：它们模拟的是一块真实的 物理屏幕，或者原稿指定的纯黑品牌区 —— 不管系统是什么主题， 它都该是深的。若跟着 ink 色阶翻，深色模式下的模拟屏会变成白屏， 那就完全不像一台设备了。 */ --always-700: #2E3238; --always-800: #1E2126; --always-900: #14161A; --always-950: #0B0D10; --always-1000: #000000; /* 深底上的文字色：永远是浅的，不跟主题翻 */ --on-dark: #FFFFFF; } /* ========================================================================== 深色模式（Windows 夜间模式 / 系统深色主题） -------------------------------------------------------------------------- 为什么用「重定义 token」而不是逐处改样式： 全站有 200 多处背景、130 多处边框都直接引用 ink 色阶。 逐处改 = 200 处以后每次改版都可能漏一处，而且漏掉的那些 在深色下会变成"深底深字"，用户看到的是一段看不清的字，不是"颜色不对"。 这里的做法是把 ink 色阶在深色下「翻过来」： 浅色模式 --ink-50 是最浅的底，--ink-900 是最深的字； 深色模式 --ink-50 变成最深的底，--ink-900 变成最浅的字。 一处定义，全站自动跟着翻 —— 语义不变，只是明暗对调。 但 --ink-900 有个麻烦：它同时是「深色按钮的底色」。 深色模式下按钮底应该还是深色系（不然满屏白按钮）， 所以按钮那一类单独用 --btn-ink，不再跟着 ink-900 翻。 同理 --white 也翻了（它当卡片底用），深色下变 #14171C。 只有系统明确说了 dark 才翻。用户手动在系统里选了浅色，就别自作主张。 ========================================================================== */ /* ========================================================================== -------------------------------------------------------------------------- 手动切换（第三十一轮 · 设置中心「日间 / 夜间模式」） -------------------------------------------------------------------------- 以前这里只有 @media (prefers-color-scheme: dark) 一种触发方式 —— 也就是说"深色"完全由操作系统决定，应用自己没有任何话语权。 用户在设置中心看到的那个「日间 / 夜间」按钮也就只能改一行文案， 改不到真实皮肤。 现在多了一个手动通道：。 data-theme="light" → 强制日间 data-theme="dark" → 强制夜间 属性缺失 → 跟随系统（等效于 auto，方便不写属性也能工作） 为避免把深色 token 抄两遍（抄一遍就意味着以后改色要记得改两处， 漏一处就会看到"底翻了但某个半透明层没翻"），深色值只写一份 —— 写在 :root[data-theme="dark"] 里。 「跟随系统」由 app.js 的主题管理器负责：它监听 matchMedia 的变化， 把 auto 解析成具体的 light / dark 再写到 上。 @media 那条路仍然留着，作为 JS 还没跑（首屏那一瞬）的兜底： 系统是深色、而 上还没有 data-theme 时，也先用深色 token 顶着。 JS 一跑起来就会把 data-theme 写实，两者结果一致，不会打架。 ========================================================================== */ /* ---------- 深色 token（唯一真源）---------- */ :root[data-theme="dark"] { /* 浏览器原生控件（滚动条、下拉、日期选择器）也跟着变深。 放在这个块里而不是另写一条规则：同一个选择器只出现一次， 以后要改深色行为，改这一处就够了。 */ color-scheme: dark; /* ---------- 中性色阶（明暗对调）---------- 规律：数字越大越亮。原来的「底」变成深色，原来的「字」变成浅色。 */ --ink-50: #0E1116; /* 页面/侧栏底色 */ --ink-100: #171A20; /* 浅底 · 胶囊底 · 斑马纹 */ --ink-150: #22262E; /* 浅色边框 · 分割线 */ --ink-200: #2C313A; /* 常规边框 */ --ink-300: #4A515C; /* 禁用 */ --ink-400: #6E7681; /* 辅助信息 · 占位符 */ --ink-500: #8D95A0; /* 次要说明文字 */ --ink-600: #AEB5BF; /* 正文偏浅 */ --ink-700: #D2D7DE; /* 正文 */ --ink-800: #E6E9ED; /* 强调正文 */ --ink-900: #F5F7FA; /* 主标题 */ --white: #14171C; /* 卡片底 */ /* 深色按钮：不能跟着 ink-900 翻（那会变成一排白按钮） */ --btn-ink: #E6E9ED; --btn-ink-ink: #14171C; /* 小元件底（开关滑块、图标方块、头像底） 这类元件在深色下不能跟着主按钮一起变亮：亮底在深色界面里会 "发光"，一堆小亮点比主按钮还抢眼，视觉重心全跑偏了。 用一个中间调的深色，元素照样看得见，但不喧宾夺主。 */ --chip-ink: #2E3238; --chip-ink-fg: #D2D7DE; /* ---------- 品牌红 · 夜间 A 方案「柔珊瑚」---------- 浅色模式用 #E60012（sat 100%），夜间继续用它就会满屏荧光 —— 这就是 「夜间模式红色太刺眼」的根因：--brand-500 在深色块里根本没翻转。 A 方案：色相几乎不动（352° vs 现状 358°），观感上仍是「这个品牌的红」， 只把纯红的荧光感压下去。全部 10 项对比度实测达标。 关键：品牌色拆成三个角色，不能再用 --brand-500 一个值兼两职。 --brand-500 填充底（主按钮底、选中块底） --brand-ink 品牌色文字（深底上的红字/图标） --brand-on 填充底上的字（按钮上的白字） 为什么必须拆：同一个值要同时满足 底配白字 ≥ 4.5:1 → 相对亮度 L ≤ 0.1833 字配深卡底 ≥ 4.5:1 → 相对亮度 L ≥ 0.18566 区间为空 —— 数学上无解，不存在一个色值同时干这两件事。 */ --brand-700: #A12132; /* 按下 */ --brand-600: #B62B3D; /* 悬停 */ --brand-500: #CB3A4D; /* 主品牌红（夜间）· 主按钮底 */ --brand-400: #D5A5AB; /* 深底上的红字/图标 */ --brand-300: #DBC7CA; /* 深底上的红字（弱）· 通话状态点 */ --brand-200: #E8E3E4; /* 红色描边 */ --brand-100: #1E1516; /* 红色浅底（夜间为低亮度深底） */ --brand-50: #140E0E; /* 悬停浅底（夜间为低亮度深底） */ --brand-ink: #CE828C; /* 品牌色文字 · 深底上的红字 */ --brand-on: #FFFFFF; /* 品牌色填充底上的字 */ /* 功能色的浅底 */ --success-bg: #0E2A1D; --success-ink: #4ADE9B; --warning-bg: #2C2110; --warning-ink: #FBBF24; /* 身份识别色的底：深色下改成深底 + 亮字 */ --tone-blue-bg: #131C33; --tone-blue-ink: #7DA6FF; --tone-indigo-bg: #171634; --tone-indigo-ink: #A5A0FA; --tone-violet-bg: #201533; --tone-violet-ink: #C4A7FB; --tone-magenta-bg: #291433; --tone-magenta-ink: #E879F9; --tone-amber-bg: #2A1E0C; --tone-amber-ink: #FBBF24; --tone-teal-bg: #0C2422; --tone-teal-ink: #5EEAD4; --tone-cyan-bg: #0C2029; --tone-cyan-ink: #67E8F9; /* 阴影：深色下几乎看不见，靠边框区分层次 */ --sh-xs: 0 1px 2px rgba(0, 0, 0, .40); --sh-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .30); --sh-md: 0 6px 16px -4px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .40); --sh-lg: 0 16px 40px -12px rgba(0, 0, 0, .65); --sh-focus: 0 0 0 3px rgba(255, 77, 79, .22); /* 顶栏是半透明白底，深色下要跟着变半透明黑 */ --topbar-bg: rgba(20, 23, 28, .86); /* 舞台底色的两层渐变 */ --stage-glow: rgba(255, 255, 255, .04); --stage-bg: #0A0C10; } /* ---------- 跟随系统的兜底 ---------- JS 还没跑（首屏那一瞬）时，系统是深色就先用深色 token 顶着。 JS 一跑起来会把 data-theme 写实（auto → dark/light），结果一致。 :not([data-theme]) 而不是 :not([data-theme="light"])： 属性缺失 = 还没接管；属性是 light/dark 时一律听 JS 的。 */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { /* ---------- 中性色阶（明暗对调）---------- 规律：数字越大越亮。原来的「底」变成深色，原来的「字」变成浅色。 */ --ink-50: #0E1116; /* 页面/侧栏底色 */ --ink-100: #171A20; /* 浅底 · 胶囊底 · 斑马纹 */ --ink-150: #22262E; /* 浅色边框 · 分割线 */ --ink-200: #2C313A; /* 常规边框 */ --ink-300: #4A515C; /* 禁用 */ --ink-400: #6E7681; /* 辅助信息 · 占位符 */ --ink-500: #8D95A0; /* 次要说明文字 */ --ink-600: #AEB5BF; /* 正文偏浅 */ --ink-700: #D2D7DE; /* 正文 */ --ink-800: #E6E9ED; /* 强调正文 */ --ink-900: #F5F7FA; /* 主标题 */ --white: #14171C; /* 卡片底 */ /* 深色按钮：不能跟着 ink-900 翻（那会变成一排白按钮） */ --btn-ink: #E6E9ED; --btn-ink-ink: #14171C; /* 小元件底（开关滑块、图标方块、头像底） 这类元件在深色下不能跟着主按钮一起变亮：亮底在深色界面里会 "发光"，一堆小亮点比主按钮还抢眼，视觉重心全跑偏了。 用一个中间调的深色，元素照样看得见，但不喧宾夺主。 */ --chip-ink: #2E3238; --chip-ink-fg: #D2D7DE; /* 品牌红 · 夜间 A 方案「柔珊瑚」（与 :root[data-theme="dark"] 保持一致） */ --brand-700: #A12132; --brand-600: #B62B3D; --brand-500: #CB3A4D; --brand-400: #D5A5AB; --brand-300: #DBC7CA; --brand-200: #E8E3E4; --brand-100: #1E1516; --brand-50: #140E0E; --brand-ink: #CE828C; --brand-on: #FFFFFF; /* 功能色的浅底 */ --success-bg: #0E2A1D; --success-ink: #4ADE9B; --warning-bg: #2C2110; --warning-ink: #FBBF24; /* 身份识别色的底：深色下改成深底 + 亮字 */ --tone-blue-bg: #131C33; --tone-blue-ink: #7DA6FF; --tone-indigo-bg: #171634; --tone-indigo-ink: #A5A0FA; --tone-violet-bg: #201533; --tone-violet-ink: #C4A7FB; --tone-magenta-bg: #291433; --tone-magenta-ink: #E879F9; --tone-amber-bg: #2A1E0C; --tone-amber-ink: #FBBF24; --tone-teal-bg: #0C2422; --tone-teal-ink: #5EEAD4; --tone-cyan-bg: #0C2029; --tone-cyan-ink: #67E8F9; /* 阴影：深色下几乎看不见，靠边框区分层次 */ --sh-xs: 0 1px 2px rgba(0, 0, 0, .40); --sh-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .30); --sh-md: 0 6px 16px -4px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .40); --sh-lg: 0 16px 40px -12px rgba(0, 0, 0, .65); --sh-focus: 0 0 0 3px rgba(255, 77, 79, .22); /* 顶栏是半透明白底，深色下要跟着变半透明黑 */ --topbar-bg: rgba(20, 23, 28, .86); /* 舞台底色的两层渐变 */ --stage-glow: rgba(255, 255, 255, .04); --stage-bg: #0A0C10; } } /* 无障碍：尊重系统「减少动态效果」偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }