/* ========================================
   AiMarkmap 主题系统
   使用 CSS 自定义属性实现 Light/Dark 切换
   ======================================== */

/* --- Light 主题（默认） --- */
:root,
[data-theme="light"] {
    /* 背景 */
    --bg-gradient-start: #667eea;
    --bg-gradient-end: #764ba2;

    /* 面板 */
    --panel-bg: rgba(255, 255, 255, 0.95);
    --panel-header-bg: rgba(102, 126, 234, 0.1);
    --panel-header-border: rgba(102, 126, 234, 0.2);
    --panel-section-bg: rgba(255, 255, 255, 0.8);

    /* 文字 */
    --text-primary: #333;
    --text-secondary: #666;
    --text-accent: #4c63d2;
    --text-accent-alt: #5a67d8;

    /* 输入框 */
    --input-bg: #fafafa;
    --input-border: #ddd;

    /* 边框 */
    --border-color: #e0e0e0;
    --border-light: #eee;

    /* 按钮（渐变） */
    --btn-primary-start: #667eea;
    --btn-primary-end: #764ba2;
    --btn-primary-hover-start: #5a67d8;
    --btn-primary-hover-end: #6b46c1;
    --btn-secondary-start: #e3f2fd;
    --btn-secondary-end: #f3e5f5;
    --btn-secondary-hover-start: #bbdefb;
    --btn-secondary-hover-end: #e1bee7;
    --btn-md-start: #e8f5e8;
    --btn-md-end: #f0f8ff;
    --btn-md-hover-start: #c8e6c9;
    --btn-md-hover-end: #e3f2fd;
    --btn-clear-start: #ffebee;
    --btn-clear-end: #fce4ec;
    --btn-clear-hover-start: #ffcdd2;
    --btn-clear-hover-end: #f8bbd9;

    /* 思维导图 */
    --mindmap-bg: #ffffff;
    --mindmap-header-start: #667eea;
    --mindmap-header-end: #764ba2;

    /* 模态框 */
    --modal-bg: #fdfdff;
    --modal-overlay: rgba(0, 0, 0, 0.6);

    /* 右键菜单 */
    --context-menu-bg: #ffffff;
    --context-menu-hover: #f5f5f5;

    /* Loading */
    --loading-bg: rgba(255, 255, 255, 0.9);
    --spinner-track: #f3f3f3;
    --spinner-active: #4c63d2;

    /* 滑块 */
    --slider-bg-start: #e3f2fd;
    --slider-bg-end: #f3e5f5;
    --slider-thumb-bg: #fff;
    --slider-thumb-border: #8b9bed;
    --slider-thumb-hover-bg: #667eea;

    /* 提示框 */
    --tip-bg: #e3f2fd;
    --tip-border: #90caf9;
    --tip-text: #1e88e5;

    /* 移动端 */
    --mobile-menu-bg: rgba(255, 255, 255, 0.98);
    --tab-bar-bg: white;

    /* 导出按钮 */
    --export-btn-bg: rgba(255, 255, 255, 0.2);
    --export-btn-hover: rgba(255, 255, 255, 0.3);
    --export-btn-border: rgba(255, 255, 255, 0.3);

    /* Info modal */
    --info-h2-border: #eee;
    --info-code-bg: rgba(102, 126, 234, 0.1);

    /* 阴影 */
    --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-btn-hover: 0 4px 12px rgba(102, 126, 234, 0.3);

    /* 主题切换按钮 */
    --theme-toggle-color: white;
}

/* --- Dark 主题 --- */
[data-theme="dark"] {
    /* 背景 */
    --bg-gradient-start: #0f0c29;
    --bg-gradient-end: #302b63;

    /* 面板 */
    --panel-bg: rgba(30, 30, 50, 0.95);
    --panel-header-bg: rgba(80, 100, 200, 0.15);
    --panel-header-border: rgba(80, 100, 200, 0.25);
    --panel-section-bg: rgba(40, 40, 60, 0.8);

    /* 文字 */
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0b0;
    --text-accent: #8b9bed;
    --text-accent-alt: #a5b4fc;

    /* 输入框 */
    --input-bg: #1e1e2e;
    --input-border: #3a3a5a;

    /* 边框 */
    --border-color: #3a3a5a;
    --border-light: #2a2a4a;

    /* 按钮（渐变） */
    --btn-primary-start: #5a67d8;
    --btn-primary-end: #6b46c1;
    --btn-primary-hover-start: #667eea;
    --btn-primary-hover-end: #764ba2;
    --btn-secondary-start: rgba(80, 100, 200, 0.2);
    --btn-secondary-end: rgba(100, 60, 160, 0.2);
    --btn-secondary-hover-start: rgba(80, 100, 200, 0.35);
    --btn-secondary-hover-end: rgba(100, 60, 160, 0.35);
    --btn-md-start: rgba(40, 100, 40, 0.2);
    --btn-md-end: rgba(40, 80, 120, 0.2);
    --btn-md-hover-start: rgba(40, 100, 40, 0.35);
    --btn-md-hover-end: rgba(40, 80, 120, 0.35);
    --btn-clear-start: rgba(120, 40, 40, 0.2);
    --btn-clear-end: rgba(120, 30, 50, 0.2);
    --btn-clear-hover-start: rgba(120, 40, 40, 0.35);
    --btn-clear-hover-end: rgba(120, 30, 50, 0.35);

    /* 思维导图 */
    --mindmap-bg: #1a1a2e;
    --mindmap-header-start: #302b63;
    --mindmap-header-end: #24243e;

    /* 模态框 */
    --modal-bg: #1e1e2e;
    --modal-overlay: rgba(0, 0, 0, 0.75);

    /* 右键菜单 */
    --context-menu-bg: #2a2a3e;
    --context-menu-hover: #3a3a5a;

    /* Loading */
    --loading-bg: rgba(30, 30, 50, 0.9);
    --spinner-track: #2a2a3e;
    --spinner-active: #8b9bed;

    /* 滑块 */
    --slider-bg-start: rgba(80, 100, 200, 0.2);
    --slider-bg-end: rgba(100, 60, 160, 0.2);
    --slider-thumb-bg: #2a2a3e;
    --slider-thumb-border: #8b9bed;
    --slider-thumb-hover-bg: #667eea;

    /* 提示框 */
    --tip-bg: rgba(30, 60, 100, 0.3);
    --tip-border: rgba(100, 150, 220, 0.3);
    --tip-text: #90caf9;

    /* 移动端 */
    --mobile-menu-bg: rgba(30, 30, 50, 0.98);
    --tab-bar-bg: #1e1e2e;

    /* 导出按钮 */
    --export-btn-bg: rgba(255, 255, 255, 0.1);
    --export-btn-hover: rgba(255, 255, 255, 0.2);
    --export-btn-border: rgba(255, 255, 255, 0.2);

    /* Info modal */
    --info-h2-border: #3a3a5a;
    --info-code-bg: rgba(80, 100, 200, 0.2);

    /* 阴影 */
    --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-btn-hover: 0 4px 12px rgba(80, 100, 200, 0.4);

    /* 主题切换按钮 */
    --theme-toggle-color: #e0e0e0;
}

/* --- 主题切换按钮样式 --- */
.theme-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--theme-toggle-color);
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.3s ease, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle-btn:hover {
    transform: scale(1.2) rotate(15deg);
    opacity: 0.85;
}

/* --- 主题过渡动画 --- */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}