/* --- 0. 颜色主题 --- */

:root {
    /* 定义主题切换时的全局过渡，让颜色变化像呼吸一样自然 */
    /* 默认：马卡龙蓝主题 */
    --bg-color: #f0f7ff;
    --card-bg: #ffffff;
    --text-color: #4a5568;
    --accent-color: #74c0fc;
    --shadow-color: rgba(116, 192, 252, 0.2);

    transition: background-color 0.4s ease, color 0.4s ease;

}

/* 红色马卡龙主题 */
[data-theme="red"] {
    --bg-color: #fff5f5;
    --accent-color: #ff8787;
    --shadow-color: rgba(255, 135, 135, 0.2);
}

/* 绿色马卡龙主题 */
[data-theme="green"] {
    --bg-color: #f3fcf4;
    --accent-color: #69db7c;
    --shadow-color: rgba(105, 219, 124, 0.2);
}

/* 黑色/极简主题 */
[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --card-bg: #2d2d2d;
    --text-color: #e0e0e0;
    --accent-color: #a0a0a0;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* --- 1. 统一画布定义 (Body) --- */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

li {
    background-color: var(--card-bg);
}

li:hover {
    box-shadow: 0 12px 16px var(--shadow-color);
}

/* --- 1. 现代画布定义 (进阶版 body) --- */
body {
    /* 关键：统一使用变量，禁止写死 #f9f9f9 */
    background-color: var(--bg-color);
    color: var(--text-color);
    
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 68ch;
    margin: 80px auto;
    line-height: 1.8;
    padding: 0 20px;
    -webkit-font-smoothing: antialiased;
}

/* --- 2. 布局重置 (Reset) --- */
ul { padding: 0; margin: 0; list-style: none; }

/* --- 3. 认知卡片 (li) --- */
li {
    border: none;
    /* 关键：使用变量，根据主题自动切换卡片背景 */
    background-color: var(--card-bg);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
    transform: translateZ(0);
    transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
    cursor: pointer;
}

li:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 16px var(--shadow-color);
}