/* 主题变量定义 */
:root {
    /* 深色模式（默认）- 柔和的深色调 */
    --bg-image-overlay: rgba(0, 0, 0, 0.65);
    --bg-gradient-overlay: linear-gradient(135deg, rgba(3, 105, 161, 0.03), rgba(7, 89, 133, 0.03), transparent);
    
    --text-primary: #e8f4f8;
    --text-secondary: rgba(232, 244, 248, 0.85);
    --text-tertiary: rgba(232, 244, 248, 0.65);
    
    --accent-primary: #0891b2;
    --accent-secondary: #0e7490;
    --accent-glow: rgba(8, 145, 178, 0.4);
    
    --border-primary: rgba(8, 145, 178, 0.25);
    --border-hover: rgba(14, 116, 144, 0.45);
    
    --card-bg: rgba(15, 23, 42, 0.4);
    --card-bg-secondary: rgba(30, 41, 59, 0.35);
    --card-bg-hover: rgba(8, 145, 178, 0.15);
    --card-border: rgba(8, 145, 178, 0.3);
    
    --nav-bg: rgba(15, 23, 42, 0.5);
    --nav-border: rgba(8, 145, 178, 0.25);
    
    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-accent: rgba(8, 145, 178, 0.2);
    
    --btn-bg: rgba(8, 145, 178, 0.12);
    --btn-bg-hover: rgba(8, 145, 178, 0.22);
    --btn-border: rgba(8, 145, 178, 0.35);
    
    --rain-color: linear-gradient(transparent, rgba(8, 145, 178, 0.25), rgba(14, 116, 144, 0.4));
    
    /* 项目卡片颜色 */
    --stat-total-bg: linear-gradient(135deg, rgba(8, 145, 178, 0.22), rgba(14, 116, 144, 0.12));
    --stat-total-border: rgba(8, 145, 178, 0.4);
    --stat-completed-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.12));
    --stat-completed-border: rgba(16, 185, 129, 0.4);
    --stat-ongoing-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.12));
    --stat-ongoing-border: rgba(245, 158, 11, 0.4);
    
    --project-card-bg: linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(14, 116, 144, 0.06));
    --project-overlay: linear-gradient(to bottom, rgba(8, 145, 178, 0.12), rgba(14, 116, 144, 0.18), rgba(0, 0, 0, 0.5));
    
    /* 通用半透明元素 */
    --glass-bg-light: rgba(255, 255, 255, 0.08);
    --glass-bg-medium: rgba(255, 255, 255, 0.15);
    --glass-bg-strong: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.2);
}

/* 浅色模式 */
[data-theme="light"] {
    --bg-image-overlay: rgba(255, 255, 255, 0.15);
    --bg-gradient-overlay: linear-gradient(135deg, rgba(224, 242, 254, 0.08), rgba(186, 230, 253, 0.08), transparent);
    
    --text-primary: #0f172a;
    --text-secondary: #1e293b;
    --text-tertiary: #475569;
    
    --accent-primary: #0284c7;
    --accent-secondary: #0369a1;
    --accent-glow: rgba(2, 132, 199, 0.5);
    
    --border-primary: rgba(2, 132, 199, 0.3);
    --border-hover: rgba(3, 105, 161, 0.5);
    
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-bg-secondary: rgba(241, 245, 249, 0.9);
    --card-bg-hover: rgba(224, 242, 254, 0.95);
    --card-border: rgba(2, 132, 199, 0.4);
    
    --nav-bg: rgba(255, 255, 255, 0.9);
    --nav-border: rgba(2, 132, 199, 0.3);
    
    --shadow-color: rgba(0, 0, 0, 0.15);
    --shadow-accent: rgba(2, 132, 199, 0.25);
    
    --btn-bg: rgba(255, 255, 255, 0.8);
    --btn-bg-hover: rgba(224, 242, 254, 0.9);
    --btn-border: rgba(2, 132, 199, 0.4);
    
    --rain-color: linear-gradient(transparent, rgba(2, 132, 199, 0.35), rgba(3, 105, 161, 0.5));
    
    /* 项目卡片颜色 */
    --stat-total-bg: linear-gradient(135deg, rgba(224, 242, 254, 0.9), rgba(186, 230, 253, 0.7));
    --stat-total-border: rgba(2, 132, 199, 0.5);
    --stat-completed-bg: linear-gradient(135deg, rgba(187, 247, 208, 0.9), rgba(134, 239, 172, 0.7));
    --stat-completed-border: rgba(34, 197, 94, 0.5);
    --stat-ongoing-bg: linear-gradient(135deg, rgba(254, 243, 199, 0.9), rgba(253, 230, 138, 0.7));
    --stat-ongoing-border: rgba(245, 158, 11, 0.5);
    
    --project-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(224, 242, 254, 0.5));
    --project-overlay: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(224, 242, 254, 0.15), rgba(255, 255, 255, 0.3));
    
    /* 通用半透明元素 */
    --glass-bg-light: rgba(0, 0, 0, 0.05);
    --glass-bg-medium: rgba(0, 0, 0, 0.08);
    --glass-bg-strong: rgba(0, 0, 0, 0.12);
    --glass-border: rgba(0, 0, 0, 0.15);
}

/* 主题切换按钮 - 导航栏中的版本 */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--btn-bg);
    border: 2px solid var(--btn-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px var(--shadow-color);
    margin-left: 10px;
}

/* 主页中的主题切换按钮 */
.home-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    margin-left: 0;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px var(--shadow-color), 0 0 20px var(--shadow-accent);
}

.home-theme-toggle .theme-icon {
    font-size: 24px;
}

.theme-toggle:hover {
    transform: scale(1.15) rotate(20deg);
    background: var(--btn-bg-hover);
    border-color: var(--border-hover);
    box-shadow: 0 4px 15px var(--shadow-color), 0 0 15px var(--shadow-accent);
}

.home-theme-toggle:hover {
    box-shadow: 0 8px 25px var(--shadow-color), 0 0 30px var(--shadow-accent);
}

.theme-toggle:active {
    transform: scale(0.95) rotate(0deg);
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-icon {
    font-size: 20px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 太阳图标 - 深色模式下显示 */
.sun-icon {
    color: #fbbf24;
    display: block;
}

/* 月亮图标 - 浅色模式下显示 */
.moon-icon {
    color: #3b82f6;
    display: none;
}

[data-theme="light"] .sun-icon {
    display: none;
}

[data-theme="light"] .moon-icon {
    display: block;
}

/* 主题切换动画 */
.theme-transitioning,
.theme-transitioning * {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 雨滴和动画元素不参与主题过渡 */
.raindrop,
[class*="page-exit"],
[class*="page-enter"],
[class*="page-transition"] {
    transition: none !important;
}

/* 响应式 */
@media (max-width: 1024px) {
    .home-theme-toggle {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 768px) {
    .theme-toggle {
        width: 36px;
        height: 36px;
    }
    
    .theme-icon {
        font-size: 18px;
    }
    
    .home-theme-toggle {
        width: 42px;
        height: 42px;
        top: 12px;
        right: 12px;
    }
    
    .home-theme-toggle .theme-icon {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .home-theme-toggle {
        width: 38px;
        height: 38px;
        top: 10px;
        right: 10px;
    }
    
    .home-theme-toggle .theme-icon {
        font-size: 18px;
    }
}

@media (max-width: 360px) {
    .theme-toggle {
        width: 32px;
        height: 32px;
    }
    
    .theme-icon {
        font-size: 16px;
    }
}