/* ============================================
   主题系统 - 粉紫色模式（默认）
   ============================================ */

:root {
    /* 霓虹粉 + 紫色系（统一色彩系统） */
    --color-primary-50: #fff0f8;
    --color-primary-100: #fce7f3;
    --color-primary-200: #fbcfe8;
    --color-primary-300: #f9a8d4;
    --color-primary-400: #f472b6;
    --color-primary-500: #ff69b4;
    --color-primary-600: #ec4899;
    --color-primary-700: #be185d;
    --color-primary-800: #9d174d;
    --color-primary-900: #831843;

    /* 紫色辅助 */
    --color-purple-400: #c084fc;
    --color-purple-500: #a855f7;
    --color-purple-600: #9333ea;
    --color-purple-700: #7e22ce;
    --color-purple-900: #581c87;

    /* 中性色 */
    --color-neutral-50: #fafafa;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a3a3a3;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
    --color-neutral-900: #171717;

    /* 功能色 */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* 渐变定义 - 霓虹粉 + 紫 */
    --gradient-primary: linear-gradient(135deg, #ff69b4 0%, #ec4899 30%, #a855f7 70%, #9370db 100%);
    --gradient-secondary: linear-gradient(135deg, #f9a8d4 0%, #f472b6 50%, #c084fc 100%);
    --gradient-accent: linear-gradient(135deg, #f0abfc 0%, #ec4899 50%, #c026d3 100%);
    --gradient-subtle: linear-gradient(135deg, #fff0f8 0%, #fce7f3 25%, #f3e8ff 75%, #e9d5ff 100%);
    --gradient-neon: linear-gradient(135deg, #ff69b4 0%, #ec4899 30%, #a855f7 70%, #9370db 100%);
    --gradient-card: linear-gradient(135deg, rgba(255,105,180,0.04) 0%, rgba(168,85,247,0.04) 100%);

    /* 背景和文字颜色（粉紫色模式） */
    --bg-primary: linear-gradient(180deg, #fff0f8 0%, #f0f0ff 50%, #fce7f3 100%);
    --bg-secondary: white;
    --bg-tertiary: linear-gradient(135deg, #fce7f3 0%, #f3e8ff 100%);
    --bg-card: #ffffff;
    --bg-overlay: rgba(255, 255, 255, 0.8);

    --text-primary: #333333;
    --text-secondary: #666666;
    --text-tertiary: var(--color-primary-400);
    --text-muted: #999999;
    --text-inverse: white;

    /* 边框颜色 */
    --border-primary: var(--color-primary-200);
    --border-secondary: var(--color-primary-100);
    --border-accent: var(--color-primary-400);

    /* 阴影 - 霓虹粉紫 */
    --shadow-color: rgba(147, 112, 219, 0.15);
    --shadow-sm: 0 1px 3px var(--shadow-color);
    --shadow-md: 0 4px 6px -1px var(--shadow-color);
    --shadow-lg: 0 10px 15px -3px var(--shadow-color);
    --shadow-xl: 0 20px 25px -5px var(--shadow-color);
    --shadow-2xl: 0 25px 50px -12px rgba(236, 72, 153, 0.2);
    --shadow-neon: 0 0 20px rgba(255, 105, 180, 0.3), 0 0 40px rgba(168, 85, 247, 0.15);

    /* 统一字体规范 */
    --font-size-hero: 2rem;         /* 32px 页面大标题 */
    --font-size-section: 1.375rem;   /* 22px 模块标题 */
    --font-size-card-title: 1.125rem;/* 18px 卡片标题 */
    --font-size-body: 0.875rem;      /* 14px 正文内容 */
    --font-size-small: 0.75rem;      /* 12px 辅助文字 */
    --line-height-unified: 1.6;
    --card-radius: 12px;
    --card-padding: 1.5rem;           /* 24px 统一内边距 */
    --section-gap: 2rem;              /* 32px 模块间距 */

    /* 字重 */
    --font-weight-primary: var(--font-weight-normal);
    --font-weight-secondary: var(--font-weight-medium);

    /* 透明度 */
    --opacity-hover: 0.9;
    --opacity-active: 0.8;
    --opacity-disabled: 0.5;
}

/* ============================================
   暗色模式
   ============================================ */
[data-theme="dark"] {
    /* 背景和文字颜色（暗色模式） */
    --bg-primary: linear-gradient(180deg, #1a0a14 0%, #0f0a1a 50%, #1a0820 100%);
    --bg-secondary: #1a1030;
    --bg-tertiary: #2a1540;
    --bg-card: #1e1235;
    --bg-overlay: rgba(15, 10, 26, 0.9);

    --text-primary: #f5e6f8;
    --text-secondary: #e0d0f0;
    --text-tertiary: #f9a8d4;
    --text-muted: #a090b0;
    --text-inverse: #fff;

    /* 边框颜色 */
    --border-primary: #4a1942;
    --border-secondary: #2d1030;
    --border-accent: #ec4899;

    /* 阴影 */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px var(--shadow-color);
    --shadow-md: 0 4px 6px -1px var(--shadow-color);
    --shadow-lg: 0 10px 15px -3px var(--shadow-color);
    --shadow-xl: 0 20px 25px -5px var(--shadow-color);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --shadow-neon: 0 0 20px rgba(255, 105, 180, 0.2), 0 0 40px rgba(168, 85, 247, 0.1);
    
    /* 字重和行高（暗色模式） */
    --font-weight-primary: var(--font-weight-medium);
    --font-weight-secondary: var(--font-weight-semibold);
    --line-height-body: 1.5;
}

/* ============================================
   应用主题变量到全局样式
   ============================================ */
body {
    background: var(--bg-primary);
    background-attachment: fixed;
    color: var(--text-primary);
    font-weight: var(--font-weight-primary);
    line-height: var(--line-height-body);
    position: relative;
}
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,105,180,0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(168,85,247,0.06) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(192,132,252,0.04) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

/* 导航栏 */
.navbar {
    background-color: var(--bg-overlay);
    border-bottom-color: var(--border-primary);
}

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

.nav-link {
    color: var(--text-secondary);
}

.nav-link:hover {
    color: var(--text-primary);
}

.nav-link.active {
    color: var(--text-primary);
}

.nav-link.active::after {
    background: var(--gradient-primary);
}

/* 主题切换按钮 */
.theme-toggle {
    background: var(--gradient-primary);
    color: var(--text-inverse);
}

.theme-toggle::before {
    background: var(--gradient-secondary);
}

.theme-toggle:hover {
    box-shadow: var(--shadow-lg);
}

/* 按钮 */
.btn-primary {
    background: var(--gradient-primary);
}

.btn-primary::before {
    background: var(--gradient-secondary);
}

.btn-secondary {
    background: var(--gradient-accent);
}

.btn-secondary::before {
    background: var(--gradient-primary);
}

.btn-outline {
    border-color: var(--border-accent);
    color: var(--text-secondary);
}

.btn-outline:hover {
    background: var(--gradient-subtle);
    border-color: transparent;
    color: var(--text-primary);
}

/* 卡片 */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-md);
}

.card::before {
    background: var(--gradient-subtle);
}

.card:hover {
    box-shadow: var(--shadow-xl);
    border-color: var(--border-accent);
}

/* 表单 */
.form-input,
.form-textarea,
.form-select {
    color: var(--text-primary);
    border-color: var(--border-primary);
    background-color: var(--bg-secondary);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--border-accent);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
}

/* 标签和徽章 */
.tag {
    background: var(--gradient-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
}

.tag:hover {
    background: var(--gradient-primary);
    color: var(--text-inverse);
    border-color: transparent;
}

.badge {
    background: var(--gradient-primary);
    color: var(--text-inverse);
}

/* 时间线 */
.timeline::before {
    background: var(--gradient-primary);
}

.timeline-item::before {
    background: var(--bg-primary);
    border-color: var(--color-primary-500);
}

.timeline-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
}

/* 渐变文字 */
.gradient-text {
    background-image: var(--gradient-primary);
}

/* 加载状态 */
.loading {
    border-color: var(--color-primary-300);
    border-top-color: transparent;
}

.loading-overlay {
    background-color: var(--bg-overlay);
}

/* 弹窗 */
.modal-backdrop {
    background-color: rgba(15, 10, 26, 0.7);
}

.modal-content {
    background-color: var(--bg-card);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-2xl);
}

.modal-close {
    color: var(--text-secondary);
}

.modal-close:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* 通知 */
.notification {
    background-color: var(--bg-card);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xl);
    color: var(--text-primary);
}

.notification-close {
    color: var(--text-secondary);
}

.notification-close:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* 主题通知 */
.theme-notification {
    position: fixed;
    top: 5rem;
    right: 1rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    background: var(--gradient-primary);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 9999;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-xl);
}

.theme-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.close-notification {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.close-notification:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 用户头像 */
.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--gradient-primary);
}

/* 图标颜色 */
.icon-primary {
    color: var(--color-primary-500);
}

.icon-secondary {
    color: var(--color-primary-400);
}

.icon-muted {
    color: var(--text-muted);
}

/* 进度条 */
.progress-bar {
    height: 6px;
    border-radius: 3px;
    background-color: var(--bg-tertiary);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* 分隔线 */
.divider {
    height: 1px;
    background: var(--gradient-primary);
    opacity: 0.3;
    margin: 1.5rem 0;
}

/* 悬停效果 */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* 渐变边框 */
.gradient-border {
    position: relative;
    border-radius: 20px;
}

.gradient-border::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gradient-primary);
    border-radius: 22px;
    z-index: -1;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.gradient-border:hover::before {
    opacity: 1;
}

/* 毛玻璃效果 */
.glass-effect {
    background: var(--bg-overlay);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-primary);
}

