@media (prefers-color-scheme: light) { :root { --text: hsl(273deg 35% 6%); --background: hsl(267deg 36% 95%); --primary: hsl(273deg 37% 27%); --secondary: hsl(307deg 37% 68%); --accent: hsl(318deg 37% 42%); } } @media (prefers-color-scheme: dark) { :root { --text: hsl(273deg 35% 94%); --background: hsl(267deg 36% 5%); --primary: hsl(273deg 37% 73%); --secondary: hsl(307deg 37% 32%); --accent: hsl(318deg 37% 58%); } } @media (prefers-color-scheme: light) { :root { --text-50: hsl(273deg 36% 95%); --text-100: hsl(272deg 33% 90%); --text-200: hsl(273deg 35% 80%); --text-300: hsl(273deg 35% 70%); --text-400: hsl(273deg 35% 60%); --text-500: hsl(273deg 35% 50%); --text-600: hsl(273deg 35% 40%); --text-700: hsl(273deg 35% 30%); --text-800: hsl(273deg 35% 20%); --text-900: hsl(272deg 33% 10%); --text-950: hsl(273deg 36% 5%); --background-50: hsl(267deg 36% 95%); --background-100: hsl(268deg 37% 90%); --background-200: hsl(267deg 35% 80%); --background-300: hsl(267deg 36% 70%); --background-400: hsl(267deg 36% 60%); --background-500: hsl(267deg 36% 50%); --background-600: hsl(267deg 36% 40%); --background-700: hsl(267deg 36% 30%); --background-800: hsl(267deg 35% 20%); --background-900: hsl(268deg 37% 10%); --background-950: hsl(267deg 36% 5%); --primary-50: hsl(273deg 36% 95%); --primary-100: hsl(272deg 37% 90%); --primary-200: hsl(273deg 37% 80%); --primary-300: hsl(273deg 37% 70%); --primary-400: hsl(273deg 37% 60%); --primary-500: hsl(273deg 37% 50%); --primary-600: hsl(273deg 37% 40%); --primary-700: hsl(273deg 37% 30%); --primary-800: hsl(273deg 37% 20%); --primary-900: hsl(272deg 37% 10%); --primary-950: hsl(273deg 36% 5%); --secondary-50: hsl(307deg 36% 95%); --secondary-100: hsl(306deg 37% 90%); --secondary-200: hsl(308deg 37% 80%); --secondary-300: hsl(307deg 37% 70%); --secondary-400: hsl(307deg 37% 60%); --secondary-500: hsl(307deg 37% 50%); --secondary-600: hsl(307deg 37% 40%); --secondary-700: hsl(307deg 37% 30%); --secondary-800: hsl(308deg 37% 20%); --secondary-900: hsl(306deg 37% 10%); --secondary-950: hsl(307deg 36% 5%); --accent-50: hsl(320deg 36% 95%); --accent-100: hsl(319deg 37% 90%); --accent-200: hsl(317deg 37% 80%); --accent-300: hsl(318deg 37% 70%); --accent-400: hsl(318deg 37% 60%); --accent-500: hsl(318deg 37% 50%); --accent-600: hsl(318deg 37% 40%); --accent-700: hsl(318deg 37% 30%); --accent-800: hsl(317deg 37% 20%); --accent-900: hsl(319deg 37% 10%); --accent-950: hsl(313deg 36% 5%); } } @media (prefers-color-scheme: dark) { :root { --text-50: hsl(273deg 36% 5%); --text-100: hsl(272deg 33% 10%); --text-200: hsl(273deg 35% 20%); --text-300: hsl(273deg 35% 30%); --text-400: hsl(273deg 35% 40%); --text-500: hsl(273deg 35% 50%); --text-600: hsl(273deg 35% 60%); --text-700: hsl(273deg 35% 70%); --text-800: hsl(273deg 35% 80%); --text-900: hsl(272deg 33% 90%); --text-950: hsl(273deg 36% 95%); --background-50: hsl(267deg 36% 5%); --background-100: hsl(268deg 37% 10%); --background-200: hsl(267deg 35% 20%); --background-300: hsl(267deg 36% 30%); --background-400: hsl(267deg 36% 40%); --background-500: hsl(267deg 36% 50%); --background-600: hsl(267deg 36% 60%); --background-700: hsl(267deg 36% 70%); --background-800: hsl(267deg 35% 80%); --background-900: hsl(268deg 37% 90%); --background-950: hsl(267deg 36% 95%); --primary-50: hsl(273deg 36% 5%); --primary-100: hsl(272deg 37% 10%); --primary-200: hsl(273deg 37% 20%); --primary-300: hsl(273deg 37% 30%); --primary-400: hsl(273deg 37% 40%); --primary-500: hsl(273deg 37% 50%); --primary-600: hsl(273deg 37% 60%); --primary-700: hsl(273deg 37% 70%); --primary-800: hsl(273deg 37% 80%); --primary-900: hsl(272deg 37% 90%); --primary-950: hsl(273deg 36% 95%); --secondary-50: hsl(307deg 36% 5%); --secondary-100: hsl(306deg 37% 10%); --secondary-200: hsl(308deg 37% 20%); --secondary-300: hsl(307deg 37% 30%); --secondary-400: hsl(307deg 37% 40%); --secondary-500: hsl(307deg 37% 50%); --secondary-600: hsl(307deg 37% 60%); --secondary-700: hsl(307deg 37% 70%); --secondary-800: hsl(308deg 37% 80%); --secondary-900: hsl(306deg 37% 90%); --secondary-950: hsl(307deg 36% 95%); --accent-50: hsl(313deg 36% 5%); --accent-100: hsl(319deg 37% 10%); --accent-200: hsl(317deg 37% 20%); --accent-300: hsl(318deg 37% 30%); --accent-400: hsl(318deg 37% 40%); --accent-500: hsl(318deg 37% 50%); --accent-600: hsl(318deg 37% 60%); --accent-700: hsl(318deg 37% 70%); --accent-800: hsl(317deg 37% 80%); --accent-900: hsl(319deg 37% 90%); --accent-950: hsl(320deg 36% 95%); } } :root { background-color: var(--background); color: var(--text); }