:root { --color-primary: #7da2ca; --color-gray-25: hsl(211, 12%, 99%); --color-gray-50: hsl(211, 12%, 97%); --color-gray-100: hsl(211, 12%, 96%); --color-gray-200: hsl(211, 11%, 93%); --color-gray-300: hsl(211, 9%, 89%); --color-gray-400: hsl(211, 9%, 83%); --color-gray-500: hsl(211, 6%, 71%); --color-gray-600: hsl(211, 6%, 60%); --color-gray-700: hsl(211, 4%, 45%); --color-gray-800: hsl(211, 6%, 23%); --color-gray-900: hsl(211, 7%, 15%); --color-primary-50: #f4f7fb; --color-primary-100: #edf2f8; --color-primary-200: #d4e0ed; --color-primary-300: #bed0e4; --color-primary-400: #a1bcd9; --color-primary-500: #7DA2CA; --color-primary-600: #6a95c2; --color-primary-700: #5183b8; --color-primary-800: #406c9c; --color-primary-900: #2e4e70; --color-secondary-50: #f8f7fc; --color-secondary-100: #f1f0fa; --color-secondary-200: #dfddf4; --color-secondary-300: #cdc9ed; --color-secondary-400: #bbb6e7; --color-secondary-500: #A39CDE; --color-secondary-600: #9188d7; --color-secondary-700: #7f75d1; --color-secondary-800: #6a5ec9; --color-secondary-900: #4438a8; --color-sidebar-from: #7da2ca; --color-sidebar-to: #a39cde; }