/* Light Theme */
html.light-theme {
    --bg-gradient-1: #FFE5E5;
    --bg-gradient-2: #FFF0F5;
    --bg-gradient-3: #E6F3FF;
    --bg-gradient-4: #FFF0F5;
    --bg-gradient-5: #FFE5E5;
    
    --decorative-before: rgba(255, 182, 193, 0.1);
    --decorative-after: rgba(135, 206, 235, 0.1);
    
    --header-bg: rgba(255, 255, 255, 0.85);
    --header-shadow: rgba(0, 0, 0, 0.08);
    
    --baby-name-bg: rgba(255, 255, 255, 0.6);
    --baby-name-shadow-1: rgba(255, 255, 255, 0.8);
    --baby-name-shadow-2: rgba(0, 0, 0, 0.1);
    --baby-name-shadow-3: rgba(0, 0, 0, 0.15);
    --baby-name-text-shadow-1: rgba(255, 255, 255, 0.8);
    --baby-name-text-shadow-2: rgba(0, 0, 0, 0.1);
    --baby-name-text-shadow-3: rgba(0, 0, 0, 0.15);
    
    --age-text-color: #555;
    --age-bg-1: rgba(255, 255, 255, 0.95);
    --age-bg-2: rgba(255, 250, 240, 0.95);
    --age-border: rgba(255, 182, 193, 0.3);
    --age-shadow-1: rgba(0, 0, 0, 0.1);
    --age-shadow-2: rgba(255, 255, 255, 0.8);
    --age-pulse-shadow: rgba(255, 182, 193, 0.3);
    
    --button-bg-1: #ffffff;
    --button-bg-2: #f8f9fa;
    --button-text-color: #333;
    --button-border: transparent;
    --button-shadow-1: rgba(0, 0, 0, 0.1);
    --button-shadow-2: rgba(0, 0, 0, 0.05);
    --button-hover-shadow-1: rgba(0, 0, 0, 0.15);
    --button-hover-shadow-2: rgba(0, 0, 0, 0.08);
    --button-shine: rgba(255, 255, 255, 0.5);
    
    --settings-bg-1: #ffffff;
    --settings-bg-2: #f8f9fa;
    --settings-border: transparent;
    --settings-shadow: rgba(0, 0, 0, 0.15);
    --settings-hover-shadow: rgba(0, 0, 0, 0.2);
    
    --dropdown-bg-1: #ffffff;
    --dropdown-bg-2: #f8f9fa;
    --dropdown-border: transparent;
    --dropdown-shadow: rgba(0, 0, 0, 0.2);
    --dropdown-item-text: #333;
    --dropdown-item-border: rgba(0, 0, 0, 0.05);
    --dropdown-item-hover-bg-1: rgba(255, 182, 193, 0.2);
    --dropdown-item-hover-bg-2: rgba(135, 206, 235, 0.2);
    
    --text-color: #333;
    --shape-opacity: 0.4;
    
    --boy-gradient-1: #B8E6F5;
    --boy-gradient-2: #84C9E8;
    --boy-gradient-3: #5AAFE3;
    
    --girl-gradient-1: #FFB6D9;
    --girl-gradient-2: #FF8DC7;
    --girl-gradient-3: #FF69B4;
}

/* Dark Theme */
html.dark-theme {
    --bg-gradient-1: #1a1a2e;
    --bg-gradient-2: #16213e;
    --bg-gradient-3: #0f3460;
    --bg-gradient-4: #16213e;
    --bg-gradient-5: #1a1a2e;
    
    --decorative-before: rgba(255, 107, 157, 0.15);
    --decorative-after: rgba(74, 144, 226, 0.15);
    
    --header-bg: rgba(30, 30, 45, 0.85);
    --header-shadow: rgba(0, 0, 0, 0.5);
    
    --baby-name-bg: rgba(40, 40, 60, 0.6);
    --baby-name-shadow-1: rgba(255, 255, 255, 0.1);
    --baby-name-shadow-2: rgba(0, 0, 0, 0.4);
    --baby-name-shadow-3: rgba(0, 0, 0, 0.3);
    --baby-name-text-shadow-1: rgba(0, 0, 0, 0.8);
    --baby-name-text-shadow-2: rgba(255, 255, 255, 0.2);
    --baby-name-text-shadow-3: rgba(0, 0, 0, 0.5);
    
    --age-text-color: #e0e0e0;
    --age-bg-1: rgba(40, 40, 60, 0.95);
    --age-bg-2: rgba(50, 50, 70, 0.95);
    --age-border: rgba(100, 150, 200, 0.3);
    --age-shadow-1: rgba(0, 0, 0, 0.5);
    --age-shadow-2: rgba(255, 255, 255, 0.1);
    --age-pulse-shadow: rgba(100, 150, 200, 0.4);
    
    --button-bg-1: #2a2a3e;
    --button-bg-2: #1f1f2e;
    --button-text-color: #e0e0e0;
    --button-border: rgba(100, 150, 200, 0.2);
    --button-shadow-1: rgba(0, 0, 0, 0.4);
    --button-shadow-2: rgba(0, 0, 0, 0.3);
    --button-hover-bg-1: #353550;
    --button-hover-bg-2: #2a2a40;
    --button-hover-shadow-1: rgba(0, 0, 0, 0.6);
    --button-hover-shadow-2: rgba(100, 150, 200, 0.3);
    --button-shine: rgba(255, 255, 255, 0.1);
    
    --settings-bg-1: #2a2a3e;
    --settings-bg-2: #1f1f2e;
    --settings-border: rgba(100, 150, 200, 0.3);
    --settings-shadow: rgba(0, 0, 0, 0.5);
    --settings-hover-bg-1: #353550;
    --settings-hover-bg-2: #2a2a40;
    --settings-hover-shadow: rgba(100, 150, 200, 0.4);
    
    --dropdown-bg-1: #2a2a3e;
    --dropdown-bg-2: #1f1f2e;
    --dropdown-border: rgba(100, 150, 200, 0.3);
    --dropdown-shadow: rgba(0, 0, 0, 0.6);
    --dropdown-item-text: #e0e0e0;
    --dropdown-item-border: rgba(100, 150, 200, 0.1);
    --dropdown-item-hover-bg-1: rgba(100, 150, 200, 0.2);
    --dropdown-item-hover-bg-2: rgba(150, 100, 200, 0.2);
    
    --text-color: #e0e0e0;
    --shape-opacity: 0.3;
    
    --boy-gradient-1: #64b5f6;
    --boy-gradient-2: #42a5f5;
    --boy-gradient-3: #2196f3;
    
    --girl-gradient-1: #f48fb1;
    --girl-gradient-2: #f06292;
    --girl-gradient-3: #ec407a;
}