:root{--color-primary: hsl(200, 100%, 70%);--color-secondary: hsl(200, 25%, 70%);--color-accent: hsl(40, 100%, 70%);--color-accent-secondary: hsl(336, 37%, 87%);--color-accent-tertiary: hsl(258, 34%, 87%);--color-neutral-light: hsl(0, 0%, 90%);--color-base-light: hsl(0, 0%, 95%);--color-neutral-dark: hsl(0, 0%, 5%);--color-base-dark: hsl(0, 0%, 10%)}.light-mode{--scalar-color-1: var(--color-base-dark);--scalar-color-2: hsl(from var(--color-base-dark) h s 8%);--scalar-color-3: hsl(from var(--color-base-dark) h s 5%);--scalar-color-accent: var(--color-accent);--scalar-background-1: var(--color-base-light);--scalar-background-2: hsl(from var(--color-base-light) h s 90%);--scalar-background-3: hsl(from var(--color-base-light) h s 87%);--scalar-background-accent: var(--color-accent) }.dark-mode{--scalar-color-1: var(--color-base-light);--scalar-color-2: hsl(from var(--color-base-light) h s 60%);--scalar-color-3: hsl(from var(--color-base-light) h s 40%);--scalar-color-accent: var(--color-accent);--scalar-background-1: var(--color-base-dark);--scalar-background-2: hsl(from var(--color-base-dark) h s 8%);--scalar-background-3: hsl(from var(--color-base-dark) h s 5%);--scalar-background-accent: var(--color-accent) }