/**
* StarGarden 主题系统
* 用法：在 中引入
* 然后在 之前引入 theme.js（建议放 head 末尾）
*
* 三种模式：auto（跟随系统）/ light / dark
* 切换：SGTheme.cycle() 或在按钮上调用 SGTheme.toggle()
*
* 变量命名规则：--<语义>-<状态>
* --bg-* 背景
* --color-* 文字/图标颜色
* --border-* 边框
* --shadow-* 阴影
* --grad-* 渐变
*/
/* ============ 浅色主题（默认） ============ */
:root,
:root[data-theme="light"] {
/* 页面背景 */
--bg-body: linear-gradient(135deg, #f5f7fa 0%, #e8ecf3 50%, #dde4f0 100%);
--bg-body-solid: #e8ecf3;
/* 卡片/容器背景 */
--bg-card: #ffffff;
--bg-elevated: #ffffff; /* 弹窗、悬浮菜单 */
--bg-input: #ffffff;
--bg-soft: #f5f5f5; /* 次级背景，如表格头、tag */
--bg-hover: #f0f0f5; /* 悬浮态 */
--bg-active: #e8ecff; /* 选中态背景 */
/* 文字 */
--color-text: #333333;
--color-text-secondary: #666666;
--color-text-muted: #999999;
--color-on-primary: #ffffff; /* 主色背景上的文字 */
--color-on-energy: #ffffff;
/* 品牌 */
--color-primary: #667eea;
--color-primary-hover: #5568d6;
--color-secondary: #764ba2;
--grad-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--grad-energy: linear-gradient(135deg, #ffd54f, #ff9800);
/* 边框 */
--border-color: #e0e0e0;
--border-color-hover: #667eea;
--border-color-soft: #f0f0f0;
/* 阴影 */
--shadow-card: 0 4px 15px rgba(0, 0, 0, 0.05);
--shadow-card-hover: 0 10px 30px rgba(102, 126, 234, 0.2);
--shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2);
--shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.05);
--shadow-pill: 0 2px 12px rgba(0, 0, 0, 0.08);
/* 遮罩 */
--overlay-modal: rgba(0, 0, 0, 0.5);
--overlay-heavy: rgba(0, 0, 0, 0.7);
/* 状态色（两套主题通用） */
--color-success: #4caf50;
--color-warning: #ff9800;
--color-danger: #f44336;
--color-info: #667eea;
/* 强调高亮 */
--highlight-primary: #e8ecff;
--highlight-warning: #fff8e1;
--highlight-warning-border: #ffecb3;
--highlight-warning-text: #f9a825;
/* 训练日历已完成态：柔和暖色底 */
--grad-trained: linear-gradient(135deg, #fff3e0, #ffe0b2);
--color-trained-icon: #ff9800;
/* 主题切换按钮自身样式 */
--bg-theme-btn: #f0f0f5;
--color-theme-btn: #666666;
}
/* ============ 深色主题 ============ */
:root[data-theme="dark"] {
/* 页面背景 - 深空蓝紫调，呼应星空主题 */
--bg-body: linear-gradient(135deg, #1a1d2e 0%, #14182a 50%, #0f1325 100%);
--bg-body-solid: #14182a;
/* 卡片/容器背景 */
--bg-card: #1f2336;
--bg-elevated: #252940;
--bg-input: #2a2e45;
--bg-soft: #2a2e45;
--bg-hover: #2f3450;
--bg-active: #3a3f5e;
/* 文字 */
--color-text: #e0e2ec;
--color-text-secondary: #a0a4b8;
--color-text-muted: #6b7088;
--color-on-primary: #ffffff;
--color-on-energy: #ffffff;
/* 品牌 - 深色背景上稍提亮 */
--color-primary: #8a9bf5;
--color-primary-hover: #9dacff;
--color-secondary: #a888c9;
--grad-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--grad-energy: linear-gradient(135deg, #ffd54f, #ff9800);
/* 边框 */
--border-color: #2d3050;
--border-color-hover: #8a9bf5;
--border-color-soft: #252940;
/* 阴影 - 深色背景阴影更柔和 */
--shadow-card: 0 4px 15px rgba(0, 0, 0, 0.3);
--shadow-card-hover: 0 10px 30px rgba(138, 155, 245, 0.25);
--shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);
--shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.2);
--shadow-pill: 0 2px 12px rgba(0, 0, 0, 0.3);
/* 遮罩 */
--overlay-modal: rgba(0, 0, 0, 0.7);
--overlay-heavy: rgba(0, 0, 0, 0.85);
/* 状态色 - 深色背景上稍提亮 */
--color-success: #66bb6a;
--color-warning: #ffa726;
--color-danger: #ef5350;
--color-info: #8a9bf5;
/* 强调高亮 */
--highlight-primary: rgba(138, 155, 245, 0.18);
--highlight-warning: rgba(255, 167, 38, 0.15);
--highlight-warning-border: rgba(255, 167, 38, 0.4);
--highlight-warning-text: #ffa726;
/* 训练日历已完成态：深色下用半透明暖色，避免亮黄扎眼 */
--grad-trained: linear-gradient(135deg, rgba(255, 167, 38, 0.18), rgba(255, 167, 38, 0.10));
--color-trained-icon: #ffa726;
/* 主题切换按钮 */
--bg-theme-btn: #2a2e45;
--color-theme-btn: #a0a4b8;
}
/* ============ 主题切换按钮（共享组件） ============ */
.sg-theme-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: var(--bg-theme-btn);
color: var(--color-theme-btn);
font-size: 17px;
line-height: 1;
cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.2s;
flex-shrink: 0;
padding: 0;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.sg-theme-btn:hover {
transform: scale(1.08);
background: var(--bg-hover);
color: var(--color-primary);
}
.sg-theme-btn:active {
transform: scale(0.95);
}
/* 切换时的过渡（仅对支持的属性，避免影响 transform/动画） */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
transition: background-color 0.3s ease, border-color 0.3s ease,
color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease,
stroke 0.3s ease !important;
}
/* 尊重用户的减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
transition: none !important;
}
}