:root { --primary-light: #8f70ff; --primary-dark: #63009c; --secondary-light: #0084d1; --secondary-dark: hsl(229, 75%, 48%); --tertiary-light: hsl(126, 82%, 78%); --tertiary-dark: hsl(87, 77%, 18%); --primary-light-hover: color-mix(in srgb, var(--primary-light), black 20%); --primary-dark-hover: color-mix(in srgb, var(--primary-dark), white 20%); --secondary-light-hover: color-mix(in srgb, var(--secondary-light), black 20%); --secondary-dark-hover: color-mix(in srgb, var(--secondary-dark), white 20%); --tertiary-light-hover: color-mix(in srgb, var(--tertiary-light), black 20%); --tertiary-dark-hover: color-mix(in srgb, var(--tertiary-dark), white 20%); --primary-switch: var(--primary-light); --primary-switch-inv: var(--primary-dark); --primary-switch-hover: var(--primary-light-hover); --primary-switch-inv-hover: var(--primary-dark-hover); --secondary-switch: var(--secondary-light); --secondary-switch-inv: var(--secondary-dark); --secondary-switch-hover: var(--secondary-light-hover); --secondary-switch-inv-hover: var(--secondary-dark-hover); --tertiary-switch: var(--tertiary-light); --tertiary-switch-inv: var(--tertiary-dark); --tertiary-switch-hover: var(--tertiary-light-hover); --tertiary-switch-inv-hover: var(--tertiary-dark-hover); --light: #fafafa; --light-soft: #f5f4f3; --light-grey: color-mix(in srgb, var(--light) 90%, black 10%); --dark: #050505; --dark-soft: color-mix(in srgb, var(--dark) 95%, white 5%); --dark-grey: color-mix(in srgb, var(--dark) 90%, white 10%); --grey: #8a8a8a; --day-switch: var(--light); --night-switch: var(--dark); --morning-switch: var(--light-grey); --evening-switch: var(--dark-grey); --light-warm: #f3e6ca; --dark-warm: #423a3b; --light-cool: #b5daf2; --dark-cool: #3a3b42; --warm-switch: var(--light-warm); --cool-switch: var(--light-cool); --positive: hsl(117, 100%, 65%); --positive-soft: color-mix(in srgb, var(--positive), white 85%); --negative: hsl(0, 100%, 65%); --negative-soft: color-mix(in srgb, var(--negative), white 85%); --caution: hsl(46, 100%, 65%); --caution-soft: color-mix(in srgb, var(--caution), white 85%); --information: hsl(200, 100%, 65%); --information-soft: color-mix(in srgb, var(--information), white 85%);}