:root[data-theme="dark"] {
    --bg-dark: hsl(0, 0%, 0%);
    --bg: hsla(0, 0%, 5%);
    --bg-light: hsl(0, 0%, 10%);

    --bg-dark-glass: hsla(0, 0%, 10%, 0.6);
    --bg-glass: hsla(0, 0%, 15%, 0.6);
    --bg-light-glass: hsla(0, 0%, 20%, 0.6);
    --bg-glass-border: hsla(0, 0%, 30%, 0.6);

    --text: hsl(0, 0%, 95%);
    --text-muted: hsl(0, 0%, 70%);

    --green: hsla(126, 43%, 48%);
    --green-glass: hsla(126, 43%, 48%, 0.2);
    --green-border: hsl(126, 43%, 48%, 0.5);
    
    --color-10: rgba(223, 223, 223, 0.3);

}

:root[data-theme="light"] {
    --bg-dark: hsl(0, 0%, 90%);
    --bg: hsla(0, 0%, 94%);
    --bg-light: hsl(0, 0%, 96%);
    
    --bg-dark-glass: hsla(0, 0%, 90%, 0.6);
    --bg-glass: hsla(0, 0%, 96%, 0.6);
    --bg-light-glass: hsla(0, 0%, 98%, 0.6);

    --text: hsl(0, 0%, 5%);
    --text-muted: hsl(0, 0%, 30%);

    --green: hsla(126, 43%, 48%);
    --green-glass: hsla(126, 43%, 48%, 0.2);
    --green-border: hsl(126, 43%, 48%, 0.5);
    
    --color-10: rgba(255, 255, 255, 0.096);
}