$bp-xs: 28em; $bp-s: 40em; $bp-m: 50em; $bp-l: 80em; $bp-footer-s: 28em; $bp-footer-m: 60em; $bp-hero: $bp-m; $z-index__header: 100; :root { --primary-100: #eff8ff; --primary-200: #aad4f5; --primary-300: #63a2d8; --primary-400: #3183c8; --primary-500: #2368a2; --primary-600: #1a4971; --primary-700: #203d54; // --primary-800: #203d54; // --primary-900: #203d54; --neutral-100: #f8f9fa; --neutral-200: #e1e7ec; --neutral-300: #cfd6de; --neutral-400: #b8c4ce; --neutral-500: #8895a7; --neutral-600: #5f6b7a; --neutral-700: #212934; // --neutral-800: #212934; // --neutral-900: #212934; --accent-primary-100: #e3fcec; --accent-primary-200: #a8eec1; --accent-primary-300: #74d99f; --accent-primary-400: #38c172; --accent-primary-500: #259d58; --accent-primary-600: #197741; --accent-primary-700: #145239; // --accent-primary-800: #145239; // --accent-primary-900: #145239; --accent-secondary-100: #fce8e8; --accent-secondary-200: #f5aaaa; --accent-secondary-300: #e46464; --accent-secondary-400: #dc3030; --accent-secondary-500: #b82020; --accent-secondary-600: #891b1b; --accent-secondary-700: #611818; // --accent-secondary-800: #611818; // --accent-secondary-900: #611818; // --accent-tertiary-100: #e7ffee; // --accent-quaternary-100: #fffcf4; // --accent-quinary-100: #ffeefc; --color__body: var(--neutral-600); --color-bg: var(--neutral-100); }