/* ============================================================
   variables.css - CSS自定义属性（变量）定义文件
   新增了背景渐变、光斑颜色等变量，方便统一调整背景风格
   ============================================================ */
:root {
    /* ===== 颜色系统 ===== */
    --bg-main: #faf5f5;
    --bg-card: #ffffff;

    /*
       新增：背景渐变用色
       --bg-gradient-start: 背景渐变起始色（顶部偏暖粉）
       --bg-gradient-end: 背景渐变结束色（底部偏淡紫）
       这样body背景不再是单调的纯色，而是有微妙的渐变过渡
    */
    --bg-gradient-start: #fdf6f6;    /* 顶部：非常淡的暖粉 */
    --bg-gradient-end: #f5f0f8;      /* 底部：非常淡的冷紫 */

    --text-primary: #4a4a4a;
    --text-secondary: #888888;
    --text-muted: #b0a8a8;

    --accent: #d4a0a7;
    --accent-light: #f5e6e8;
    --accent-dark: #c08890;
    --accent-glow: rgba(212, 160, 167, 0.35);

    /*
       新增：光斑颜色（用于背景装饰圆形光斑）
       使用半透明的暖色系，模拟柔和的光线散射
    */
    --orb-pink: rgba(228, 180, 188, 0.25);
    --orb-lavender: rgba(200, 180, 210, 0.22);
    --orb-peach: rgba(240, 200, 180, 0.2);

    --shadow-sm: 0 2px 12px rgba(180, 160, 160, 0.12);
    --shadow-md: 0 6px 24px rgba(180, 160, 160, 0.18);

    --border: #eee5e5;

    /* ===== 尺寸系统 ===== */
    --container-max-width: 520px;
    --card-padding: 2.5rem;
    --card-padding-mobile: 1.8rem;

    /* ===== 圆角系统 ===== */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 50%;

    /* ===== 过渡动画时间 ===== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}