:root {
    --bg-primary: linear-gradient(360deg, #fbfdff 0%, #c2e0ff 100%);
    --glass-bg: rgba(255, 255, 255, 0.84);
    --glass-bg-hover: rgba(255, 255, 255, 0.96);
    --glass-border: rgba(120, 182, 255, 0.25);
    --glass-shadow: 0 5px 22px rgba(120, 182, 255, 0.07), 0 2px 6px rgba(120, 182, 255, 0.09);
    --glass-shadow-accent: 0 6px 28px rgba(120, 182, 255, 0.13), 0 0 14px rgba(120, 182, 255, 0.10);
    --text-primary: #303c57;
    --text-secondary: #55658b;
    --text-tertiary: #8091b8;
    --accent-primary: #78b6ff;
    --accent-light: #a6cdff;
    --accent-pale: #e9f3ff;
    --pinkbackground: #f3f9ff;
    --sunlight-darkness:#ffffff;
    --pink-background:#f7fbff;
    --border-light: rgba(255, 255, 255, 0.80);
    --border-divider: rgba(120, 182, 255, 0.11);
    --radius: 16px;
    --radius-sm: 12px;
    --radius-pill: 24px;
    --transition-duration: 0.4s;
}

.dark-mode {
    --bg-primary: linear-gradient(360deg, #121e35 0%, #0a1221 100%);
    --glass-bg: rgba(29, 41, 64, 0.47);
    --glass-bg-hover: rgba(37, 51, 78, 0.59);
    --glass-border: rgba(120, 182, 255, 0.31);
    --glass-shadow: 0 5px 22px rgba(0, 0, 0, 0.31), 0 2px 6px rgba(0, 0, 0, 0.16);
    --glass-shadow-accent: 0 6px 26px rgba(0, 0, 0, 0.36), 0 0 16px rgba(120, 182, 255, 0.17);
    --text-primary: #e4eeff;
    --text-secondary: #8fb7e9;
    --text-tertiary: #5676a3;
    --accent-primary: #78b6ff;
    --accent-light: #8fbeff;
    --accent-pale: #1b2d4e;
    --pinkbackground: #121d32;
    --pink-background: #16243c;
    --sunlight-darkness: #050911;
    --border-light: rgba(255, 255, 255, 0.09);
    --border-divider: rgba(120, 182, 255, 0.15);
    --radius: 16px;
    --radius-sm: 12px;
    --radius-pill: 24px;
    --transition-duration: 0.4s;
}