/* variants.css -- 荧光配色（皮肤之上的「颜色」这一轴）。
 *
 * ⚠️ 本文件由 `scripts/gen_theme_variants.py` 从 `bebot/features/themes.py::VARIANTS`
 *    生成。**不要手工改**：值必须与注册表逐字相同，否则同一台设备在
 *    「能调到解析接口」与「只能读静态 CSS」两种情况下会看到两种颜色
 *    （`tests/test_webapp_skins.py` 逐值比对就是抓这个的）。
 *    改配色 → 改注册表 → 重跑本生成器。
 *
 * 为什么「配色」是与「皮肤」分开的一轴：
 *    换颜色不许能挪动家具。绿换红必须保持同样的字体、圆角、扫描线与动效；
 *    如果每种颜色各做一个皮肤，每个都要把 21 个表现层令牌再写一遍，
 *    第六个必然与第一个有细微差别。所以这里**只覆盖色彩族**
 *    （见 themes.py::PALETTE_TOKENS），一个表现层令牌都不碰。
 *
 * 选择器为什么用属性而不是类：与 `data-skin` 一致 —— 由 theme.js 写在根元素上，
 * 首帧即生效，不需要等 JS 跑完再补一层。
 *
 * 资源版本：引用本文件必须带 ?v=版本号（Cloudflare 对 /static/*.css 缓存 4 小时）。
 */

/* green -- 出厂默认（= 皮肤自带的配色，选它等于不覆盖任何东西） */
:root[data-variant="green"] {
  --bg: #040805;
  --bg-elevated: #08120a;
  --text: #cdfadb;
  --muted: #6eae86;
  --accent: #3dff8a;
  --accent-text: #03150a;
  --border: #1e3d29;
  --danger: #ff6f5e;
  --ok: #3dff8a;
  --bg-sunken: #020502;
  --bg-raised: #0d1d11;
  --text-dim: #8fc7a4;
  --accent-soft: rgba(61, 255, 138, 0.10);
  --accent-line: rgba(61, 255, 138, 0.32);
  --warn: #ffd25e;
  --info: #86d9ff;
}

/* black */
:root[data-variant="black"] {
  --bg: #050505;
  --bg-elevated: #0c0c0c;
  --text: #ededed;
  --muted: #8a8a8a;
  --accent: #d6d6d6;
  --accent-text: #0a0a0a;
  --border: #262626;
  --danger: #ff6f5e;
  --ok: #9ee493;
  --bg-sunken: #000000;
  --bg-raised: #151515;
  --text-dim: #a8a8a8;
  --accent-soft: rgba(214, 214, 214, 0.10);
  --accent-line: rgba(214, 214, 214, 0.30);
  --warn: #ffd25e;
  --info: #9ec9e8;
}

/* red */
:root[data-variant="red"] {
  --bg: #0a0404;
  --bg-elevated: #150808;
  --text: #ffdcd6;
  --muted: #c07a6e;
  --accent: #ff5c5c;
  --accent-text: #1a0404;
  --border: #43201d;
  --danger: #ff9d7a;
  --ok: #8fe08a;
  --bg-sunken: #050202;
  --bg-raised: #201010;
  --text-dim: #e0a79c;
  --accent-soft: rgba(255, 92, 92, 0.10);
  --accent-line: rgba(255, 92, 92, 0.32);
  --warn: #ffd25e;
  --info: #9ec9e8;
}

/* orange */
:root[data-variant="orange"] {
  --bg: #090602;
  --bg-elevated: #130d05;
  --text: #ffe6bd;
  --muted: #b8935a;
  --accent: #ffb84a;
  --accent-text: #180d02;
  --border: #453520;
  --danger: #ff7a5e;
  --ok: #a8e08a;
  --bg-sunken: #050300;
  --bg-raised: #1c1409;
  --text-dim: #dcbc85;
  --accent-soft: rgba(255, 184, 74, 0.10);
  --accent-line: rgba(255, 184, 74, 0.32);
  --warn: #ffe08a;
  --info: #9ec9e8;
}

/* grey */
:root[data-variant="grey"] {
  --bg: #0a0b0c;
  --bg-elevated: #141618;
  --text: #dfe4e8;
  --muted: #828c95;
  --accent: #a8b3bd;
  --accent-text: #0d0f11;
  --border: #2c3237;
  --danger: #f0897c;
  --ok: #9ecf9a;
  --bg-sunken: #060708;
  --bg-raised: #1d2023;
  --text-dim: #a7b0b8;
  --accent-soft: rgba(168, 179, 189, 0.10);
  --accent-line: rgba(168, 179, 189, 0.30);
  --warn: #e5c37a;
  --info: #9fc4dd;
}

/* white */
:root[data-variant="white"] {
  --bg: #070807;
  --bg-elevated: #101211;
  --text: #f4f8f5;
  --muted: #97a39b;
  --accent: #f2f7f3;
  --accent-text: #0a0c0a;
  --border: #2b302d;
  --danger: #ff7a6a;
  --ok: #a9e6a4;
  --bg-sunken: #030403;
  --bg-raised: #181b19;
  --text-dim: #c3cbc6;
  --accent-soft: rgba(242, 247, 243, 0.08);
  --accent-line: rgba(242, 247, 243, 0.28);
  --warn: #ffe08a;
  --info: #a8cfe8;
}

/* 深色滚动条/表单控件跟随配色（基础皮肤有自己的 color-scheme，别在这里抢）。 */
:root[data-variant]:not([data-skin="base"]) {
  color-scheme: dark;
}
