/* ====================
   深色模式全局样式
   ==================== */

:root {
    --dark-bg-primary: #111827;
    --dark-bg-secondary: #1f2937;
    --dark-bg-surface: #374151;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #d1d5db;
    --dark-text-muted: #9ca3af;
    --dark-border: rgba(255, 255, 255, 0.15);
    --dark-border-light: rgba(255, 255, 255, 0.1);
    --dark-accent: #60a5fa;
    --dark-primary: #165DFF;
    --dark-success: #10b981;
    --dark-warning: #f59e0b;
    --dark-error: #ef4444;
    --transition-duration: 0.4s;
}

/* 深色模式基础样式 */
[data-theme="dark"] body {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-neutral-50 {
    background-color: var(--dark-bg-primary) !important;
}

[data-theme="dark"] .text-neutral-800,
[data-theme="dark"] .text-gray-800 {
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] .text-neutral-600,
[data-theme="dark"] .text-gray-600 {
    color: var(--dark-text-secondary) !important;
}

[data-theme="dark"] .text-neutral-500,
[data-theme="dark"] .text-gray-500 {
    color: var(--dark-text-muted) !important;
}

[data-theme="dark"] .border-neutral-200,
[data-theme="dark"] .border-gray-200 {
    border-color: var(--dark-border) !important;
}

/* 卡片和容器 */
[data-theme="dark"] .liquid-glass-card,
[data-theme="dark"] .surface {
    background: linear-gradient(145deg, rgba(30,41,59,0.8), rgba(17,24,39,0.9)) !important;
    border-color: var(--dark-border) !important;
}

[data-theme="dark"] .liquid-glass {
    background: linear-gradient(135deg, rgba(55,65,81,0.6), rgba(30,41,59,0.4)) !important;
    border-color: var(--dark-border) !important;
}

[data-theme="dark"] .liquid-glass-nav {
    background: linear-gradient(135deg, rgba(30,30,30,0.9), rgba(20,20,20,0.8)) !important;
}

[data-theme="dark"] .liquid-glass-footer {
    background: linear-gradient(180deg, rgba(30,41,59,0.9), rgba(17,24,39,0.8)) !important;
}

/* 按钮 */
[data-theme="dark"] .btn-primary {
    background: var(--dark-primary) !important;
    border-color: var(--dark-primary) !important;
}

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

/* 输入框和表单 */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--dark-text-muted) !important;
}

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

/* 图标颜色 */
[data-theme="dark"] i.fa {
    color: inherit !important;
}

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

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

/* 社交图标 */
[data-theme="dark"] .fa-weixin,
[data-theme="dark"] .fa-envelope,
[data-theme="dark"] .fa-qq {
    color: var(--dark-text-primary) !important;
}

/* 主题切换按钮 */
.theme-toggle-btn {
    position: relative;
    width: 56px;
    height: 28px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,0.3), rgba(255,255,255,0.15));
    box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.6), inset 0 -1px 1px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.theme-toggle-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,0.7);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
}

.theme-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .theme-toggle-knob {
    left: calc(100% - 26px);
    background: linear-gradient(145deg, #3a3a3c, #2d2d2f);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.theme-icon {
    font-size: 12px;
    position: absolute;
    transition: all 0.4s ease;
}

.theme-toggle-knob .sun-icon {
    color: #fbbf24;
    opacity: 1;
    transform: rotate(0deg);
}

.theme-toggle-knob .moon-icon {
    color: #a1a1a6;
    opacity: 0;
    transform: rotate(-90deg);
}

[data-theme="dark"] .theme-toggle-knob .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

[data-theme="dark"] .theme-toggle-knob .moon-icon {
    opacity: 1;
    transform: rotate(0deg);
}