/* 时习之 · 多主题调色板
 * 默认（靛蓝 Indigo）在各端 styles.css 的 :root / :root[data-theme="dark"] 中定义。
 * 本文件只补充 竹青 Teal / 霞绯 Rose / 秋杏 Amber 三套，及其暗色变体。
 * 切换轴：html[data-color="teal|rose|amber"]，与 html[data-theme="dark"] 正交组合（2 轴 → 8 态）。
 * 顶栏 logo 固定品牌靛蓝（见 /brand/logo.svg），不随主题变色，保持品牌识别度。
 */

/* ---------- 竹青 Teal（清新平和） ---------- */
:root[data-color="teal"] {
  --primary: #0D9488;
  --primary-d: #0B7C72;
  --primary-soft: #E1F5EE;
  --accent: #F59E0B;
  --accent-soft: #FEF3C7;
}
:root[data-color="teal"][data-theme="dark"] {
  --primary: #2DD4BF;
  --primary-d: #14B8A6;
  --primary-soft: #0F3B36;
  --accent: #FBBF24;
  --accent-soft: #3A2E10;
}

/* ---------- 霞绯 Rose（温暖活力） ---------- */
:root[data-color="rose"] {
  --primary: #DB2777;
  --primary-d: #BE185D;
  --primary-soft: #FBEAF0;
  --accent: #F59E0B;
  --accent-soft: #FEF3C7;
}
:root[data-color="rose"][data-theme="dark"] {
  --primary: #F472B6;
  --primary-d: #EC4899;
  --primary-soft: #3B1326;
  --accent: #FBBF24;
  --accent-soft: #3A2E10;
}

/* ---------- 秋杏 Amber（暖调明快） ---------- */
:root[data-color="amber"] {
  --primary: #D97706;
  --primary-d: #B45309;
  --primary-soft: #FEF3E2;
  --accent: #4F5DFF;
  --accent-soft: #EDF0FF;
}
:root[data-color="amber"][data-theme="dark"] {
  --primary: #FBBF24;
  --primary-d: #F59E0B;
  --primary-soft: #3A2E10;
  --accent: #818CF8;
  --accent-soft: #1E1B4B;
}

/* ---------- 主题选择器组件（三端共用） ---------- */
.theme-swatches { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.theme-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sw); border: 2px solid var(--line);
  cursor: pointer; padding: 0; position: relative;
  transition: transform .12s ease;
}
.theme-dot:hover { transform: scale(1.08); }
.theme-dot.active {
  border-color: var(--ink, var(--text));
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--sw);
}
.theme-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-dot-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
}
