diff --git a/assets/stylesheets/common/wizard-admin.scss b/assets/stylesheets/common/wizard-admin.scss
index ed79a48c..8076528a 100644
--- a/assets/stylesheets/common/wizard-admin.scss
+++ b/assets/stylesheets/common/wizard-admin.scss
@@ -714,20 +714,20 @@
 }
 
 .btn.btn-pavilion-pro {
-  background: $pavilion-primary;
-  color: $pavilion-secondary;
+  background: var(--pavilion-primary);
+  color: var(--pavilion-secondary);
 
   .d-icon {
-    color: $pavilion-secondary;
+    color: var(--pavilion-secondary);
   }
 
   &:hover,
   &:focus {
-    background: darken($pavilion-primary, 5%);
+    background: darken(var(--pavilion-primary), 5%);
     
     &[href],
     svg.d-icon {
-      color: darken($pavilion-secondary, 10%);
+      color: darken(var(--pavilion-secondary), 10%);
     }
   }
 }
diff --git a/assets/stylesheets/common/wizard-variables.scss b/assets/stylesheets/common/wizard-variables.scss
index 6fdc4484..8b4d9db7 100644
--- a/assets/stylesheets/common/wizard-variables.scss
+++ b/assets/stylesheets/common/wizard-variables.scss
@@ -1,2 +1,4 @@
-$pavilion-primary: #3c1c8c;
-$pavilion-secondary: #fff;
+:root {
+  --pavilion-primary: rgb(60, 28, 140);
+  --pavilion-secondary: rgb(255, 255, 255);
+}