Use variables for the rem values.

It's become obvious that these random floating points everywhere
are unwieldy. Now they're all in one place with some fairly logical
variable names which will help out in design->implementation phase.

res/themes/light/css/_light.scss

@@ -310,7 +310,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
     border: 0px;
     border-radius: 4px;
     font-family: $font-family;
-    font-size: 0.933rem;
+    font-size: $font-14px;
     color: $button-fg-color;
     background-color: $button-bg-color;
     width: auto;
@@ -331,7 +331,7 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 
 @define-mixin mx_DialogButton_small {
     @mixin mx_DialogButton;
-    font-size: 1rem;
+    font-size: $font-15px;
     padding: 0px 1.5em 0px 1.5em;
 }
 

res/themes/light/css/light.scss

@@ -1,3 +1,4 @@
+@import "../../../../res/css/_font-sizes.scss";
 @import "_paths.scss";
 @import "_fonts.scss";
 @import "_light.scss";