:root {
    /* Magical Color Palette */
    --primary-lavender: #E8D5FF;
    --primary-mint: #B8F2E6;
    --accent-coral: #FFB3BA;
    --accent-yellow: #FFFFBA;
    --accent-blue: #BAE1FF;
    --accent-peach: #FFDFBA;
    --accent-pink: #FFB3E6;
    --accent-green: #B3FFB3;
    
    /* Text Colors */
    --text-primary: #2C3E50;
    --text-secondary: #5D6D7E;
    --text-light: #FFFFFF;
    
    /* Background Colors */
    --bg-primary: #FEFEFE;
    --bg-card: #FFFFFF;
    --bg-hover: #F8F9FA;
    
    /* Gradient Combinations */
    --gradient-1: linear-gradient(135deg, var(--primary-lavender), var(--accent-coral));
    --gradient-2: linear-gradient(135deg, var(--primary-mint), var(--accent-blue));
    --gradient-3: linear-gradient(135deg, var(--accent-yellow), var(--accent-peach));
    --gradient-4: linear-gradient(135deg, var(--accent-pink), var(--primary-lavender));
    --gradient-5: linear-gradient(135deg, var(--accent-green), var(--primary-mint));
    --gradient-6: linear-gradient(135deg, var(--accent-blue), var(--accent-coral));
    
    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-heavy: rgba(0, 0, 0, 0.25);
    
    /* Interactive States */
    --hover-scale: 1.05;
    --active-scale: 0.98;
    --transition-smooth: 0.3s ease-in-out;
    --transition-quick: 0.15s ease-in-out;
    
    /* Border Radius */
    --radius-small: 12px;
    --radius-medium: 16px;
    --radius-large: 20px;
    --radius-xl: 24px;
}