/* ==========================================================================
   风格配色系统
   ==========================================================================
   分工：**DB 决定有哪些风格，这里决定风格长什么样。**
   styles 表里每行带一个 palette_key；这里按 html[data-style="<key>"] 提供配色。
   新增风格时即便没有对应 CSS 块也能立刻用（回退 default），补一段就是专属配色。

   为什么配色不存 DB：DB 写不了 CSS，运行时注入必然导致首屏闪烁。
   放在 CSS 里，index.html 的内联脚本在首帧前就设好属性，零闪烁。

   与 themes.css 的关系：两个正交属性。
   - data-theme 管表面色（--bg-* / --text-*）
   - data-style 只管氛围层与强调色（--aurora-* / --style-*）
   互不干扰，所以明暗切换逻辑不用改。亮色变体靠选择器权重天然覆盖。

   变量值是「空格分隔的 RGB 三元组」而不是颜色本身，
   这样同一个色相能喂给渐变里的多个透明度停靠点：rgb(var(--aurora-1) / 0.34)。
   ========================================================================== */

/* ---------------------------------------------------------------- 默认（暖调） */
/* 原来是紫青粉那套霓虹。改成暖色系 —— 琥珀 / 暖金 / 陶土。
   和暖色斑块、暖底色是一套的；霓虹那套和「温馨」是相冲的。
   注意：其他风格（通勤的蓝、复古的赭……）不动 ——
   「选风格换配色」是这个站的功能，默认色只是默认。 */
:root,
html[data-style="default"] {
  --aurora-1: 255 152 88;
  --aurora-2: 255 196 92;
  --aurora-3: 214 106 74;
  --style-accent: #d97a4a;
  --style-accent-ink: #f2c9a4;
}

/* ---------------------------------------------------------------- 通勤：冷静利落的蓝 */
html[data-style="commute"] {
  --aurora-1: 59 130 246;
  --aurora-2: 34 211 238;
  --aurora-3: 99 102 241;
  --style-accent: #3b82f6;
  --style-accent-ink: #9cc3ff;
}

/* ---------------------------------------------------------------- 日常：明快暖调 */
html[data-style="daily"] {
  --aurora-1: 255 138 61;
  --aurora-2: 255 210 61;
  --aurora-3: 255 92 138;
  --style-accent: #ff8a3d;
  --style-accent-ink: #ffc79a;
}

/* ---------------------------------------------------------------- 复古：胶片感的芥黄 / 橄榄 / 赭红 */
html[data-style="retro"] {
  --aurora-1: 212 160 23;
  --aurora-2: 124 143 78;
  --aurora-3: 193 85 46;
  --style-accent: #d4a017;
  --style-accent-ink: #e8cf8a;
}

/* ==========================================================================
   005 迁移补的 7 个风格
   每个用一组能一眼分开的色相，避免切了跟没切一样。
   配色块缺了也不会坏 —— 前端回退 default（见文件头的说明）。
   ========================================================================== */

/* ---------------------------------------------------------------- 极简：冷灰蓝，低饱和 */
html[data-style="minimal"] {
  --aurora-1: 148 163 184;
  --aurora-2: 100 116 139;
  --aurora-3: 71 85 105;
  --style-accent: #94a3b8;
  --style-accent-ink: #cbd5e1;
}

/* ---------------------------------------------------------------- 街头：高饱和紫 / 青 / 玫红 */
html[data-style="street"] {
  --aurora-1: 139 92 246;
  --aurora-2: 34 211 238;
  --aurora-3: 244 63 94;
  --style-accent: #8b5cf6;
  --style-accent-ink: #c4b5fd;
}

/* ---------------------------------------------------------------- 学院：藏青 / 酒红 / 芥黄 */
html[data-style="preppy"] {
  --aurora-1: 37 99 235;
  --aurora-2: 190 24 93;
  --aurora-3: 245 158 11;
  --style-accent: #e0407a;
  --style-accent-ink: #f9a8d4;
}

/* ---------------------------------------------------------------- 运动：荧光绿 / 青 */
html[data-style="sporty"] {
  --aurora-1: 132 204 22;
  --aurora-2: 6 182 212;
  --aurora-3: 250 204 21;
  --style-accent: #84cc16;
  --style-accent-ink: #bef264;
}

/* ---------------------------------------------------------------- 甜美：粉 / 淡紫 */
html[data-style="sweet"] {
  --aurora-1: 244 114 182;
  --aurora-2: 192 132 252;
  --aurora-3: 251 207 232;
  --style-accent: #f472b6;
  --style-accent-ink: #fbcfe8;
}

