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/css/structures/_RoomDirectory.scss

@@ -64,7 +64,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_table {
-    font-size: 0.8rem;
+    font-size: $font-12px;
     color: $primary-fg-color;
     width: 100%;
     text-align: left;
@@ -112,7 +112,7 @@ limitations under the License.
 
 .mx_RoomDirectory_name {
     display: inline-block;
-    font-size: 1.2rem;
+    font-size: $font-18px;
     font-weight: 600;
 }
 
@@ -124,7 +124,7 @@ limitations under the License.
     border-radius: 10px;
     display: inline-block;
     height: 20px;
-    line-height: 1.333rem;
+    line-height: $font-20px;
     padding: 0 5px;
     color: $accent-fg-color;
     background-color: $rte-room-pill-color;
@@ -136,7 +136,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_alias {
-    font-size: 0.8rem;
+    font-size: $font-12px;
     color: $settings-grey-fg-color;
 }
 
@@ -150,7 +150,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory > span {
-    font-size: 1rem;
+    font-size: $font-15px;
     margin-top: 0;
 
     .mx_AccessibleButton {