/* ══════════════════════════════════════════════════════════════════════ 换电柜平台 · 设计令牌 + 统一背景层 ────────────────────────────────────────────────────────────────────── 为什么要有这个文件：全站 17 个页面各写各的样式，普查下来有 **157 个不同 的十六进制色值**，混了四套互不相干的血统（Tailwind 默认 #ef4444/#22c55e、 Ant Design 默认 #faad14/#52c41a、商城紫、大屏青）。四套色互相打架，页面 自然显廉价 —— 这跟"动效多不多"没关系。 所以这里只干一件事：**把颜色和间距收成一套**。页面自己那份布局样式不用动， 把写死的色值换成 var() 就行。改一个地方，全站跟着变。 ══════════════════════════════════════════════════════════════════════ */ :root{ color-scheme:dark; /* ── 底色梯度 ───────────────────────────────────────────────────── 整体是一块深蓝，分四层：页面底 → 面板 → 抬起面板 → 描边。 四层都往品牌青那个方向偏一点（不是中性灰）—— 中性灰和青色放一起会发脏。*/ --bg-0:#04060f; /* 页面最底，大屏用 */ --bg-1:#060a18; /* 页面底，后台用 */ --surface-1:#0a1327; /* 面板 */ --surface-2:#0e1a33; /* 抬起的面板 / 表头 / 悬停 */ /* ── 品牌色 ramp（深色主题 = 青，默认）───────────────────────────── 一条 ramp，不是一个色。深到浅各有活干：底纹 / 描边 / 主色 / 高光。 ★ 想要半透明的品牌色（描边、光晕、悬停底），一律写 rgb(var(--brand-rgb) / .14) 不要写 rgba(0,210,255,.14) —— 那样换主题时它不跟着变， 页面上会剩下一半青一半别的色，比不做主题还难看。 ★ --brand-rgb 是空格分隔的三个数，**不是逗号**：逗号是 rgba() 的旧语法， rgb(var(--x) / a) 里必须是 `0 210 255` 这种写法，否则整条声明失效。*/ --brand-rgb:0 210 255; --brand-900:#00323f; --brand-700:#0077a3; --brand-500:#00b8e6; --brand-400:#00d2ff; --brand-300:#7fe8ff; --line-1:rgb(var(--brand-rgb) / .14); /* 常规描边 */ --line-2:rgb(var(--brand-rgb) / .30); /* 强调描边 / 受光边 */ /* ── 表面 / 玻璃 / 投影 ─────────────────────────────────────────── 这一组是"整页换色"能不能成立的关键。面板底原来散在页面里写死成 rgba(16,29,56,.88) 这种深蓝玻璃，投影写死成 rgba(0,0,0,.45) —— 浅色主题下就是一屏黑玻璃配黑烟。收进令牌，深色给深玻璃、浅色给白玻璃。 ★ --surf-a/--surf-b 是**面板渐变的两个端点**，不是一个整渐变 —— 渐变定义留在选择器里写一次，主题只换端点。*/ --surf-a:rgba(16,29,56,.88); /* 面板渐变·上 */ --surf-b:rgba(8,15,32,.90); /* 面板渐变·下 */ --glass:rgba(14,26,51,.70); /* 按钮 / 下拉这类玻璃条 */ --glass-soft:rgba(10,19,39,.60); /* 输入框 / 分页 / 更淡的底 */ --glass-strong:rgba(14,26,51,.95);/* 弹窗：必须挡住后面 */ --side-a:#080f20; --side-b:#0a1327; --side-c:#0c1730; /* 侧栏渐变三点 */ --well:#0a1327; /* 凹槽：电池条内胆 / 行内 code */ --sh-1:rgba(0,0,0,.28); /* 细描影：卡片、表线 */ --sh-2:rgba(0,0,0,.45); /* 中：侧栏、登录卡 */ --sh-3:rgba(0,0,0,.55); /* 重：弹窗 */ --grid-c:rgb(var(--brand-rgb) / .045); /* 背景网格线 */ --glow-1:rgb(var(--brand-rgb) / .14); /* 光晕·主（各页自己定位置和大小）*/ --glow-2:rgba(167,139,250,.09); /* 光晕·副 */ --glow-3:rgb(var(--brand-rgb) / .08); /* 光晕·角 */ /* ── 文字 ───────────────────────────────────────────────────────── 四档，够用。别再从这里岔出第五档灰 —— 那正是"看着不像一套"的来源。*/ --ink-1:#e6f1ff; /* 标题 / 主数据 */ --ink-2:#bcd6f5; /* 正文 */ --ink-3:#7a8db0; /* 次要说明 */ --ink-4:#5f7290; /* 弱化 / 占位 / 空值 */ /* ── 语义 ───────────────────────────────────────────────────────── 全站共用这四个。新增页面请不要再出现 #22c55e / #f59e0b / #ef4444 —— 那几个是框架默认色，和品牌青不是一套。*/ --ok:#00e08a; --warn:#ffc247; --bad:#ff4d6d; --info:#4da3ff; --on-ok:#06231a; /* 压在 --ok 实底上的字色：随 --ok 一起翻 */ /* --charge / --err 是历史别名，值分别等于 --info / --bad。 原来**只有浅色主题里定义**，青/紫/薄荷三套下引用它们的 20 处声明整条失效、 颜色静默继承 —— 不报错，只是不对。补在这里即可，浅色块有自己的覆盖。 想收干净的话，把 cloud-dashboard.html 里的 var(--charge)/var(--err) 换成 var(--info)/var(--bad) 再删这两行，单独一轮做。 */ --charge:#4da3ff; --err:#ff4d6d; /* ── 图表分类色 ─────────────────────────────────────────────────── 只在数据可视化里按角色点名使用，不要拿去当界面色。*/ --viz-1:var(--brand-400); --viz-2:#ff6b9d; --viz-3:#a78bfa; --viz-4:#00e08a; /* ── 间距 / 圆角 ────────────────────────────────────────────────── 4 的倍数，六档。够不成体系之前别再加档。*/ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --r-1:4px; --r-2:6px; --r-3:10px; /* ── 动效 ───────────────────────────────────────────────────────── 产品页（干活用的后台）用 --dur，150~250ms —— 用户在任务流里，别让他等编排。 大屏另开一套慢的，用 .bg-live 那块下面的变量。 缓动一律 ease-out，不带过冲：弹跳是十几年前的观感。*/ --dur-fast:150ms; --dur:200ms; --ease:cubic-bezier(.16,1,.3,1); } /* ══════════════════════════════════════════════════════════════════════ 主题 · html[data-theme="紫" / "薄荷" / "浅色"] ────────────────────────────────────────────────────────────────────── ★ 只覆盖 :root 里那几个**颜色**令牌，间距/圆角/动效一律不动 —— 换主题是换皮，不是换骨。结构一动，"切了主题"就变成"换了个网站"。 ★ 第一版之所以"只有上面一点变色"：只换了 --brand-*，而**面板底、玻璃条、 侧栏、投影是页面里写死的深蓝**，一个都不跟着走。现在那批已经收进 表面/玻璃/侧栏/投影/凹槽那一组令牌，所以这里的每一套都必须 **连表面一起换**，否则就是"紫色版没做完"：紫按钮配一屏海军蓝。 ★ 文字色（--ink-*）紫/薄荷共用 #e6f1ff：#e6f1ff 压在紫底/墨绿底上对比度 都在 13:1 以上。浅色那套必须换成近黑 —— 白底上近白字等于没写。 ★ 语义四色（--ok/--warn/--bad/--info）深色三套不动：红永远是"故障"， 它不该随主题变。浅色那套**必须**压暗一档，见下面浅色块里的注释。 ══════════════════════════════════════════════════════════════════════ */ html[data-theme="紫"]{ --brand-rgb:167 139 250; --brand-900:#1e1046; --brand-700:#5b21b6; --brand-500:#8b5cf6; --brand-400:#a78bfa; --brand-300:#c4b5fd; --bg-0:#08041a; --bg-1:#0c0724; --surface-1:#150d38; --surface-2:#1e1250; --surf-a:rgba(30,18,80,.88); --surf-b:rgba(14,8,42,.90); --glass:rgba(26,15,68,.70); --glass-soft:rgba(18,10,50,.60); --glass-strong:rgba(26,15,68,.95); --side-a:#0b0620; --side-b:#120a2e; --side-c:#180e3c; --well:#150d38; } html[data-theme="薄荷"]{ --brand-rgb:45 212 191; --brand-900:#03302c; --brand-700:#0f766e; --brand-500:#14b8a6; --brand-400:#2dd4bf; --brand-300:#99f6e4; --bg-0:#02110e; --bg-1:#04201b; --surface-1:#07302a; --surface-2:#0a3d35; --surf-a:rgba(10,55,48,.88); --surf-b:rgba(4,26,22,.90); --glass:rgba(8,45,39,.70); --glass-soft:rgba(5,32,27,.60); --glass-strong:rgba(8,45,39,.95); --side-a:#031512; --side-b:#062420; --side-c:#08302a; --well:#07302a; } /* ── 浅色 ──────────────────────────────────────────────────────────── 这不是"深色主题调亮一档"，是三件事得同时翻： ① 表面从"深玻璃"变"白玻璃"——投影也得从黑烟变成浅灰，否则白卡片 底下压一坨黑，脏得比深色还难看。 ② 品牌色要**压暗**。同一个 #00d2ff，当**填充**用在白底上没问题 （配深字），当**文字色**用在白底上只有 1.9:1，等于看不见。 所以 --brand-400 保持当填充，另把 --primary/--primary2 压到 深青给文字用 —— 品牌色一个值干不了两件事。 ③ 语义四色必须压暗：#00e08a / #ffc247 在白底上是 1.6:1 / 1.3:1。 深色主题里它们只做高光，浅色主题里它们做的是**正文**。 ★ color-scheme:light 不能省：滚动条、