🌈 Organise colors with vars only

assets/css/_sass/_colours.scss

@@ -0,0 +1,11 @@
+$primary-color: hsl(0, 100%, 50%);
+$secondary-color: hsl(120, 100%, 25%);
+
+$dark-red: hsl(0, 100%, 32.2%);
+$pink: hsl(349.5, 100%, 87.6%); 
+$black: hsl(0, 0%, 13%);
+$white: hsl(0, 0%, 100%);
+
+$dark-grey: hsl(0, 0%, 31%);
+$mid-grey: hsl(0, 0%, 46.3%); // the lightest shade of grey you can get away with, #a11y
+$light-grey: hsl(0, 0%, 93.3%); // for backgrounds only

assets/css/base.scss

@@ -3,6 +3,7 @@
 
 @import '~prism-themes/themes/prism-a11y-dark';
 @import '_sass/functions';
+@import '_sass/colours'
 
 $browser-context: 16;
 
@@ -11,9 +12,9 @@ pre[class*='language-'] {
 }
 
 code {
-  background-color: #333333;
+  background-color: $dark-grey;
-  border: pxToRem(1) solid black;
+  border: 1px solid $black;
-  color: white;
+  color: $white;
   padding: 0.15em;
   border-radius: 0.25em;
   font-size: 95%;
@@ -34,18 +35,6 @@ code {
   --l-gap: 1rem;
 }
 
-$primary-color: #0e4bff; //cobalt blue is so pretty//
-$secondary-color: #f3f315; //
-
-$black: #222222;
-$white: #ffffff;
-$pistachio: #e5ffe5;
-$yellow: #ffff00;
-
-$dark-grey: #4f4f4f;
-$mid-grey: #767676; // the lightest shade of grey you can get away with, #a11y
-$light-grey: #eeeeee; // for backgrounds only
-
 // TYPOGRAPHY //
 $sans-serif: monotype-grotesque, 'Lucida Sans', sans-serif;
 $serif: orpheuspro, Palatino, Times, serif;