/* ============================================================
   theme.css —— 全局主题变量与多套色调风格
   ------------------------------------------------------------
   - 默认（经典蓝）定义在 :root，其余主题用 html[data-theme="xxx"] 覆盖。
   - 只控制「蓝色系主色 + 浅蓝背景/边框 + 深蓝文字」，红/绿/橙功能色不动
     （红=危险/涨、绿=成功/跌、橙=警告，随主题变化会破坏语义）。
   ============================================================ */

:root {
  /* —— 主色系 —— */
  --primary: #3568b4;          /* 主色：按钮、导航高亮、图标 */
  --primary-dark: #23406e;     /* 深色：标题、深色文字、深底 */
  --primary-deep: #2f5fa8;     /* 深蓝：hover、渐变深端 */
  --primary-light: #4a86d8;    /* 浅蓝：渐变浅端、次级高亮 */
  --primary-bright: #1a5fb4;   /* 亮蓝：链接、强调 */
  --primary-lighter: #5b94e0;  /* 更亮蓝：装饰、图标浅色 */
  /* —— 背景 / 边框 —— */
  --bg-tint: #e4ebf5;          /* 浅蓝背景：卡片、列表底 */
  --bg-tint-2: #f6f9fd;        /* 更浅背景：页面底、hover */
  --border-tint: #e0e9f5;      /* 浅蓝边框：分隔线、描边 */
  /* —— 深蓝文字 —— */
  --primary-ink: #274b86;      /* 深蓝文字：次级标题、强调字 */
}

/* ---------- 主题 1：经典蓝（默认，即 :root） ---------- */

/* ---------- 主题 2：青绿 ---------- */
html[data-theme="teal"] {
  --primary: #0f8a7a;
  --primary-dark: #0c4a44;
  --primary-deep: #0e7568;
  --primary-light: #2bb5a0;
  --primary-bright: #0f8a7a;
  --primary-lighter: #48c9b0;
  --bg-tint: #e2f3ef;
  --bg-tint-2: #f1faf7;
  --border-tint: #d3ebe5;
  --primary-ink: #0e5a50;
}

/* ---------- 主题 3：粉色 ---------- */
html[data-theme="emerald"] {
  --primary: #ec4899;
  --primary-dark: #9d174d;
  --primary-deep: #db2777;
  --primary-light: #f472b6;
  --primary-bright: #ec4899;
  --primary-lighter: #f9a8d4;
  --bg-tint: #fdf2f8;
  --bg-tint-2: #fdf7fb;
  --border-tint: #fbcfe8;
  --primary-ink: #9d174d;
}

/* ---------- 主题 4：紫罗兰 ---------- */
html[data-theme="violet"] {
  --primary: #6a4dd8;
  --primary-dark: #3c2a78;
  --primary-deep: #5a3fc0;
  --primary-light: #8b72e8;
  --primary-bright: #6a4dd8;
  --primary-lighter: #a18bf0;
  --bg-tint: #ece8fb;
  --bg-tint-2: #f6f4fd;
  --border-tint: #ddd6f5;
  --primary-ink: #3c2a78;
}

/* ---------- 主题 5：婴儿蓝 Baby Blue ---------- */
html[data-theme="babyblue"] {
  --primary: #5fb3ea;
  --primary-dark: #2e6ea8;
  --primary-deep: #4398d8;
  --primary-light: #85c7f2;
  --primary-bright: #5fb3ea;
  --primary-lighter: #b3dcf7;
  --bg-tint: #e9f4fc;
  --bg-tint-2: #f4fafd;
  --border-tint: #d7ecfb;
  --primary-ink: #2e6ea8;
}