use sass varaiables to set custom css properties

src/css/imports/variables.scss

@@ -3,54 +3,93 @@ $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;
+$color-primary-100: #eff8ff;
+$color-primary-200: #aad4f5;
+$color-primary-300: #63a2d8;
+$color-primary-400: #3183c8;
+$color-primary-500: #2368a2;
+$color-primary-600: #1a4971;
+$color-primary-700: #203d54;
+// $color-primary-800: #203d54;
+// $color-primary-900: #203d54;
+$color-neutral-100: #f8f9fa;
+$color-neutral-200: #e1e7ec;
+$color-neutral-300: #cfd6de;
+$color-neutral-400: #b8c4ce;
+$color-neutral-500: #8895a7;
+$color-neutral-600: #5f6b7a;
+$color-neutral-700: #212934;
+// $color-neutral-800: #212934;
+// $color-neutral-900: #212934;
+$color-accent-primary-100: #e3fcec;
+$color-accent-primary-200: #a8eec1;
+$color-accent-primary-300: #74d99f;
+$color-accent-primary-400: #38c172;
+$color-accent-primary-500: #259d58;
+$color-accent-primary-600: #197741;
+$color-accent-primary-700: #145239;
+// $color-accent-primary-800: #145239;
+// $color-accent-primary-900: #145239;
+$color-accent-secondary-100: #fce8e8;
+$color-accent-secondary-200: #f5aaaa;
+$color-accent-secondary-300: #e46464;
+$color-accent-secondary-400: #dc3030;
+$color-accent-secondary-500: #b82020;
+$color-accent-secondary-600: #891b1b;
+$color-accent-secondary-700: #611818;
+// $color-accent-secondary-800: #611818;
+// $color-accent-secondary-900: #611818;
 
-  // --accent-tertiary-100: #e7ffee;
-  // --accent-quaternary-100: #fffcf4;
-  // --accent-quinary-100: #ffeefc;
+// $color-accent-tertiary-100: #e7ffee;
+// $color-accent-quaternary-100: #fffcf4;
+// $color-accent-quinary-100: #ffeefc;
+
+$color-color__body: $color-neutral-600;
+$color-color-bg: $color-neutral-100;
+
+:root {
+  --primary-100: #{$color-primary-100};
+  --primary-200: #{$color-primary-200};
+  --primary-300: #{$color-primary-300};
+  --primary-400: #{$color-primary-400};
+  --primary-500: #{$color-primary-500};
+  --primary-600: #{$color-primary-600};
+  --primary-700: #{$color-primary-700};
+  // --primary-800: #{$color-primary-800};
+  // --primary-900: #{$color-primary-900};
+  --neutral-100: #{$color-neutral-100};
+  --neutral-200: #{$color-neutral-200};
+  --neutral-300: #{$color-neutral-300};
+  --neutral-400: #{$color-neutral-400};
+  --neutral-500: #{$color-neutral-500};
+  --neutral-600: #{$color-neutral-600};
+  --neutral-700: #{$color-neutral-700};
+  // --neutral-800: #{$color-neutral-800};
+  // --neutral-900: #{$color-neutral-900};
+  --accent-primary-100: #{$color-accent-primary-100};
+  --accent-primary-200: #{$color-accent-primary-200};
+  --accent-primary-300: #{$color-accent-primary-300};
+  --accent-primary-400: #{$color-accent-primary-400};
+  --accent-primary-500: #{$color-accent-primary-500};
+  --accent-primary-600: #{$color-accent-primary-600};
+  --accent-primary-700: #{$color-accent-primary-700};
+  //--accent-primary-800: #{$color-accent-primary-800};
+  //--accent-primary-900: #{$color-accent-primary-900};
+  --accent-secondary-100: #{$color-accent-secondary-100};
+  --accent-secondary-200: #{$color-accent-secondary-200};
+  --accent-secondary-300: #{$color-accent-secondary-300};
+  --accent-secondary-400: #{$color-accent-secondary-400};
+  --accent-secondary-500: #{$color-accent-secondary-500};
+  --accent-secondary-600: #{$color-accent-secondary-600};
+  --accent-secondary-700: #{$color-accent-secondary-700};
+  //--accent-secondary-800: #{$color-accent-secondary-800};
+  //--accent-secondary-900: #{$color-accent-secondary-900};
+
+  //--accent-tertiary-100: #{$color-color-accent-tertiary-100};
+  //--accent-quaternary-100: #{$color-accent-quaternary-100};
+  //--accent-quinary-100: #{$color-accent-quinary-100};
 
   --color__body: var(--neutral-600);
   --color-bg: var(--neutral-100);