/* 动画背景 */
.animated-bg {
    position: relative;
    overflow: hidden;
}

.animated-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: var(--gradient-primary);
    opacity: 0.1;
    animation: rotate 20s linear infinite;
    z-index: -1;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 响应式主题调整 */
@media (max-width: 768px) {
    [data-theme="dark"] {
        --line-height-body: 1.6; /* 移动端增加行高 */
    }
}

/* ============================================
   深色模式对比度全面增强
   ============================================ */
[data-theme="dark"] .profile-card,
[data-theme="dark"] .exp-main-card,
[data-theme="dark"] .exp-sub-card,
[data-theme="dark"] .campus-project-card,
[data-theme="dark"] .skill-category,
[data-theme="dark"] .self-eval-card,
[data-theme="dark"] .access-card,
[data-theme="dark"] .timeline-content,
[data-theme="dark"] .chat-messages,
[data-theme="dark"] .contact-message,
[data-theme="dark"] .hobby-item {
    background-color: #1e1235;
    border-color: #4a1942;
}

[data-theme="dark"] .exp-main-card .experience-role,
[data-theme="dark"] .exp-sub-card .experience-role {
    color: #f0c0e8;
}

[data-theme="dark"] .experience-list li {
    color: #e8d8f8;
}

[data-theme="dark"] .experience-list li::before {
    color: #f472b6;
}

