add color custom properties

src/scss/_base.scss

@@ -1,15 +1,45 @@
-html,
+:root {
-body {
+--primary-900: #{$color__primary-900};
-  padding: 0;
+--primary-800: #{$color__primary-800};
-  margin: 0;
+--primary-700: #{$color__primary-700};
+--primary-600: #{$color__primary-600};
+--primary-500: #{$color__primary-500};
+--primary-400: #{$color__primary-400};
+--primary-300: #{$color__primary-300};
+--primary-200: #{$color__primary-200};
+--primary-100: #{$color__primary-100};
+--primary-50: #{$color__primary-50};
+
+--secondary-500: #{$color__secondary-500};
+--tertiary-500: #{$color__tertiary-500};
+
+--accent-900: #{$color__accent-900};
+--accent-800: #{$color__accent-800};
+--accent-700: #{$color__accent-700};
+--accent-600: #{$color__accent-600};
+--accent-500: #{$color__accent-500};
+--accent-400: #{$color__accent-400};
+--accent-300: #{$color__accent-300};
+--accent-200: #{$color__accent-200};
+--accent-100: #{$color__accent-100};
+--accent-50: #{$color__accent-50};
+
+--neutral-900: #{$color__neutral-900};
+--neutral-800: #{$color__neutral-800};
+--neutral-700: #{$color__neutral-700};
+--neutral-600: #{$color__neutral-600};
+--neutral-500: #{$color__neutral-500};
+--neutral-400: #{$color__neutral-400};
+--neutral-300: #{$color__neutral-300};
+--neutral-200: #{$color__neutral-200};
+--neutral-100: #{$color__neutral-100};
+
+--white: #{$color__white};
+--black: #{$color__black};
 }
 
 body {
   font-size: 100%;
-  box-sizing: border-box;
+  color: $color-body;
-  background-color: pink;
+  background-color: $background-color;
-}
-
-* {
-  box-sizing: inherit;
 }

src/scss/_color.scss

@@ -9,8 +9,8 @@ $color__primary-200: #aaafe6;
 $color__primary-100: #cccef0;
 $color__primary-50: #ebecf9;
 
-$color__secondary: #788bff;
+$color__secondary-500: #788bff;
-$color__tertiary: #3f3d56;
+$color__tertiary-500: #3f3d56;
 
 $color__accent-900: #00672e;
 $color__accent-800: #00854c;