/* 5 套精美主题 + 深浅模式 — 通过 html[data-theme] / html[data-mode] 切换
   默认（经典蓝 / 浅色）作为兜底，首次访问无需 localStorage 也是经典蓝。 */

:root {
  --primary: #1677ff;
  --primary-dark: #0958d9;
  --primary-soft: #e6f4ff;
  --bg: #f0f5ff;
  --bg-2: #e6efff;
  --card: #ffffff;
  --text: #1c2536;
  --text-2: #57617a;
  --border: #d9e6ff;
  --shadow: 0 8px 28px rgba(22, 119, 255, .10);
  --positive: #16a34a;
  --danger: #dc2626;
  --glow: rgba(22, 119, 255, .22);
}

/* 经典蓝（默认）— 极客蓝科技风 */
html[data-theme="classic-blue"] {
  --primary: #1677ff;
  --primary-dark: #0958d9;
  --primary-soft: #e6f4ff;
  --bg: #f0f5ff;
  --bg-2: #e6efff;
  --card: #ffffff;
  --text: #1c2536;
  --text-2: #57617a;
  --border: #d9e6ff;
  --shadow: 0 8px 28px rgba(22, 119, 255, .10);
  --positive: #16a34a;
  --danger: #dc2626;
  --glow: rgba(22, 119, 255, .22);
}
/* 翡翠绿 */
html[data-theme="emerald"] {
  --primary: #059669;
  --primary-dark: #047857;
  --primary-soft: #ecfdf5;
  --bg: #f3f8f5;
  --bg-2: #e7f1ec;
  --card: #ffffff;
  --text: #1e2b25;
  --text-2: #587066;
  --border: #dcebe3;
  --shadow: 0 8px 24px rgba(10, 60, 40, .08);
  --positive: #16a34a;
  --danger: #dc2626;
}
/* 活力橙 */
html[data-theme="vibrant-orange"] {
  --primary: #ea580c;
  --primary-dark: #c2410c;
  --primary-soft: #fff3e9;
  --bg: #fbf6f1;
  --bg-2: #f4e9df;
  --card: #ffffff;
  --text: #2b2118;
  --text-2: #7a6552;
  --border: #efe2d6;
  --shadow: 0 8px 24px rgba(80, 40, 10, .08);
  --positive: #16a34a;
  --danger: #dc2626;
}
/* 葡萄紫 */
html[data-theme="grape"] {
  --primary: #7c3aed;
  --primary-dark: #6d28d9;
  --primary-soft: #f3ecfd;
  --bg: #f7f4fc;
  --bg-2: #ece4f7;
  --card: #ffffff;
  --text: #241a30;
  --text-2: #6a5b78;
  --border: #e6ddf2;
  --shadow: 0 8px 24px rgba(50, 20, 90, .08);
  --positive: #16a34a;
  --danger: #dc2626;
}
/* 黑金 */
html[data-theme="black-gold"] {
  --primary: #c8a24a;
  --primary-dark: #a8842f;
  --primary-soft: #faf3df;
  --bg: #f6f2ea;
  --bg-2: #efe7d8;
  --card: #ffffff;
  --text: #2a2418;
  --text-2: #6f6547;
  --border: #e7dcc6;
  --shadow: 0 8px 24px rgba(70, 50, 10, .1);
  --positive: #16a34a;
  --danger: #dc2626;
}

/* 深色模式 — 在任意主题色基础上覆盖背景与文字 */
html[data-mode="dark"] {
  --bg: #0f172a;
  --bg-2: #1e293b;
  --card: #1a2438;
  --text: #e6edf6;
  --text-2: #9fb0c3;
  --border: #2c3a52;
  --shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --primary-soft: rgba(255, 255, 255, .08);
}