[data-theme="dark"] .section-title {
    color: #fff;
}

[data-theme="dark"] .education-item p,
[data-theme="dark"] .education-item span {
    color: #d0c0e0;
}

[data-theme="dark"] .education-item h4 {
    color: #f0e0f8;
}

[data-theme="dark"] .about-text p,
[data-theme="dark"] .hero-description,
[data-theme="dark"] .self-eval-card p {
    color: #e8d8f8;
}

[data-theme="dark"] .about-stats .stat-value {
    color: #fff;
}

[data-theme="dark"] .about-stats .stat-label {
    color: #c0b0d0;
}

[data-theme="dark"] .skill-tag,
[data-theme="dark"] .tag {
    background: rgba(255,255,255,0.1);
    color: #e0d0f0;
    border-color: rgba(255,255,255,0.18);
}

[data-theme="dark"] .hobby-item {
    color: #e0d0f0;
}

[data-theme="dark"] .hobby-item i {
    color: #f472b6;
}

[data-theme="dark"] .access-card p,
[data-theme="dark"] .access-card span {
    color: #d0c0e0;
}

[data-theme="dark"] .contact-item p,
[data-theme="dark"] .contact-item span {
    color: #d0c0e0;
}

[data-theme="dark"] .contact-item i {
    color: #f472b6;
}

[data-theme="dark"] .gallery-item .gallery-caption {
    color: #e0d0f0;
    background: rgba(30,18,53,0.9);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-textarea {
    background-color: #1a1030;
    color: #f0e6f6;
    border-color: #4a1942;
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
    color: #7a6a8a;
}

/* 深色模式下导航栏对比度 */
[data-theme="dark"] .nav-menu {
    background: rgba(15,10,26,0.95);
    border-bottom-color: #4a1942;
}

[data-theme="dark"] .nav-link {
    color: #e0c8f0;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: #fff;
}

[data-theme="dark"] .theme-toggle {
    background: linear-gradient(135deg, #ec4899, #a855f7);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
}

[data-theme="dark"] .user-avatar {
    border: 2px solid rgba(236,72,153,0.4);
}

/* 深色模式更多对比度修复 */
[data-theme="dark"] .btn-outline {
    color: #f0e0f8;
    border-color: rgba(236,72,153,0.5);
}

[data-theme="dark"] .btn-outline:hover {
    color: #fff;
    background: rgba(236,72,153,0.15);
}

[data-theme="dark"] .profile-card .info-value,
[data-theme="dark"] .profile-card .info-row {
    color: #e0d0f0;
}

[data-theme="dark"] .profile-card .info-label {
    color: #b0a0c0;
}

[data-theme="dark"] .experience-date {
    color: #c0b0d0;
}

[data-theme="dark"] .hero-subtitle {
    color: #f0b0d8;
}

[data-theme="dark"] .hero-description {
    color: #d8c8e8;
}

[data-theme="dark"] .stat-label,
[data-theme="dark"] .education-date {
    color: #b0a0c0;
}

/* 打印样式 */
@media print {
    :root, [data-theme="dark"] {
        --bg-primary: white;
        --bg-card: white;
        --text-primary: black;
        --text-secondary: #333;
        --border-primary: #ddd;
    }
    
    .navbar,
    .theme-toggle,
    .theme-notification {
        display: none !important;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}