:root { --color-primary: #223e78; --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: #f3f6fc; --color-primary-100: #e3eaf7; --color-primary-200: #bfceed; --color-primary-300: #98b0e2; --color-primary-400: #6085d2; --color-primary-500: #223E78; --color-primary-600: #1e376b; --color-primary-700: #1a2f5b; --color-primary-800: #142548; --color-primary-900: #0e1930; --color-secondary-50: #edf5f7; --color-secondary-100: #dbeaf0; --color-secondary-200: #b8d6e0; --color-secondary-300: #86b9cb; --color-secondary-400: #4a92ab; --color-secondary-500: #274D5A; --color-secondary-600: #22434e; --color-secondary-700: #1f3d47; --color-secondary-800: #1a343c; --color-secondary-900: #0e1b20; --color-sidebar-from: #223e78; --color-sidebar-to: #274d5a; }