/* ========================================
   全局Body样式
   统一管理所有页面的body背景色
   ======================================== */

/* ==================== Body基础样式 ==================== */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    background: var(--page-bg-light);  /* ⭐ 使用统一的页面背景色变量 */
    color: var(--text-primary);
    transition: background-color var(--transition-normal), color var(--transition-normal);
    min-height: 100vh;
}

/* ==================== 平滑滚动 ==================== */
html {
    scroll-behavior: smooth;
}

/* ==================== 盒模型统一 ==================== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ==================== 夜间模式body样式 ==================== */
body.dark-mode {
    background: var(--page-bg-light);  /* ⭐ 夜间模式时自动使用深色背景（colors.css中已定义） */
    color: var(--text-primary);
}

/* ==================== 主题切换说明 ==================== */
/*
用法示例：

1. 切换背景主题：
   document.body.classList.add('bg-pink');    // 粉色主题（默认）
   document.body.classList.add('bg-green');   // 绿色主题
   document.body.classList.add('bg-gray');    // 灰色主题

2. 切换夜间模式：
   document.body.classList.toggle('dark-mode');

3. 同时使用：
   document.body.classList.add('bg-green', 'dark-mode');  // 绿色主题+夜间模式

4. 一键修改全局背景色（在colors.css中）：
   :root {
       --bg-pink-main: #你的颜色;      // 修改粉色主题
       --bg-green-main: #你的颜色;     // 修改绿色主题
       --bg-gray-main: #你的颜色;      // 修改灰色主题
   }
*/