/* ========================================
   暗色模式变量 - Dark Mode CSS
   ======================================== */

/* 亮色模式（默认） */
:root,
[data-theme="light"] {
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --secondary-color: #ec4899;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-dark: #111827;
    --border-color: rgba(0, 0, 0, 0.1);
    --card-bg: #ffffff;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --navbar-bg: rgba(255, 255, 255, 0.8);
    --input-bg: #f9fafb;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    --hero-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --glow-color: rgba(99, 102, 241, 0.3);
    --particle-color: #6366f1;
}

/* 暗色模式 */
[data-theme="dark"] {
    --primary-color: #818cf8;
    --primary-dark: #6366f1;
    --secondary-color: #f472b6;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-dark: #020617;
    --border-color: rgba(255, 255, 255, 0.1);
    --card-bg: #1e293b;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --navbar-bg: rgba(15, 23, 42, 0.9);
    --input-bg: #1e293b;
    --accent-gradient: linear-gradient(135deg, #818cf8 0%, #f472b6 100%);
    --hero-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --glow-color: rgba(129, 140, 248, 0.4);
    --particle-color: #818cf8;
}

/* 暗色模式样式覆盖 */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .navbar {
    background: var(--navbar-bg);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: var(--primary-color);
}

[data-theme="dark"] .hero {
    background: var(--hero-gradient);
}

[data-theme="dark"] .floating-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .card-text {
    color: var(--text-primary);
}

[data-theme="dark"] .about {
    background: var(--bg-secondary);
}

[data-theme="dark"] .image-placeholder {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
}

[data-theme="dark"] .skill-tag {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .skill-tag:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

[data-theme="dark"] .stat-item {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

[data-theme="dark"] .portfolio {
    background: var(--bg-primary);
}

[data-theme="dark"] .project-card {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

[data-theme="dark"] .project-image {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
}

[data-theme="dark"] .project-tags span {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .contact {
    background: var(--hero-gradient);
}

[data-theme="dark"] .contact-item {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

[data-theme="dark"] .social-link {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

[data-theme="dark"] .social-link:hover {
    background: var(--primary-color);
}

[data-theme="dark"] .contact-form {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

[data-theme="dark"] .form-group label {
    color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary:hover {
    background: var(--text-primary);
    color: var(--bg-primary);
}

[data-theme="dark"] .nav-toggle span {
    background: var(--text-primary);
}

[data-theme="dark"] .mouse {
    border-color: var(--text-secondary);
}

[data-theme="dark"] .scroll-indicator {
    color: var(--text-secondary);
}

/* 暗色模式下的毛玻璃效果 */
[data-theme="dark"] .glass {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* 暗色模式过渡动画 */
body,
.navbar,
.hero,
.about,
.portfolio,
.contact,
.floating-card,
.project-card,
.contact-item,
.contact-form,
.stat-item,
.skill-tag,
.social-link,
.btn-secondary,
.form-group input,
.form-group textarea {
    transition: background-color 0.5s ease, 
                color 0.5s ease, 
                border-color 0.5s ease,
                box-shadow 0.5s ease;
}

/* 移动端导航暗色模式 */
@media (max-width: 768px) {
    [data-theme="dark"] .nav-menu {
        background: var(--bg-secondary);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }
}