:root { --background: hsl(210, 21%, 15%); --border: hsl(210, 21%, 20%); --text: hsl(210, 21%, 95%); --text-2: hsl(210, 21%, 80%); --text-secondary: hsl(210, 21%, 40%); --sidebar-background: hsl(210, 21%, 10%); --vriish-rose: hsl(0, 100%, 75%); --orange: hsl(25, 100%, 75%); --gold: hsl(50, 100%, 75%); --emerald: hsl(130, 100%, 75%); --sky: hsl(215, 100%, 75%); --purpur: hsl(275, 100%, 75%); --white: hsl(360, 100%, 100%); --vriish-gradient: linear-gradient(30deg, var(--orange) -100%, var(--vriish-rose) 100%); --vriish-gradient-shadow: 2px 2px 10px var(--background); } @media (prefers-color-scheme: light) { :root { --background: hsl(0, 100%, 97.5%); --border: hsl(0, 100%, 90%); --text: rgb(50, 40, 30); --text-2: rgb(90, 80, 70); --sidebar-background: hsl(0, 100%, 95%); } }