/* ---------------------------------------------------------------- 优雅：香槟金 / 紫 */
html[data-style="elegant"] {
  --aurora-1: 212 175 55;
  --aurora-2: 124 92 160;
  --aurora-3: 200 170 220;
  --style-accent: #d4af37;
  --style-accent-ink: #ecd28a;
}

/* ---------------------------------------------------------------- 户外：橄榄 / 卡其 */
html[data-style="outdoor"] {
  --aurora-1: 168 162 158;
  --aurora-2: 120 113 108;
  --aurora-3: 101 163 13;
  --style-accent: #84a13c;
  --style-accent-ink: #c3d69b;
}

/* ==========================================================================
   亮色变体
   同色相压深降饱和 —— 亮底上直接用霓虹色对比度不够，读不清。
   双属性选择器的权重高于上面的单属性选择器，所以无需 !important 就能覆盖。
   ========================================================================== */

html[data-theme="light"][data-style="default"] {
  --aurora-1: 214 106 74;
  --aurora-2: 196 138 48;
  --aurora-3: 176 82 62;
  --style-accent: #c2663c;
  --style-accent-ink: #9a4526;
}
html[data-theme="light"][data-style="commute"] {
  --aurora-1: 37 99 235;
  --aurora-2: 8 145 178;
  --aurora-3: 79 70 229;
  --style-accent: #2563eb;
  --style-accent-ink: #1d4ed8;
}
html[data-theme="light"][data-style="daily"] {
  --aurora-1: 234 88 12;
  --aurora-2: 202 138 4;
  --aurora-3: 219 39 119;
  --style-accent: #c2410c;
  --style-accent-ink: #9a3412;
}
html[data-theme="light"][data-style="retro"] {
  --aurora-1: 161 98 7;
  --aurora-2: 77 94 43;
  --aurora-3: 154 52 18;
  --style-accent: #a16207;
  --style-accent-ink: #854d0e;
}
html[data-theme="light"][data-style="minimal"] {
  --aurora-1: 100 116 139;
  --aurora-2: 71 85 105;
  --aurora-3: 51 65 85;
  --style-accent: #475569;
  --style-accent-ink: #334155;
}
html[data-theme="light"][data-style="street"] {
  --aurora-1: 124 58 237;
  --aurora-2: 14 116 144;
  --aurora-3: 225 29 72;
  --style-accent: #7c3aed;
  --style-accent-ink: #5b21b6;
}
html[data-theme="light"][data-style="preppy"] {
  --aurora-1: 29 78 216;
  --aurora-2: 157 23 77;
  --aurora-3: 180 83 9;
  --style-accent: #be185d;
  --style-accent-ink: #9d174d;
}
html[data-theme="light"][data-style="sporty"] {
  --aurora-1: 77 124 15;
  --aurora-2: 14 116 144;
  --aurora-3: 161 98 7;
  --style-accent: #4d7c0f;
  --style-accent-ink: #3f6212;
}
html[data-theme="light"][data-style="sweet"] {
  --aurora-1: 219 39 119;
  --aurora-2: 147 51 234;
  --aurora-3: 190 24 93;
  --style-accent: #db2777;
  --style-accent-ink: #be185d;
}
html[data-theme="light"][data-style="elegant"] {
  --aurora-1: 161 98 7;
  --aurora-2: 107 33 168;
  --aurora-3: 126 34 206;
  --style-accent: #a16207;
  --style-accent-ink: #854d0e;
}
html[data-theme="light"][data-style="outdoor"] {
  --aurora-1: 87 83 78;
  --aurora-2: 68 64 60;
  --aurora-3: 77 124 15;
  --style-accent: #57534e;
  --style-accent-ink: #44403c;
}

/* ==========================================================================
   风格强调色的应用点
   只用在筛选 chip 和少数标记上，不碰品牌渐变（--grad-*）——
   否则切个筛选会把站标也换色，品牌一致性就没了。
   ========================================================================== */

.chip--style.is-active {
  color: #fff;
  background: var(--style-accent);
  border-color: transparent;
}

.tag--style {
  color: var(--style-accent-ink);
  border-color: color-mix(in srgb, var(--style-accent) 45%, transparent);
}

/* 风格徽章上的一个小色点，让标签本身带出该风格的颜色 */
.style-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--style-accent);
  flex-shrink: 0;
}