DEV: Use CSS custom properties for colors (#82)

assets/stylesheets/common/layout.scss

@@ -47,7 +47,7 @@
   .product {
     display: flex;
     flex-flow: column nowrap;
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
     padding: 1.5rem;
     margin: 1rem;
     width: calc(50% - 240px);
@@ -60,7 +60,7 @@
       flex-flow: row wrap;
       justify-content: space-between;
       .purchased {
-        color: $success;
+        color: var(--success);
       }
       .billing-link {
         align-self: flex-end;

assets/stylesheets/common/main.scss

@@ -63,9 +63,9 @@ table.discourse-subscriptions-user-table {
 }
 
 #stripe-elements {
-  border: 1px $primary-low-mid solid;
+  border: 1px solid var(--primary-low-mid);
   padding: 10px;
-  background-color: $primary-very-low;
+  background-color: var(--primary-very-low);
 }
 
 #card-action {

assets/stylesheets/common/subscribe.scss

@@ -26,8 +26,8 @@
   height: 40px;
   margin-bottom: 20px;
 
-  border: 1px $primary solid;
-  background-color: $secondary;
+  border: 1px solid var(--primary);
+  background-color: var(--secondary);
 
   font-size: $base-font-size;
   font-family: $base-font-family;
@@ -38,9 +38,9 @@
 }
 
 .StripeElement--invalid {
-  border-color: $danger;
+  border-color: var(--danger);
 }
 
 .StripeElement--webkit-autofill {
-  color: $quaternary;
+  color: var(--quaternary);
 }