FIX: Use SCSS variables for color manipulation functions

assets/stylesheets/common/wizard-admin.scss

@@ -723,11 +723,11 @@
 
   &:hover,
   &:focus {
-    background: darken(var(--pavilion-primary), 5%);
+    background: darken($pavilionPrimary, 5%);
 
     &[href],
     svg.d-icon {
-      color: darken(var(--pavilion-secondary), 10%);
+      color: darken($pavilionSecondary, 10%);
     }
   }
 }

assets/stylesheets/common/wizard-variables.scss

@@ -1,4 +1,7 @@
+$pavilionPrimary: #3c1c8c;
+$pavilionSecondary: #ffffff;
+
 :root {
-  --pavilion-primary: rgb(60, 28, 140);
-  --pavilion-secondary: rgb(255, 255, 255);
+  --pavilion-primary: #3c1c8c;
+  --pavilion-secondary: #ffffff;
 }