/* 主题系统 - 支持明暗模式切换 */

/* 亮色模式颜色变量（默认） */
:root {
    /* 主色调 */
    --primary-green: #21BD62;
    --primary-green-hover: #24CC6A;
    --primary-green-shadow: rgba(33, 189, 98, 0.25);
    
    /* 背景色 */
    --bg-dark: #FFFFFF;
    --bg-primary: #FFFFFF;
    --bg-primary-inverse: #ffffff;
    --bg-primary-inverse2: #ffffff;
    --bg-secondary: #F5F7F6;
    --bg-tertiary: #F0F4F2;
    --bg-hover: rgba(0, 0, 0, 0.02);
    
    /* 文字颜色 */
    --text-primary: #333333;
    --text-primary-inverse: #FFFFFF;
    --text-primary-inverse2: #ffffff;
    --text-primary-inverse3: #ffffff;
    --text-secondary: #666666;
    --text-secondary-inverse: #333333;
    --text-tertiary: #413E40;
    --text-disabled: rgba(100, 116, 139, 0.5);
    --text-light: rgba(0, 0, 0, 0.20);
    
    /* 边框颜色 */
    --border-color: #E2E8F0;
    --border-light: #E9EBEA;
    --border-dark: rgba(51, 51, 51, 0.1);
    --border-dark2: rgba(0, 0, 0, 0.1);
    --border-dark3: #333;
    
    /* 卡片颜色 */
    --card-bg: #FFFFFF;
    --card-border: #F2F2F2;
    
    /* 其他颜色 */
    --accent-blue: #08F;
    --accent-red: #FF383C;
    --accent-orange: #FF6329;
    --accent-orange-alt: #FF7838;
    
    /* 阴影 */
    --shadow-sm: 0px 1px 4px 0px rgba(12, 12, 13, 0.05);
    --shadow-md: 0px 4px 4px -4px rgba(12, 12, 13, 0.05), 0px 16px 16px -8px rgba(12, 12, 13, 0.1);
    --shadow-lg: 0px 8px 10px 0px rgba(20, 24, 26, 0.05);
    
    /* 过渡动画 */
    --transition-duration: 0.3s;
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 暗色模式颜色变量 */
[data-theme="dark"] {
    /* 主色调 - 暗色模式下稍微调亮 */
    --primary-green: #25D46E;
    --primary-green-hover: #24CC6A;
    --primary-green-shadow: rgba(37, 212, 110, 0.3);
    
    /* 背景色 */
    --bg-dark: #181a20;
    --bg-primary: #2A2E38;
    --bg-primary-inverse: #1C242E;
    --bg-primary-inverse2: #1E1E1E;
    --bg-secondary: #292D38;
    --bg-tertiary: #333;
    --bg-hover: rgba(255, 255, 255, 0.05);
    
    /* 文字颜色 */
    --text-primary: #FFFFFF;
    --text-primary-inverse: #333333;
    --text-primary-inverse2: #9CA3AF;
    --text-primary-inverse3: #181A20;
    --text-secondary: #DEE0E4;
    --text-secondary-inverse: #9CA3AF;
    --text-tertiary: #B0B6C0;
    --text-disabled: rgba(222, 224, 228, 0.4);
    --text-light: rgba(255, 255, 255, 0.5);
    
    /* 边框颜色 */
    --border-color: #242C37;
    --border-light: #333;
    --border-dark: rgba(255, 255, 255, 0.1);
    --border-dark2: rgba(255, 255, 255, 0.2);
    --border-dark3: #939393;
    
    /* 卡片颜色 */
    --card-bg: #1F222A;
    --card-border: #242C37;
    
    /* 其他颜色保持不变 */
    --accent-blue: #08F;
    --accent-red: #FF383C;
    --accent-orange: #FF6329;
    --accent-orange-alt: #FF7838;
    
    /* 阴影 - 暗色模式下调整 */
    --shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    --shadow-md: 0px 4px 4px -4px rgba(0, 0, 0, 0.3), 0px 16px 16px -8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0px 8px 10px 0px rgba(0, 0, 0, 0.3);
}

/* 主题切换过渡动画 */
*,
*::before,
*::after {
    transition: background-color var(--transition-duration) var(--transition-timing),
                color var(--transition-duration) var(--transition-timing),
                border-color var(--transition-duration) var(--transition-timing),
                box-shadow var(--transition-duration) var(--transition-timing);
}

/* 保留用户偏好设置 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
    }
}

/* 全局背景和文字颜色应用 */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* 通用样式类 */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

.border-color { border-color: var(--border-color); }
.border-light { border-color: var(--border-light); }
.border-dark { border-color: var(--border-dark); }

.card-bg { 
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

.primary-button {
    background-color: var(--primary-green);
    color: white;
}

.primary-button:hover {
    background-color: var(--primary-green-hover);
}

/* 禁用某些元素的过渡动画 */
.no-transition,
.no-transition *,
.no-transition ::before,
.no-transition ::after {
    transition: none !important;
}

/* View Transition API 支持 */
@supports (view-transition-name: root) {
    /* 为整个文档设置 view-transition-name */
    :root {
        view-transition-name: root;
    }
    
    /* 优化过渡动画性能 */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
    }
    
    /* 禁用默认的淡入淡出动画 */
    ::view-transition-old(root) {
        z-index: 1;
    }
    
    ::view-transition-new(root) {
        z-index: 2;
    }

    [data-theme="dark"]::view-transition-old(root){
        z-index: 100;
    }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--primary-green);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--primary-green-hover);
}