/* =========================================================
   PrismGrab · 主题定义文件
   ---------------------------------------------------------
   【如何新增一款主题色】
   1. 在「主题色定义」区复制一段 html[data-theme="xxx"]；
   2. 复制对应的暗色微调（可选）；
   3. 复制一段 .dot-xxx 色板圆点渐变；
   4. 在 js/site.config.js 的 themes 列表加 { id: "xxx", name: "名字" }。
   ========================================================= */

/* ---------------- 基础外观变量（亮色） ---------------- */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --card: #ffffff;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --line: rgba(0, 0, 0, 0.09);
  --line-2: rgba(0, 0, 0, 0.055);
  --nav-bg: rgba(255, 255, 255, 0.72);
  --dark-section: #0b0b0d;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-frame: 0 30px 70px -18px rgba(0, 0, 0, 0.28), 0 10px 24px -12px rgba(0, 0, 0, 0.16);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ---------------- 基础外观变量（暗色） ---------------- */
html[data-mode="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-2: #161617;
  --card: #1d1d1f;
  --text: #f5f5f7;
  --text-2: #a1a1a6;
  --line: rgba(255, 255, 255, 0.14);
  --line-2: rgba(255, 255, 255, 0.08);
  --nav-bg: rgba(22, 22, 23, 0.72);
  --dark-section: #0b0b0d;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-frame: 0 30px 70px -18px rgba(0, 0, 0, 0.75), 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ---------------- 主题色定义（亮色） ---------------- */
:root,
html[data-theme="prism"] {
  --accent: #2e7cf6;   /* 主色 */
  --accent-2: #8b5cf6; /* 渐变副色 */
}
html[data-theme="purple"] {
  --accent: #8b5cf6;
  --accent-2: #ec4899;
}
html[data-theme="green"] {
  --accent: #0d9e6e;
  --accent-2: #14b8a6;
}
html[data-theme="orange"] {
  --accent: #f2740d;
  --accent-2: #f43f5e;
}

/* ---------------- 主题色定义（暗色下略微提亮） ---------------- */
html[data-mode="dark"][data-theme="prism"]  { --accent: #5b9bff; --accent-2: #a78bfa; }
html[data-mode="dark"][data-theme="purple"] { --accent: #a78bfa; --accent-2: #f472b6; }
html[data-mode="dark"][data-theme="green"]  { --accent: #2dd4a0; --accent-2: #2dd4bf; }
html[data-mode="dark"][data-theme="orange"] { --accent: #fb923c; --accent-2: #fb7185; }

/* ---------------- 色板弹层里的圆点渐变 ---------------- */
.dot-prism  { background-image: linear-gradient(135deg, #2e7cf6, #8b5cf6); }
.dot-purple { background-image: linear-gradient(135deg, #8b5cf6, #ec4899); }
.dot-green  { background-image: linear-gradient(135deg, #0d9e6e, #14b8a6); }
.dot-orange { background-image: linear-gradient(135deg, #f2740d, #f43f5e); }