/* ===== 基础样式重置 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== 主题变量定义 ===== */

/* 默认主题 - 青色科技 */
:root,
[data-theme="teal"] {
    --primary: #0d1518;
    --primary-light: #0f2027;
    --primary-dark: #080c0e;
    --accent: #20c997;
    --accent-light: #38d9a9;
    --accent-dark: #12b886;
    --secondary: #0ca678;
    --bg-dark: #080c0e;
    --bg-card: #0d1518;
    --bg-card-hover: #121f24;
    --text-primary: #e8f5f0;
    --text-secondary: #99e6c8;
    --text-muted: #5fb593;
    --border: rgba(32, 201, 151, 0.15);
    --gradient-1: linear-gradient(135deg, #0d1518 0%, #0f2027 100%);
    --gradient-2: linear-gradient(135deg, #20c997 0%, #38d9a9 100%);
    --gradient-accent: linear-gradient(135deg, #20c997 0%, #12b886 100%);
    --shadow-glow: 0 0 40px rgba(32, 201, 151, 0.4);
    --particle-color: 32, 201, 151;
    --orbit-1: #20c997;
    --orbit-2: #38d9a9;
    --orbit-3: #0ca678;
}

/* 极简白主题 */
[data-theme="minimal"] {
    --primary: #f8f9fa;
    --primary-light: #ffffff;
    --primary-dark: #e9ecef;
    --accent: #0d6efd;
    --accent-light: #3d8bfd;
    --accent-dark: #0a58ca;
    --secondary: #6c757d;
    --bg-dark: #ffffff;
    --bg-card: #f8f9fa;
    --bg-card-hover: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --border: rgba(0, 0, 0, 0.08);
    --gradient-1: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --gradient-2: linear-gradient(135deg, #0d6efd 0%, #3d8bfd 100%);
    --gradient-accent: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    --shadow-glow: 0 0 40px rgba(13, 110, 253, 0.2);
    --particle-color: 13, 110, 253;
    --orbit-1: #0d6efd;
    --orbit-2: #6c757d;
    --orbit-3: #3d8bfd;
}

/* 主题过渡动画 */
body {
    transition: background-color 0.5s ease, color 0.3s ease;
}

/* 极简白主题特殊处理 */
[data-theme="minimal"] .navbar {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="minimal"] .navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="minimal"] .mobile-menu {
    background: rgba(255, 255, 255, 0.98);
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="minimal"] .hero-badge {
    background: rgba(13, 110, 253, 0.08);
    border: 1px solid rgba(13, 110, 253, 0.2);
}

[data-theme="minimal"] .logo-icon {
    color: #0d6efd;
}

[data-theme="minimal"] .concept-icon i,
[data-theme="minimal"] .module-icon i,
[data-theme="minimal"] .modal-icon i,
[data-theme="minimal"] .center-core i {
    color: #212529;
}

[data-theme="minimal"] .modal-overlay {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="minimal"] .theme-dropdown {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

[data-theme="minimal"] .stat-card,
[data-theme="minimal"] .concept-card,
[data-theme="minimal"] .module-card,
[data-theme="minimal"] .task-card,
[data-theme="minimal"] .story-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="minimal"] .stat-card:hover,
[data-theme="minimal"] .concept-card:hover,
[data-theme="minimal"] .module-card:hover,
[data-theme="minimal"] .task-card:hover {
    border-color: rgba(13, 110, 253, 0.3);
}

[data-theme="minimal"] .particles-canvas {
    opacity: 0.3;
}

[data-theme="minimal"] .gradient-text {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}