:root {
    /* Light mode colors */
    --bg-gradient-start: #667eea;
    --bg-gradient-end: #764ba2;
    --card-bg: #ffffff;
    --card-bg-mobile: rgba(255, 255, 255, 0.35);
    --text-primary: #333333;
    --text-secondary: #666666;
    --about-bg: #f8f9fa;
    --border-color: #667eea;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-color-light: rgba(0, 0, 0, 0.2);
    --social-hover-shadow: rgba(102, 126, 234, 0.4);
    --social-gradient-start: #667eea;
    --social-gradient-end: #764ba2;
}

body.dark-mode {
    /* Dark mode colors */
    --bg-gradient-start: #1a1a2e;
    --bg-gradient-end: #16213e;
    --card-bg: #0f3460;
    --card-bg-mobile: rgba(15, 52, 96, 0.35);
    --text-primary: #e4e4e4;
    --text-secondary: #b0b0b0;
    --about-bg: #162447;
    --border-color: #667eea;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-color-light: rgba(0, 0, 0, 0.3);
    --social-hover-shadow: rgba(102, 126, 234, 0.6);
    --social-gradient-start: #667eea;
    --social-gradient-end: #764ba2;
}