Allow different hover button colors per tenant

app/assets/stylesheets/custom/tenants.scss

@@ -5,14 +5,16 @@
 // `.tenant-public` selector.
 //
 // You can use CSS variables to customize the colors. Here's an example
-// changing the brand, links and main layout colors for just the main
-// tenant.
+// changing the brand, buttons, links and main layout colors for just
+// the main tenant.
 //
 // .tenant-public {
 //   --anchor-color: #372;
 //   --anchor-color-hover: #137;
 //   --brand: #153;
 //   --brand-secondary: #134a00;
+//   --button-background-hover: #fa0;
+//   --button-background-hover-contrast: #{$black};
 //   --footer: #e6e6e6;
 //   --main-header: #351;
 //   --top-links: var(--main-header);

app/assets/stylesheets/layout.scss

@@ -122,7 +122,6 @@ button,
 
 .button {
   @extend %button;
-  @include brand-background;
 
   &.medium {
     font-size: $small-font-size;

app/assets/stylesheets/mixins/buttons.scss

@@ -14,10 +14,6 @@
   }
 }
 
-%button {
-  @include base-button;
-}
-
 @mixin regular-button($color: $brand) {
   @include base-button;
 
@@ -29,10 +25,14 @@
 
   &:hover,
   &:focus {
-    @include background-with-text-contrast($button-background-hover);
+    @include background-with-text-contrast($button-background-hover, button-background-hover);
   }
 }
 
+%button {
+  @include regular-button;
+}
+
 @mixin hollow-button($color: $anchor-color) {
   @include normal-selection;
   @include base-button;