/* 暗黑模式和高对比度模式样式 */

/* 亮色主题（默认） */
html.light body {
    --bg-color: #ffffff;
    --text-color: #333333;
    --heading-color: #222222;
    --link-color: #4a90e2;
    --link-hover-color: #3a7bc8;
    --nav-bg: #ffffff;
    --nav-text: #333333;
    --nav-active: #4a90e2;
    --btn-primary-bg: #4a90e2;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #f0f0f0;
    --btn-secondary-text: #333333;
    --footer-bg: #f8f8f8;
    --border-color: #dddddd;
    --card-bg: #ffffff;
    --card-shadow: 0 2px 5px rgba(0,0,0,0.1);
    --input-bg: #ffffff;
    --input-text: #333333;
    --input-border: #dddddd;
    
    /* 问答展示区域变量 */
    --features-bg: #ffffff;
    --features-text: #333333;
    --features-title: #2c3e50;
    --feature-item-bg: #f8f9fa;
    --feature-item-shadow: 0 2px 10px rgba(0,0,0,0.05);
    --feature-item-hover-bg: #f0f3f7;
    --feature-item-hover-shadow: 0 5px 15px rgba(0,0,0,0.08);
    --feature-title: #2c3e50;
    --feature-desc: #555555;
    --icon-interactive: #4a90e2;
    --icon-interactive-bg: rgba(74, 144, 226, 0.2);
    --icon-test: #e74c3c;
    --icon-game: #9b59b6;
    --icon-knowledge: #f1c40f;
    --icon-community: #2ecc71;
    --icon-tracking: #3498db;
}

/* 暗黑模式 */
html.dark body {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --heading-color: #ffffff;
    --link-color: #61a8ff;
    --link-hover-color: #80b7ff;
    --nav-bg: #252525;
    --nav-text: #e0e0e0;
    --nav-active: #61a8ff;
    --btn-primary-bg: #3a7bc8;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #3a3a3a;
    --btn-secondary-text: #e0e0e0;
    --footer-bg: #252525;
    --border-color: #444444;
    --card-bg: #2a2a2a;
    --card-shadow: 0 2px 5px rgba(0,0,0,0.3);
    --input-bg: #333333;
    --input-text: #e0e0e0;
    --input-border: #444444;
    
    /* 问答展示区域变量 */
    --features-bg: #1a1a1a;
    --features-text: #ffffff;
    --features-title: #ffffff;
    --feature-item-bg: #252525;
    --feature-item-shadow: 0 2px 10px rgba(0,0,0,0.2);
    --feature-item-hover-bg: #333333;
    --feature-item-hover-shadow: 0 5px 15px rgba(0,0,0,0.3);
    --feature-title: #ffffff;
    --feature-desc: rgba(255, 255, 255, 0.8);
    --icon-interactive: #61a8ff;
    --icon-interactive-bg: rgba(97, 168, 255, 0.3);
    --icon-test: #ff6b6b;
    --icon-game: #c39bd3;
    --icon-knowledge: #f9e79f;
    --icon-community: #7dcea0;
    --icon-tracking: #5dade2;
}

/* 高对比度模式 */
html.high-contrast body {
    --bg-color: #000000;
    --text-color: #ffffff;
    --heading-color: #ffff00;
    --link-color: #00ffff;
    --link-hover-color: #00cccc;
    --nav-bg: #000000;
    --nav-text: #ffffff;
    --nav-active: #00ffff;
    --btn-primary-bg: #ffff00;
    --btn-primary-text: #000000;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: #000000;
    --footer-bg: #000000;
    --border-color: #ffffff;
    --card-bg: #000000;
    --card-shadow: 0 0 0 2px #ffffff;
    --input-bg: #000000;
    --input-text: #ffffff;
    --input-border: #ffffff;
    
    /* 问答展示区域变量 */
    --features-bg: #000000;
    --features-text: #ffffff;
    --features-title: #ffff00;
    --feature-item-bg: #111111;
    --feature-item-shadow: 0 0 0 1px #ffffff;
    --feature-item-hover-bg: #222222;
    --feature-item-hover-shadow: 0 0 0 2px #00ff00;
    --feature-title: #ffff00;
    --feature-desc: #ffffff;
    --icon-interactive: #00ffff;
    --icon-interactive-bg: rgba(0, 255, 255, 0.3);
    --icon-test: #ff00ff;
    --icon-game: #ffff00;
    --icon-knowledge: #00ff00;
    --icon-community: #00ffff;
    --icon-tracking: #ff00ff;
}

/* 应用变量到元素 */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
}

.navbar {
    background-color: var(--nav-bg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.nav-links a {
    color: var(--nav-text);
}

.nav-links a:hover, .nav-links a.active {
    color: var(--nav-active);
}

.nav-links a::after {
    background-color: var(--nav-active);
}

.btn.primary-btn {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn.secondary-btn {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
}

footer {
    background-color: var(--footer-bg);
}

input, textarea, select {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

.card, .box, .container {
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
    border-color: var(--border-color);
}

/* 高对比度模式的特殊处理 */
html.high-contrast body a:focus,
html.high-contrast body button:focus,
html.high-contrast body input:focus,
html.high-contrast body textarea:focus,
html.high-contrast body select:focus {
    outline: 3px solid #00ffff;
    outline-offset: 2px;
}

html.high-contrast body img {
    filter: grayscale(100%) contrast(120%);
}

/* 暗黑模式的图片处理 */
html.dark body img:not(.preserve-color) {
    filter: brightness(0.8) contrast(1.1);
}

/* 主题切换图标样式 */
html.light .fa-sun {
    color: #ff9900;
}

html.dark .fa-moon {
    color: #ccccff;
}

html.high-contrast .fa-adjust {
    color: #00ffff;
}

/* 返回顶部按钮样式 */
.back-to-top {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

/* 错误状态 */
.error {
    border-color: #ff3333 !important;
}

html.high-contrast body .error {
    border-color: #ff0000 !important;
    background-color: #330000 !important;
}