diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 44ef288473..33db25dd7f 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -139,7 +139,7 @@ $mobile-breakpoint: 700px;
     .label {
       display: block;
       color: var(--primary-medium);
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       margin: 0.5em 0 0.15em 0;
     }
     tr {
@@ -205,7 +205,7 @@ $mobile-breakpoint: 700px;
     }
     .site-text-search {
       padding: 0.5em;
-      font-size: $font-0;
+      font-size: var(--font-0);
       width: 50%;
     }
     .reseed {
@@ -230,7 +230,7 @@ $mobile-breakpoint: 700px;
     }
     h3 {
       font-weight: normal;
-      font-size: $font-0;
+      font-size: var(--font-0);
       @include breakpoint(mobile-extra-large) {
         word-wrap: break-word;
       }
@@ -296,7 +296,7 @@ $mobile-breakpoint: 700px;
   width: 27%;
   float: left;
   li a span.count {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     float: right;
     margin-right: 10px;
     background-color: var(--primary-low);
@@ -387,7 +387,7 @@ $mobile-breakpoint: 700px;
     background-color: var(--secondary);
     padding: 12px 12px 5px;
     .powered-by {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       position: absolute;
       bottom: -10px;
       left: 10px;
@@ -546,7 +546,7 @@ $mobile-breakpoint: 700px;
     }
   }
   h1 {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
     line-height: $line-height-medium;
     color: var(--primary);
   }
@@ -695,7 +695,7 @@ $mobile-breakpoint: 700px;
 
 section.details {
   h1 {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
     color: var(--primary);
     padding: 5px 10px;
     margin: 30px 0 5px 0;
diff --git a/app/assets/stylesheets/common/admin/admin_report.scss b/app/assets/stylesheets/common/admin/admin_report.scss
index 5a9e7bf4fc..4df36357ff 100644
--- a/app/assets/stylesheets/common/admin/admin_report.scss
+++ b/app/assets/stylesheets/common/admin/admin_report.scss
@@ -19,7 +19,7 @@
 
     .item {
       display: inline;
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
     }
 
     .all-reports .report-url {
@@ -67,11 +67,11 @@
     }
 
     .value {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
     }
 
     .icon {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       font-weight: 700;
     }
   }
@@ -96,7 +96,7 @@
 
     .d-icon {
       color: currentColor;
-      font-size: $font-up-5;
+      font-size: var(--font-up-5);
       display: block;
       margin: 0.25em auto;
     }
diff --git a/app/assets/stylesheets/common/admin/admin_report_counters.scss b/app/assets/stylesheets/common/admin/admin_report_counters.scss
index a055d716aa..e26f7daa63 100644
--- a/app/assets/stylesheets/common/admin/admin_report_counters.scss
+++ b/app/assets/stylesheets/common/admin/admin_report_counters.scss
@@ -34,7 +34,7 @@
 
       .d-icon-minus {
         color: var(--primary-medium);
-        font-size: $font-down-3;
+        font-size: var(--font-down-3);
       }
 
       &.high-trending-up,
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index ae41c0abf2..19ca2c84ec 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -202,16 +202,16 @@ table.api-keys {
     }
 
     .scope-resource-name {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
     }
 
     .scope-tooltip {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
     }
 
     .scope-name {
       font-weight: bold;
-      font-size: $font-0;
+      font-size: var(--font-0);
       display: inline;
     }
   }
@@ -310,7 +310,7 @@ table.api-keys {
     margin-top: 10px;
   }
   label {
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
   &.content-list {
     width: 100%;
diff --git a/app/assets/stylesheets/common/admin/badges.scss b/app/assets/stylesheets/common/admin/badges.scss
index a22bbdd373..2af146bb6a 100644
--- a/app/assets/stylesheets/common/admin/badges.scss
+++ b/app/assets/stylesheets/common/admin/badges.scss
@@ -47,7 +47,7 @@
       }
       .list-badge {
         float: right;
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
         font-weight: normal;
         padding: 0 6px;
         color: var(--secondary);
@@ -66,7 +66,7 @@
       margin: 0;
       margin-top: 5px;
       color: var(--primary-medium);
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
     }
     .badge-grouping-control {
       display: flex;
diff --git a/app/assets/stylesheets/common/admin/customize-install-theme.scss b/app/assets/stylesheets/common/admin/customize-install-theme.scss
index 939d4be29b..2b90528a87 100644
--- a/app/assets/stylesheets/common/admin/customize-install-theme.scss
+++ b/app/assets/stylesheets/common/admin/customize-install-theme.scss
@@ -95,7 +95,7 @@
     flex: 1;
     .popular-theme-type {
       font-weight: normal;
-      font-size: $font-down-2;
+      font-size: var(--font-down-2);
       color: var(--primary-medium);
     }
 
@@ -110,21 +110,21 @@
     }
 
     .popular-theme-description {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       padding-right: 20px;
     }
   }
   .popular-theme-buttons {
     > span {
       font-style: italic;
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       color: var(--primary-medium);
       margin-right: 8px;
     }
 
     > a {
       display: block;
-      font-size: $font-down-2;
+      font-size: var(--font-down-2);
       margin-top: 5px;
       text-align: center;
     }
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index bf18cfc2b4..871ff9c9b3 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -48,7 +48,7 @@
     margin-bottom: 10px;
     input {
       margin-bottom: 0;
-      font-size: $font-down-2;
+      font-size: var(--font-down-2);
       .ios-device & {
         font-size: var(--font-down-2);
       }
@@ -86,7 +86,7 @@
     vertical-align: top;
 
     .title {
-      font-size: $font-up-4;
+      font-size: var(--font-up-4);
       font-weight: bold;
       margin-bottom: 0.25em;
       display: flex;
@@ -99,7 +99,7 @@
         margin-left: 0.5em;
       }
       a {
-        font-size: $font-down-2;
+        font-size: var(--font-down-2);
       }
     }
 
@@ -120,7 +120,7 @@
     }
 
     div.remote-url {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       margin-bottom: 7px;
     }
 
@@ -135,7 +135,7 @@
     }
 
     .mini-title {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       font-weight: bold;
       margin-bottom: 7px;
     }
@@ -264,7 +264,7 @@
         overflow: hidden;
         display: flex;
         font-weight: bold;
-        font-size: $font-up-1;
+        font-size: var(--font-up-1);
 
         .icons {
           margin-left: auto;
@@ -274,7 +274,7 @@
       .components-list {
         margin-top: 5px;
         display: inline-block;
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
         align-items: baseline;
         color: var(--primary-high);
 
@@ -368,7 +368,7 @@
   .editor-information {
     display: flex;
     align-items: center;
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
     margin-bottom: 0.5em;
 
     .editor-back-button {
@@ -501,7 +501,7 @@
 
     .ace_placeholder {
       font-family: inherit;
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       color: $primary-high;
     }
 
@@ -572,7 +572,7 @@
     .description {
       margin: 0.15em 0 0;
       color: var(--primary-high);
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       line-height: $line-height-medium;
     }
 
@@ -585,7 +585,7 @@
 
   .status-message {
     display: block;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     margin-top: 8px;
   }
 
@@ -759,7 +759,7 @@ table.permalinks {
       }
       div.label {
         display: block;
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
         color: var(--primary-medium);
       }
       td.controls,
@@ -875,7 +875,7 @@ table.permalinks {
 
 .reseed-modal {
   .options-group-title {
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
     font-weight: bold;
     margin: 8px 0;
   }
diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss
index 5f8faf8036..e8773fa4fd 100644
--- a/app/assets/stylesheets/common/admin/dashboard.scss
+++ b/app/assets/stylesheets/common/admin/dashboard.scss
@@ -314,7 +314,7 @@
     border: 1px solid var(--primary-low);
 
     .title {
-      font-size: $font-0;
+      font-size: var(--font-0);
     }
 
     .spinner {
@@ -338,7 +338,7 @@
     }
 
     .d-icon {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       margin: 0 0.25em 0 0;
       color: var(--primary-low-mid);
     }
@@ -377,7 +377,7 @@
 
       .d-icon {
         margin-right: 5px;
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
       }
     }
 
@@ -567,7 +567,7 @@
   }
 
   .version-number {
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
     line-height: $line-height-small;
     box-sizing: border-box;
     font-weight: bold;
@@ -582,13 +582,13 @@
     }
 
     h4 {
-      font-size: $font-down-2;
+      font-size: var(--font-down-2);
       margin-bottom: 0.5em;
     }
 
     .sha-link {
       display: inline-flex;
-      font-size: $font-down-2;
+      font-size: var(--font-down-2);
       font-weight: normal;
     }
   }
@@ -606,7 +606,7 @@
     }
     .face {
       margin: 0 0.75em 0 0;
-      font-size: $font-up-3;
+      font-size: var(--font-up-3);
     }
   }
   &.critical .version-notes .normal-note {
@@ -616,7 +616,7 @@
     display: none;
   }
   .fa {
-    font-size: $font-up-4;
+    font-size: var(--font-up-4);
   }
   .up-to-date {
     color: var(--success);
@@ -631,7 +631,7 @@
 
 .update-nag {
   .d-icon {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
   }
 }
 
@@ -691,7 +691,7 @@
     padding-right: 0.5em;
     width: 75%;
     .header {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       font-weight: bold;
       margin-bottom: 0.5em;
     }
diff --git a/app/assets/stylesheets/common/admin/emails.scss b/app/assets/stylesheets/common/admin/emails.scss
index 0b6b9e76a2..a1da84fd0a 100644
--- a/app/assets/stylesheets/common/admin/emails.scss
+++ b/app/assets/stylesheets/common/admin/emails.scss
@@ -10,7 +10,7 @@
   }
   .reply-key {
     display: block;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     color: var(--primary-medium);
   }
   .username div {
@@ -53,7 +53,7 @@
   }
   .error-description {
     color: var(--primary-medium);
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
   hr {
     margin: 0;
diff --git a/app/assets/stylesheets/common/admin/settings.scss b/app/assets/stylesheets/common/admin/settings.scss
index c27a0606a3..807a475876 100644
--- a/app/assets/stylesheets/common/admin/settings.scss
+++ b/app/assets/stylesheets/common/admin/settings.scss
@@ -94,7 +94,7 @@
     .desc,
     .validation-error {
       padding-top: 3px;
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       line-height: $line-height-large;
     }
     .validation-error {
@@ -104,7 +104,7 @@
       color: var(--primary-medium);
     }
     h3 {
-      font-size: $font-0;
+      font-size: var(--font-0);
       font-weight: normal;
     }
   }
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index 3f2b48aa06..9aa7443a2f 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -124,7 +124,7 @@
       margin-right: 0.25em;
     }
     .deleted-user {
-      font-size: $font-up-2;
+      font-size: var(--font-up-2);
     }
   }
   .created_at {
@@ -297,7 +297,7 @@ table.screened-ip-addresses {
 
   .tag {
     background: var(--primary-low);
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     margin-right: 0.1em;
     padding: 0.5em;
   }
diff --git a/app/assets/stylesheets/common/admin/users.scss b/app/assets/stylesheets/common/admin/users.scss
index 42ab09fe09..59410f5987 100644
--- a/app/assets/stylesheets/common/admin/users.scss
+++ b/app/assets/stylesheets/common/admin/users.scss
@@ -63,7 +63,7 @@
   }
   .long-value {
     margin-left: 12px;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     button {
       margin-left: 10px;
     }
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index b04e40e97c..584bc8f016 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -3,14 +3,14 @@
 .list-controls {
   a.badge-category {
     padding: 3px 12px;
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
   }
 
   .combo-box .combo-box-header {
     background: var(--secondary);
     color: var(--primary);
     border: 1px solid var(--primary-medium);
-    font-size: $font-0;
+    font-size: var(--font-0);
     transition: none;
     height: 100%;
     &:focus {
@@ -95,7 +95,7 @@
   p {
     margin-top: 0;
     line-height: $line-height-large;
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
   }
 }
 
@@ -145,13 +145,13 @@
   .post-excerpt {
     margin-top: 0.5em;
     margin-bottom: 0.5em;
-    font-size: $font-down-2;
+    font-size: var(--font-down-2);
     word-break: break-word;
   }
 }
 
 .topic-list-main-link {
-  font-size: $font-up-1;
+  font-size: var(--font-up-1);
   a.title {
     padding: 15px 0;
     word-break: break-word;
@@ -210,7 +210,7 @@
       background-color: var(--secondary);
       color: var(--danger-medium);
       padding: 0 8px;
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
     }
   }
 
@@ -225,7 +225,7 @@
 
   td {
     color: var(--primary-medium);
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
 
   .main-link {
@@ -253,12 +253,12 @@
     }
     .d-icon {
       vertical-align: middle;
-      font-size: $font-down-5;
+      font-size: var(--font-down-5);
     }
   }
 
   .link-bottom-line {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -282,7 +282,7 @@
 
   .topic-excerpt {
     display: block;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     margin-top: 0.33em;
     color: var(--primary-high);
     word-wrap: break-word;
@@ -360,7 +360,7 @@
     padding: 0;
     border: 0;
     color: var(--danger-medium);
-    font-size: $font-0;
+    font-size: var(--font-0);
     cursor: default;
   }
 }
@@ -368,7 +368,7 @@
 .topic-list {
   .alert {
     margin-bottom: 0;
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
   .spinner {
     margin-top: 40px;
diff --git a/app/assets/stylesheets/common/base/activation.scss b/app/assets/stylesheets/common/base/activation.scss
index 00ec1e4fa7..559fa2a09f 100644
--- a/app/assets/stylesheets/common/base/activation.scss
+++ b/app/assets/stylesheets/common/base/activation.scss
@@ -10,7 +10,7 @@
 
   .account-created {
     .ac-message {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       line-height: $line-height-large;
     }
     .activation-controls {
diff --git a/app/assets/stylesheets/common/base/alert.scss b/app/assets/stylesheets/common/base/alert.scss
index 5534e6ac2c..912a1a6605 100644
--- a/app/assets/stylesheets/common/base/alert.scss
+++ b/app/assets/stylesheets/common/base/alert.scss
@@ -6,7 +6,7 @@
   margin-bottom: 1em;
 
   .close {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
     position: absolute;
     top: 0.265em;
     right: 0.66em;
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index f3b52df42f..75fd1d9b03 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -143,7 +143,7 @@
   .description {
     margin-bottom: 1em;
     text-align: center;
-    font-size: $font-0;
+    font-size: var(--font-0);
     color: var(--primary-med-or-secondary-high);
     position: relative;
     @include line-clamp(4);
@@ -160,7 +160,7 @@
   }
 
   h3 {
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
     margin-bottom: 0.5em;
     margin-top: 0.25em;
     line-height: $line-height-medium;
@@ -260,7 +260,7 @@
   }
 
   h3 {
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
     text-align: center;
     overflow: hidden;
   }
@@ -331,7 +331,7 @@
   margin-bottom: 0;
   border-top: 1px solid var(--primary-low);
   .category-description {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
   .category-logo.aspect-image {
     --max-height: 75px;
@@ -342,7 +342,7 @@
   > h3 a.category-title-link,
   > h4 a.category-title-link {
     color: var(--primary-medium);
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
   > .category-description,
   tr.category-description {
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 35b6f6667d..0bbc9cfbc4 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -415,7 +415,7 @@ html.composer-open {
           color: var(--primary);
         }
         span.name {
-          font-size: $font-down-1;
+          font-size: var(--font-down-1);
           vertical-align: middle;
         }
         &.selected {
@@ -447,7 +447,7 @@ div.ac-wrap.disabled {
 div.ac-wrap div.item a.remove,
 .remove-link {
   margin-left: 4px;
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   line-height: $line-height-small;
   padding: 1px 3.5px;
   border-radius: 12px;
diff --git a/app/assets/stylesheets/common/base/composer-user-selector.scss b/app/assets/stylesheets/common/base/composer-user-selector.scss
index a1614ffdfd..e689d53c37 100644
--- a/app/assets/stylesheets/common/base/composer-user-selector.scss
+++ b/app/assets/stylesheets/common/base/composer-user-selector.scss
@@ -5,7 +5,7 @@ div.ac-wrap.composer-user-selector-limited {
   .btn-primary {
     margin-left: 0.5em;
     padding: 3px 6px 2px;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     min-height: unset;
   }
 }
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index 450f561500..eb37317f9f 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -37,7 +37,7 @@
   .directory-last-updated {
     margin-bottom: 0.5em;
     color: var(--primary-medium);
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
 
   table {
@@ -55,10 +55,10 @@
 
       .number,
       .time-read {
-        font-size: $font-up-3;
+        font-size: var(--font-up-3);
         color: var(--primary-medium);
         @media screen and (max-width: $small-width) {
-          font-size: $font-up-1;
+          font-size: var(--font-up-1);
         }
       }
       .time-read {
@@ -68,7 +68,7 @@
         font-size: var(--font-up-1);
         color: var(--primary-medium);
         @media screen and (max-width: $small-width) {
-          font-size: $font-0;
+          font-size: var(--font-0);
         }
       }
     }
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index fe536833e5..d6a87afbf3 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -73,10 +73,10 @@ body {
 
 // setting a static limit on big and small prevents nesting abuse
 big {
-  font-size: $font-up-5;
+  font-size: var(--font-up-5);
 }
 small {
-  font-size: $font-down-2;
+  font-size: var(--font-down-2);
 }
 
 blockquote {
@@ -469,7 +469,7 @@ table {
 
     .relative-date {
       text-align: left;
-      font-size: $font-down-3;
+      font-size: var(--font-down-3);
       padding-top: 3px;
       margin-left: 0.75em;
       color: var(--primary-medium);
@@ -544,7 +544,7 @@ table {
 
   .skip-new-user-tips,
   .read-later-link {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     text-decoration: underline;
   }
 
@@ -606,7 +606,7 @@ table {
 .content-list {
   h3 {
     color: var(--primary-medium);
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
     padding-left: 5px;
     margin-bottom: 10px;
   }
@@ -658,7 +658,7 @@ table {
     font-family: $heading-font-family;
 
     font-weight: bold;
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
     line-height: $line-height-large;
   }
 
@@ -718,7 +718,7 @@ table {
 
 #loading-message {
   position: absolute;
-  font-size: $font-up-5;
+  font-size: var(--font-up-5);
   text-align: center;
   top: 120px;
   left: 500px;
diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index 4dd77506fd..0f04d5e09d 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -69,7 +69,7 @@ sup img.emoji {
 
       .trash-recent {
         background: none;
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
 
         &:hover .d-icon {
           color: var(--danger-hover);
diff --git a/app/assets/stylesheets/common/base/empty-state.scss b/app/assets/stylesheets/common/base/empty-state.scss
index 7c1245a7c2..b7cc375e7b 100644
--- a/app/assets/stylesheets/common/base/empty-state.scss
+++ b/app/assets/stylesheets/common/base/empty-state.scss
@@ -9,7 +9,7 @@
     font-weight: 700;
     padding: 0;
     margin: 0;
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
   }
 
   .empty-state-body {
diff --git a/app/assets/stylesheets/common/base/exception.scss b/app/assets/stylesheets/common/base/exception.scss
index 398db97b27..47a2992824 100644
--- a/app/assets/stylesheets/common/base/exception.scss
+++ b/app/assets/stylesheets/common/base/exception.scss
@@ -6,11 +6,11 @@
     font-size: 4.286em;
   }
   .reason {
-    font-size: $font-up-4;
+    font-size: var(--font-up-4);
   }
   .url {
     font-style: italic;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
   .desc {
     margin-top: 16px;
diff --git a/app/assets/stylesheets/common/base/faqs.scss b/app/assets/stylesheets/common/base/faqs.scss
index 26fc429851..95a6327a05 100644
--- a/app/assets/stylesheets/common/base/faqs.scss
+++ b/app/assets/stylesheets/common/base/faqs.scss
@@ -14,7 +14,7 @@
     }
   }
   .mobile-view & {
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
   li {
     margin-bottom: 8px;
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index 4d9fc177bb..6591bd0e3c 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -48,13 +48,13 @@ span.mention-group {
   }
 
   .group-info-name {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
     font-weight: bold;
     color: var(--primary);
   }
 
   .group-info-full-name {
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
     color: var(--primary-high-or-secondary-low);
   }
 
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index f577589fb1..0c6c9ea436 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -108,7 +108,7 @@
     }
 
     .groups-info-name {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       font-weight: bold;
       color: var(--primary);
     }
@@ -150,7 +150,7 @@
     .control-instructions {
       color: $primary-medium;
       margin-bottom: 10px;
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       line-height: $line-height-large;
     }
 
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 4bf326015f..901e2f3d41 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -62,7 +62,7 @@
   }
 
   .d-icon-home {
-    font-size: $font-up-6;
+    font-size: var(--font-up-6);
   }
 
   .panel {
@@ -180,7 +180,7 @@
 
   .d-icon {
     width: 100%;
-    font-size: $font-up-4;
+    font-size: var(--font-up-4);
     line-height: $line-height-large;
     display: inline-block;
     color: var(--header_primary-low-mid);
@@ -292,7 +292,7 @@
   .header-title {
     padding: 0;
     margin: 0;
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
     width: 100%;
   }
   .categories-wrapper {
@@ -340,7 +340,7 @@ $mobile-avatar-height: 1.532em;
 .topic-header-participants {
   display: flex;
   align-items: center;
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   @include ellipsis;
   &:not(:first-child) {
     margin-left: 5px;
diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss
index 2d063563aa..db86e581ca 100644
--- a/app/assets/stylesheets/common/base/lightbox.scss
+++ b/app/assets/stylesheets/common/base/lightbox.scss
@@ -63,7 +63,7 @@ $meta-element-margin: 6px;
     margin: $meta-element-margin;
     padding-right: 20px;
     color: var(--secondary-high);
-    font-size: $font-0;
+    font-size: var(--font-0);
     flex-shrink: 0;
     flex-grow: 3;
   }
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 4d8f14ac68..3ce8be5502 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -3,7 +3,7 @@ $invite-mobile-bg: absolute-image-url("/branded-background-mobile.svg");
 
 .caps-lock-warning {
   color: var(--danger);
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   font-weight: bold;
 }
 
@@ -203,7 +203,7 @@ body.invite-page {
         left: calc(1em - 0.25em);
         background-color: var(--secondary);
         padding: 0 0.25em 0 0.25em;
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
       }
       input.alt-placeholder:invalid {
         color: var(--primary);
@@ -220,7 +220,7 @@ body.invite-page {
 
       #forgot-password-link,
       #email-login-link {
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
       }
 
       .tip:not(:empty) + label.more-info {
@@ -400,7 +400,7 @@ body.invite-page {
     .instructions {
       color: var(--primary-medium);
       margin: 0;
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       font-weight: normal;
       line-height: $line-height-medium;
     }
@@ -432,7 +432,7 @@ button#new-account-link {
   align-items: center;
   p {
     margin: 0;
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
   a {
     display: inline-block;
diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index b96367f538..f6ec6bb212 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -271,7 +271,7 @@ button {
   padding: 0 0 18px 10px;
   color: $controls-color;
   font-style: normal;
-  font-size: $font-up-5;
+  font-size: var(--font-up-5);
   font-family: Arial, Baskerville, monospace;
 
   &:hover,
@@ -306,7 +306,7 @@ button {
   top: 0;
   right: 0;
   color: $controls-text-color;
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   line-height: $line-height-medium;
 }
 
@@ -458,7 +458,7 @@ button {
     small {
       color: $caption-subtitle-color;
       display: block;
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       line-height: $line-height-medium;
     }
     figure {
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 4d100cb2aa..7cfc0310ab 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -218,7 +218,7 @@
 
     .profile-tab-btn {
       .relative-date {
-        font-size: $font-down-3;
+        font-size: var(--font-down-3);
         color: var(--primary-medium);
       }
 
@@ -289,7 +289,7 @@
     }
 
     .new {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       margin-left: 0.5em;
       color: var(--primary-med-or-secondary-med);
     }
@@ -324,7 +324,7 @@
       background-color: transparent;
       display: inline;
       padding: 0;
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       line-height: $line-height-large;
     }
     .badge-wrapper {
@@ -349,11 +349,11 @@
   b.topics-count {
     color: var(--primary-med-or-secondary-med);
     font-weight: normal;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
 
   div.discourse-tags {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 10aa9ce7e7..337db4e99f 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -171,7 +171,7 @@
     padding: 10px 30px 10px 15px;
     background-color: var(--secondary);
     li > a {
-      font-size: $font-0;
+      font-size: var(--font-0);
     }
     border-bottom: 1px solid var(--primary-low);
   }
@@ -228,7 +228,7 @@
               align-items: center;
             }
             .discourse-tags {
-              font-size: $font-down-1;
+              font-size: var(--font-down-1);
             }
           }
         }
@@ -240,7 +240,7 @@
       box-sizing: border-box;
     }
     p {
-      font-size: $font-0;
+      font-size: var(--font-0);
     }
     .archetype-option {
       margin-bottom: 20px;
@@ -269,7 +269,7 @@
 
   // password reset modal
   .modal-body.forgot-password-modal p {
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
 
   pre code {
@@ -462,7 +462,7 @@
 
 .custom-message-length {
   color: var(--primary-medium);
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
 }
 
 .jump-to-post-modal {
diff --git a/app/assets/stylesheets/common/base/not-found.scss b/app/assets/stylesheets/common/base/not-found.scss
index da46e2151f..798249480c 100644
--- a/app/assets/stylesheets/common/base/not-found.scss
+++ b/app/assets/stylesheets/common/base/not-found.scss
@@ -4,7 +4,7 @@
   margin: 0 0 40px 0;
 
   h1.title {
-    font-size: $font-up-5;
+    font-size: var(--font-up-5);
     line-height: $line-height-medium;
   }
 
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index a15badbef9..9e88aad716 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -19,7 +19,7 @@ a.loading-onebox {
 
   margin-top: 15px;
   padding: 12px;
-  font-size: $font-0;
+  font-size: var(--font-0);
   > .source {
     margin-bottom: 12px;
     margin-right: 10px;
@@ -34,7 +34,7 @@ a.loading-onebox {
         padding-right: 10px;
       }
       position: absolute;
-      font-size: $font-0;
+      font-size: var(--font-0);
       img.favicon {
         margin-right: 3px;
       }
@@ -96,7 +96,7 @@ aside.onebox {
   border: 5px solid var(--primary-low);
   margin: 1em 0;
   padding: 1em;
-  font-size: $font-0;
+  font-size: var(--font-0);
   background: var(--secondary);
 
   header {
@@ -129,7 +129,7 @@ aside.onebox {
 
     h3,
     h4 {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       margin: 0 0 10px 0;
     }
 
@@ -371,7 +371,7 @@ pre.onebox code ol.lines li:before {
   color: #afafaf;
   text-align: right;
   padding-right: 5px;
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   line-height: $line-height-large;
   content: counter(li-counter);
   counter-increment: li-counter;
@@ -453,7 +453,7 @@ pre.onebox code {
   }
 
   .branches {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     code {
       word-break: break-all;
     }
@@ -577,7 +577,7 @@ pre.onebox code {
 
 .onebox-body .build_status {
   padding: 2px;
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
 }
 
 .onebox-body .status_tag.open {
@@ -674,7 +674,7 @@ aside.onebox.twitterstatus .onebox-body {
   .outer-box {
     position: absolute;
     z-index: z("base");
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     color: #fff;
     background-color: rgba(0, 0, 0, 0.6);
     @include ellipsis;
@@ -689,7 +689,7 @@ aside.onebox.twitterstatus .onebox-body {
 
       .album-title {
         width: 100%;
-        font-size: $font-up-1;
+        font-size: var(--font-up-1);
         line-height: $line-height-large;
         color: #ccc;
         text-decoration: none;
diff --git a/app/assets/stylesheets/common/base/redirection.scss b/app/assets/stylesheets/common/base/redirection.scss
index bf7536243d..ffb57505df 100644
--- a/app/assets/stylesheets/common/base/redirection.scss
+++ b/app/assets/stylesheets/common/base/redirection.scss
@@ -1,6 +1,6 @@
 .redirection-warning {
   margin: 0 auto;
   text-align: center;
-  font-size: $font-up-4;
+  font-size: var(--font-up-4);
   line-height: $line-height-medium;
 }
diff --git a/app/assets/stylesheets/common/base/request_access.scss b/app/assets/stylesheets/common/base/request_access.scss
index 5bc4c21124..609e80eb36 100644
--- a/app/assets/stylesheets/common/base/request_access.scss
+++ b/app/assets/stylesheets/common/base/request_access.scss
@@ -4,10 +4,10 @@
   input[type="text"] {
     width: 320px;
     height: 30px;
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
   }
   input[type="submit"] {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
     padding: 10px;
   }
 }
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index d0b67ca985..4edae726dc 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -213,7 +213,7 @@
   border-top: 1px solid var(--primary-low);
 
   .topic-statuses {
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
   }
 
   .reviewable-meta-data {
@@ -221,7 +221,7 @@
     display: flex;
     width: 100%;
     margin-bottom: 0.5em;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     align-items: baseline;
     .reviewable-type {
       margin-right: 0.25em;
@@ -237,7 +237,7 @@
       }
     }
     .score {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
     }
   }
 
@@ -304,7 +304,7 @@
   }
 
   .d-icon {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     color: var(--primary-medium);
   }
 
@@ -375,7 +375,7 @@
 .reviewable-item {
   .show-raw-email {
     color: var(--primary-medium);
-    font-size: $font-down-2;
+    font-size: var(--font-down-2);
   }
   .post-title {
     background-color: yellow;
@@ -450,7 +450,7 @@
       font-weight: bold;
       color: var(--primary);
       display: block;
-      font-size: $font-up-2;
+      font-size: var(--font-up-2);
       margin-right: 0.75em;
     }
   }
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 933ecfb5a6..2beab9abce 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -308,13 +308,13 @@
     font-weight: normal;
 
     .discourse-tag.simple {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       margin-right: 0.25em;
     }
   }
 
   .blurb {
-    font-size: $font-0;
+    font-size: var(--font-0);
     line-height: $line-height-large;
     color: var(--primary-medium);
     .date {
@@ -332,7 +332,7 @@
     margin-top: 0.25em;
     .d-icon {
       color: var(--love);
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
     }
   }
 
@@ -341,7 +341,7 @@
   }
   .search-link {
     .topic-title {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       line-height: $line-height-medium;
       color: var(--primary);
     }
@@ -358,7 +358,7 @@
   }
 
   .discourse-tag.simple {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     margin-right: 0.25em;
   }
 }
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index d7fa954bf5..35e70f3562 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -21,11 +21,11 @@
   vertical-align: middle;
 
   .discourse-tag {
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
 
   .tag-count {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     vertical-align: middle;
     line-height: $line-height-small;
   }
@@ -47,7 +47,7 @@
 }
 
 .discourse-tag-count {
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   color: var(--primary-medium);
 }
 
@@ -72,7 +72,7 @@
   }
 
   &.large {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
   }
 
   &.box {
@@ -122,7 +122,7 @@
 
 .d-header .topic-header-extra {
   .discourse-tags {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
   .discourse-tags + .topic-featured-link {
     margin-left: 8px;
@@ -144,14 +144,14 @@
 .topic-list-item {
   .discourse-tags {
     font-weight: normal;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
 }
 
 .mobile-view .topic-list-item .discourse-tags {
   display: inline-flex;
   flex-wrap: wrap;
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   margin-top: 0;
   .discourse-tag {
     margin-right: 0.2em;
@@ -169,7 +169,7 @@ header .discourse-tag {
 .list-tags {
   display: inline-block;
   margin-right: 3px;
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
 }
 
 .tag-chooser {
@@ -372,7 +372,7 @@ section.tag-info {
     }
     .edit-tag {
       color: var(--primary-high);
-      font-size: $font-down-2;
+      font-size: var(--font-down-2);
       margin-left: 0.5em;
     }
   }
diff --git a/app/assets/stylesheets/common/base/tooltip.scss b/app/assets/stylesheets/common/base/tooltip.scss
index d378903a4c..af5a4dc4e8 100644
--- a/app/assets/stylesheets/common/base/tooltip.scss
+++ b/app/assets/stylesheets/common/base/tooltip.scss
@@ -10,7 +10,7 @@ $discourse-tooltip-border: var(--primary-medium);
   margin-top: 25px;
   overflow-wrap: break-word;
   display: none;
-  font-size: $font-0;
+  font-size: var(--font-0);
   font-weight: 500;
 
   &.retina {
@@ -52,7 +52,7 @@ $discourse-tooltip-border: var(--primary-medium);
   .tooltip-content {
     padding: 1em;
     max-width: 250px;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     color: var(--primary);
     box-shadow: shadow("dropdown");
     line-height: 1.4em;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 6ccb5eae0a..f400a14846 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -56,7 +56,7 @@ $quote-share-maxwidth: 150px;
   }
 
   span {
-    font-size: $font-0;
+    font-size: var(--font-0);
     margin-right: 8px;
     display: inline-block;
     @include ellipsis;
@@ -66,7 +66,7 @@ $quote-share-maxwidth: 150px;
     }
   }
   .fa {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     color: var(--primary-med-or-secondary-med);
   }
   .svg-icon-title {
@@ -676,7 +676,7 @@ aside.quote {
       padding: 3px 5px;
       text-align: center;
       font-weight: normal;
-      font-size: $font-down-2;
+      font-size: var(--font-down-2);
       line-height: $line-height-small;
     }
   }
@@ -700,19 +700,19 @@ aside.quote {
     color: var(--primary);
     line-height: $line-height-large;
     font-weight: normal;
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
 
   h4 {
     margin: 1px 0 2px 0;
     color: var(--primary-med-or-secondary-med);
     font-weight: normal;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     line-height: $line-height-small;
   }
 
   span.domain {
-    font-size: $font-down-2;
+    font-size: var(--font-down-2);
     color: var(--primary-med-or-secondary-med);
   }
 
@@ -863,7 +863,7 @@ aside.quote {
     right: -4px;
   }
   .fa {
-    font-size: $font-up-4;
+    font-size: var(--font-up-4);
   }
 }
 .topic-map .poster .avatar-flair {
@@ -882,7 +882,7 @@ aside.quote {
     right: 0;
   }
   .d-icon {
-    font-size: $font-down-2;
+    font-size: var(--font-down-2);
   }
 }
 
@@ -936,7 +936,7 @@ aside.quote {
   &.whisper,
   &.post-locked {
     .d-icon {
-      font-size: $font-0;
+      font-size: var(--font-0);
     }
   }
 
@@ -1028,9 +1028,9 @@ pre {
     @include unselectable;
     top: 0;
     min-height: 0;
-    font-size: $font-down-2;
+    font-size: var(--font-down-2);
     min-height: 0;
-    font-size: $font-down-2;
+    font-size: var(--font-down-2);
     opacity: 0.7;
 
     &.action-complete {
@@ -1055,7 +1055,7 @@ kbd {
   box-sizing: border-box;
   color: var(--primary);
   display: inline-flex;
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   justify-content: center;
   line-height: $line-height-large;
   margin: 0 0.15em;
@@ -1086,7 +1086,7 @@ blockquote > *:last-child {
   cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
 }
 
 .who-liked,
@@ -1149,7 +1149,7 @@ blockquote > *:last-child {
     padding: 1em 0;
     text-transform: uppercase;
     font-weight: bold;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     color: var(--primary-medium);
     min-width: 0; // Allows flex container to shrink
 
@@ -1165,7 +1165,7 @@ blockquote > *:last-child {
       flex: 1 1 100%;
       text-transform: none;
       font-weight: normal;
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       order: 12;
       word-break: break-word;
       min-width: 0; // Allows content like oneboxes to shrink
@@ -1216,7 +1216,7 @@ blockquote > *:last-child {
       .topic-post-visited-message {
         background-color: var(--secondary);
         color: var(--danger-medium);
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
         padding: 0 8px;
       }
     }
@@ -1291,7 +1291,7 @@ a.mention-group {
     > .d-icon {
       color: var(--primary-med-or-secondary-med);
       margin-right: 6px;
-      font-size: $font-0;
+      font-size: var(--font-0);
       line-height: $line-height-large;
     }
 
@@ -1306,7 +1306,7 @@ a.mention-group {
     > span.help {
       display: inline-block;
       color: var(--primary-med-or-secondary-med);
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       font-style: italic;
       line-height: $line-height-large;
       margin-bottom: 1px;
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index aaf7470e09..e85e2c78e6 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -195,7 +195,7 @@ $topic-progress-height: 42px;
   }
   h4 {
     display: inline;
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
     line-height: $line-height-small;
   }
   .d-icon {
@@ -222,7 +222,7 @@ $topic-progress-height: 42px;
     padding: 0;
   }
   span .d-icon {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
   .topic-timer-heading,
   .slow-mode-heading {
@@ -238,7 +238,7 @@ $topic-progress-height: 42px;
     align-self: flex-start;
   }
   button {
-    font-size: $font-down-2;
+    font-size: var(--font-down-2);
     background: transparent;
   }
 }
@@ -431,7 +431,7 @@ a.badge-category {
         flex: 0 0 auto;
       }
       .d-icon {
-        font-size: $font-down-2;
+        font-size: var(--font-down-2);
         margin: 0 0.5em 0 0;
       }
     }
@@ -487,7 +487,7 @@ a.topic-featured-link {
 
   .is-public {
     padding: 0.25em 0.5em;
-    font-size: $font-down-2;
+    font-size: var(--font-down-2);
     background: var(--tertiary);
     color: var(--secondary);
     border-radius: 3px;
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 69ed47021b..bfa87f6e6d 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -70,7 +70,7 @@
 
 .show-badge .badge-user-info {
   .earned {
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
     margin-bottom: 1em;
   }
 }
@@ -81,7 +81,7 @@
   .load-more {
     padding-top: 30px;
     display: block;
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
   }
 }
 
@@ -96,11 +96,11 @@
   }
   .date {
     display: inline-block;
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
     margin-left: 10px;
   }
   .post-link {
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
     width: 500px;
     margin: 0;
     padding: 0;
@@ -137,7 +137,7 @@
     top: 5px;
     font-weight: bold;
     color: var(--primary-medium);
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
   }
 
   .favorite-btn {
@@ -195,9 +195,9 @@
 
       h3 {
         margin-bottom: 0.25em;
-        font-size: $font-up-1;
+        font-size: var(--font-up-1);
         @media screen and (min-width: 900px) {
-          font-size: $font-up-2;
+          font-size: var(--font-up-2);
         }
       }
     }
@@ -215,7 +215,7 @@
     .badge-contents {
       padding: 0 5%;
       h3 {
-        font-size: $font-up-3;
+        font-size: var(--font-up-3);
       }
     }
   }
@@ -259,7 +259,7 @@
   }
 
   .title {
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index e000a57ed2..63ffaf2288 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -149,7 +149,7 @@
       border-bottom: 1px solid var(--primary-low);
 
       h1 {
-        font-size: $font-up-5;
+        font-size: var(--font-up-5);
         font-weight: normal;
         .d-icon {
           font-size: 0.8em;
@@ -240,11 +240,11 @@
           }
 
           h1 {
-            font-size: $font-up-3;
+            font-size: var(--font-up-3);
           }
 
           h2 {
-            font-size: $font-up-1;
+            font-size: var(--font-up-1);
           }
           h3,
           h3.location-and-website {
@@ -258,7 +258,7 @@
           bottom: 8px;
           right: 2px;
           .d-icon {
-            font-size: $font-0;
+            font-size: var(--font-0);
           }
         }
       }
@@ -325,7 +325,7 @@
         color: var(--primary-medium);
         margin-top: 5px;
         margin-bottom: 10px;
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
       }
     }
   }
@@ -465,7 +465,7 @@
 
   .value {
     font-weight: bold;
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
   }
 
   .label {
@@ -506,7 +506,7 @@
 
 .links-section {
   .domain {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     color: var(--primary-medium);
   }
 }
@@ -571,7 +571,7 @@
   .instructions {
     color: var(--primary-medium);
     margin-bottom: 10px;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     line-height: $line-height-large;
 
     a[href] {
@@ -670,7 +670,7 @@
     font-weight: bold;
   }
   .save-theme-alert {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
 
   .control-subgroup {
@@ -758,7 +758,7 @@
     color: var(--primary-medium);
     margin-top: 5px;
     margin-bottom: 10px;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
   .second-factor-item {
     margin-top: 0.75em;
@@ -808,7 +808,7 @@
     }
 
     .invite-extra {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       margin: 0.25em 0;
 
       a {
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index 8e3df6a8b1..21c6678ce0 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -16,7 +16,7 @@
 // --------------------------------------------------
 
 .badge-wrapper {
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   white-space: nowrap;
   position: relative;
   display: inline-flex;
@@ -166,7 +166,7 @@
   padding: 0.21em 0.42em;
   min-width: 0.5em;
   color: var(--secondary);
-  font-size: $font-down-2;
+  font-size: var(--font-down-2);
   line-height: $line-height-small;
   text-align: center;
   background-color: var(--primary-low-mid-or-secondary-low);
@@ -216,7 +216,7 @@
 
 .badge-posts {
   font-weight: normal;
-  font-size: $font-0;
+  font-size: var(--font-0);
   line-height: $line-height-small;
   &[href] {
     color: var(--primary-med-or-secondary-med);
@@ -232,5 +232,5 @@
   color: var(--primary);
   background-color: var(--primary-low);
   border-color: var(--primary-low);
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
 }
diff --git a/app/assets/stylesheets/common/components/bookmark-list.scss b/app/assets/stylesheets/common/components/bookmark-list.scss
index 7af6eeb64f..e1d27b1e51 100644
--- a/app/assets/stylesheets/common/components/bookmark-list.scss
+++ b/app/assets/stylesheets/common/components/bookmark-list.scss
@@ -23,11 +23,11 @@ $mobile-breakpoint: 700px;
     }
   }
   .d-icon.bookmark-pinned {
-    font-size: $font-down-2;
+    font-size: var(--font-down-2);
     margin-right: 0.2em;
   }
   .bookmark-metadata {
-    font-size: $font-down-2;
+    font-size: var(--font-down-2);
     margin-bottom: 0.25em;
 
     &-item {
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 5246af6918..78653be5c5 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -83,12 +83,12 @@
   &.is-loading {
     &.btn-text {
       .d-button-label {
-        font-size: $font-down-2;
+        font-size: var(--font-down-2);
       }
 
       &.btn-small {
         .loading-icon {
-          font-size: $font-down-1;
+          font-size: var(--font-down-1);
           margin-right: 0.2em;
         }
       }
@@ -177,7 +177,7 @@
   }
   &:before {
     margin-right: 9px;
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
   .d-icon,
   &.btn:hover .d-icon {
diff --git a/app/assets/stylesheets/common/components/conditional-loading-section.scss b/app/assets/stylesheets/common/components/conditional-loading-section.scss
index fac4abe5d4..c5c1b4e8f0 100644
--- a/app/assets/stylesheets/common/components/conditional-loading-section.scss
+++ b/app/assets/stylesheets/common/components/conditional-loading-section.scss
@@ -9,7 +9,7 @@
     flex-direction: column;
 
     .title {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       font-weight: 700;
     }
   }
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index d808bab78d..c7208e7551 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -33,7 +33,7 @@
       border: none;
       padding: 6px 12px;
       color: var(--primary);
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       line-height: $line-height-small;
       box-sizing: border-box;
       min-height: 30px;
@@ -87,7 +87,7 @@
   a {
     margin: 0;
     padding: 0.75em;
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
     line-height: $line-height-small;
     cursor: pointer;
     color: var(--primary);
@@ -112,11 +112,11 @@
   }
 
   .count {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
 
   .glyph {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     width: 1.25em;
     text-align: center;
     margin-right: 0.25em;
diff --git a/app/assets/stylesheets/common/components/share-and-invite-modal.scss b/app/assets/stylesheets/common/components/share-and-invite-modal.scss
index cc374a6ab8..1ed7645fcf 100644
--- a/app/assets/stylesheets/common/components/share-and-invite-modal.scss
+++ b/app/assets/stylesheets/common/components/share-and-invite-modal.scss
@@ -18,13 +18,13 @@
     align-items: center;
 
     .title {
-      font-size: $font-0;
+      font-size: var(--font-0);
       font-weight: normal;
       margin-bottom: 8px;
 
       .post-date {
         color: var(--primary-medium);
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
       }
     }
   }
@@ -50,7 +50,7 @@
       flex-direction: row;
 
       .social-link {
-        font-size: $font-up-6;
+        font-size: var(--font-up-6);
         margin-right: 8px;
       }
     }
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index a209bc5596..3b80ad8685 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -179,7 +179,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
       }
     }
     .profile-hidden {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       margin-top: 0.5em;
     }
   }
diff --git a/app/assets/stylesheets/common/components/user-info.scss b/app/assets/stylesheets/common/components/user-info.scss
index bd7f95d423..3dd2200530 100644
--- a/app/assets/stylesheets/common/components/user-info.scss
+++ b/app/assets/stylesheets/common/components/user-info.scss
@@ -20,7 +20,7 @@
     width: 70%;
     padding-left: 5px;
     @media screen and (max-width: 600px) {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
     }
 
     .name-line {
diff --git a/app/assets/stylesheets/common/components/user-stream-item.scss b/app/assets/stylesheets/common/components/user-stream-item.scss
index c191834a30..95452a77d5 100644
--- a/app/assets/stylesheets/common/components/user-stream-item.scss
+++ b/app/assets/stylesheets/common/components/user-stream-item.scss
@@ -45,7 +45,7 @@
   .draft-type {
     line-height: var(--line-height-small);
     color: var(--primary-medium);
-    font-size: $font-down-2;
+    font-size: var(--font-down-2);
     padding-top: 5px;
   }
 
@@ -55,7 +55,7 @@
   }
 
   .delete-info .d-icon {
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
 
   .expand-item,
@@ -72,7 +72,7 @@
   }
 
   .name {
-    font-size: $font-0;
+    font-size: var(--font-0);
     max-width: 400px;
     @include ellipsis;
   }
@@ -103,13 +103,13 @@
     .fa,
     .icon {
       color: var(--primary-med-or-secondary-med);
-      font-size: $font-up-4;
+      font-size: var(--font-up-4);
     }
   }
 
   .excerpt {
     margin: 1em 0 0 0;
-    font-size: $font-0;
+    font-size: var(--font-0);
     word-wrap: break-word;
     color: var(--primary);
     &:empty {
diff --git a/app/assets/stylesheets/common/select-kit/category-chooser.scss b/app/assets/stylesheets/common/select-kit/category-chooser.scss
index b02aaa3404..a0def956f7 100644
--- a/app/assets/stylesheets/common/select-kit/category-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/category-chooser.scss
@@ -15,7 +15,7 @@
         }
 
         .topic-count {
-          font-size: $font-down-1;
+          font-size: var(--font-down-1);
           color: var(--primary-medium);
           white-space: nowrap;
           margin-left: 0.5em;
@@ -30,7 +30,7 @@
 
         .category-desc {
           flex: 1 1 auto;
-          font-size: $font-down-1;
+          font-size: var(--font-down-1);
           line-height: $line-height-large;
         }
       }
diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss
index 4cd7b872e5..b7cbcbe549 100644
--- a/app/assets/stylesheets/common/select-kit/category-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/category-drop.scss
@@ -4,7 +4,7 @@
       min-width: auto;
 
       .badge-wrapper {
-        font-size: $font-0;
+        font-size: var(--font-0);
         font-weight: normal;
         max-width: 260px;
 
@@ -60,7 +60,7 @@
           margin-left: 0.5em;
           font-weight: normal;
           color: var(--primary-medium);
-          font-size: $font-down-1;
+          font-size: var(--font-down-1);
         }
 
         .badge-wrapper {
diff --git a/app/assets/stylesheets/common/select-kit/category-selector.scss b/app/assets/stylesheets/common/select-kit/category-selector.scss
index 75269ade54..45835a558b 100644
--- a/app/assets/stylesheets/common/select-kit/category-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/category-selector.scss
@@ -18,7 +18,7 @@
       }
 
       .plus-subcategories {
-        font-size: $font-down-2;
+        font-size: var(--font-down-2);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index d8f7228221..a28ce84da6 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -29,7 +29,7 @@
           .d-icon {
             flex: 0 0 100%;
             overflow: hidden;
-            font-size: $font-up-2;
+            font-size: var(--font-up-2);
             margin-right: 0;
           }
         }
@@ -45,7 +45,7 @@
           .name {
             flex: 1 1 auto;
             font-weight: bold;
-            font-size: $font-0;
+            font-size: var(--font-0);
             color: var(--primary);
             padding: 0;
             @include ellipsis;
@@ -54,7 +54,7 @@
 
           .desc {
             flex: 1 1 auto;
-            font-size: $font-down-1;
+            font-size: var(--font-down-1);
             font-weight: normal;
             color: var(--primary-medium);
             white-space: normal;
diff --git a/app/assets/stylesheets/common/select-kit/email-group-user-chooser.scss b/app/assets/stylesheets/common/select-kit/email-group-user-chooser.scss
index 599f95ecf0..f965c82a50 100644
--- a/app/assets/stylesheets/common/select-kit/email-group-user-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/email-group-user-chooser.scss
@@ -10,7 +10,7 @@
     }
     .name {
       color: var(--primary-high);
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       margin-left: 0.5em;
       overflow: hidden;
       white-space: nowrap;
diff --git a/app/assets/stylesheets/common/select-kit/notifications-filter.scss b/app/assets/stylesheets/common/select-kit/notifications-filter.scss
index 9ff4450ade..5bc55c9396 100644
--- a/app/assets/stylesheets/common/select-kit/notifications-filter.scss
+++ b/app/assets/stylesheets/common/select-kit/notifications-filter.scss
@@ -30,7 +30,7 @@
         .d-icon {
           color: var(--primary-medium);
           margin: 0 0 0 0.25em;
-          font-size: $font-up-2;
+          font-size: var(--font-up-2);
         }
       }
     }
diff --git a/app/assets/stylesheets/common/select-kit/period-chooser.scss b/app/assets/stylesheets/common/select-kit/period-chooser.scss
index c8a8dbced9..b0294ed514 100644
--- a/app/assets/stylesheets/common/select-kit/period-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/period-chooser.scss
@@ -24,7 +24,7 @@
           }
 
           .top-date-string {
-            font-size: $font-down-1;
+            font-size: var(--font-down-1);
             color: var(--primary-med-or-secondary-high);
             font-weight: normal;
             text-transform: uppercase;
@@ -34,7 +34,7 @@
         .d-icon {
           color: var(--primary);
           opacity: 1;
-          font-size: $font-up-3;
+          font-size: var(--font-up-3);
         }
 
         &.is-focused,
@@ -49,7 +49,7 @@
       .period-chooser-row {
         font-weight: bold;
         padding: 5px;
-        font-size: $font-up-1;
+        font-size: var(--font-up-1);
         align-items: center;
         display: flex;
 
@@ -63,7 +63,7 @@
 
         .top-date-string {
           font-weight: normal;
-          font-size: $font-down-1;
+          font-size: var(--font-down-1);
           color: var(--primary-med-or-secondary-high);
           text-transform: uppercase;
           margin-left: 5px;
diff --git a/app/assets/stylesheets/common/select-kit/tag-drop.scss b/app/assets/stylesheets/common/select-kit/tag-drop.scss
index 09d456c59b..0dda52acb3 100644
--- a/app/assets/stylesheets/common/select-kit/tag-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/tag-drop.scss
@@ -16,7 +16,7 @@
         box-sizing: border-box;
         width: 100%;
         padding: 0.5em 1em;
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
         color: var(--primary-low-mid);
       }
     }
diff --git a/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
index dda8903999..21fd35e599 100644
--- a/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
+++ b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
@@ -21,7 +21,7 @@
 
         .texts .name,
         .icons .d-icon {
-          font-size: $font-0;
+          font-size: var(--font-0);
           font-weight: normal;
         }
 
diff --git a/app/assets/stylesheets/common/select-kit/user-row.scss b/app/assets/stylesheets/common/select-kit/user-row.scss
index f6d5d98d69..8a52afbcf2 100644
--- a/app/assets/stylesheets/common/select-kit/user-row.scss
+++ b/app/assets/stylesheets/common/select-kit/user-row.scss
@@ -12,7 +12,7 @@
 
     .name {
       color: var(--primary-high);
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       margin-left: 0.5em;
       overflow: hidden;
       white-space: nowrap;
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index 8328170997..38d35f9dd0 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -99,7 +99,7 @@
           margin-top: 0;
           display: block;
           line-height: $line-height-medium;
-          font-size: $font-up-2;
+          font-size: var(--font-up-2);
           @include line-clamp(4);
         }
         a {
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 28f4ebb1dd..2182780969 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -37,11 +37,11 @@
     text-align: right;
 
     .value {
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
       font-weight: bold;
     }
     .unit {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
     }
     .badge-notification {
       display: block;
@@ -77,7 +77,7 @@
     }
     a.last-posted-at,
     a.last-posted-at:visited {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       color: var(--primary-med-or-secondary-high);
     }
     .title {
@@ -102,11 +102,11 @@
       }
 
       h3 {
-        font-size: $font-up-2;
+        font-size: var(--font-up-2);
       }
 
       h4 {
-        font-size: $font-up-1;
+        font-size: var(--font-up-1);
       }
     }
 
@@ -141,7 +141,7 @@
 
   .discourse-tags {
     .discourse-tag {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
     }
   }
 
diff --git a/app/assets/stylesheets/desktop/components/user-card.scss b/app/assets/stylesheets/desktop/components/user-card.scss
index 5bdf16d42e..b298a5f8ca 100644
--- a/app/assets/stylesheets/desktop/components/user-card.scss
+++ b/app/assets/stylesheets/desktop/components/user-card.scss
@@ -24,14 +24,14 @@
   }
   h1 {
     .d-icon {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
     }
   }
   h2 {
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
   }
   h3 {
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 27a989a070..9c7e1da061 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -207,7 +207,7 @@
         align-items: center;
 
         .discourse-tags {
-          font-size: $font-down-1;
+          font-size: var(--font-down-1);
         }
       }
     }
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 40d0ead26f..0558259c36 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -56,7 +56,7 @@ input,
 button,
 select,
 textarea {
-  font-size: $font-0;
+  font-size: var(--font-0);
   font-weight: normal;
   line-height: $line-height-medium;
 }
@@ -65,7 +65,7 @@ select,
 textarea {
   display: inline-block;
   margin-bottom: 9px;
-  font-size: $font-0;
+  font-size: var(--font-0);
   line-height: $line-height-large;
   color: var(--primary);
 }
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index d69cb6cfd7..314bdb32bd 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -9,7 +9,7 @@
     height: 2.667em; // 40px with default 15px font size
   }
   #site-text-logo {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
   }
   .extra-info {
     &:not(.two-rows) {
@@ -34,7 +34,7 @@
   color: var(--secondary-medium);
   display: block;
   word-wrap: break-word;
-  font-size: $font-down-2;
+  font-size: var(--font-down-2);
   line-height: $line-height-large;
   .search-highlight {
     color: var(--primary-high-or-secondary-low);
diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss
index 9dc4ec3c84..58f4951441 100644
--- a/app/assets/stylesheets/desktop/history.scss
+++ b/app/assets/stylesheets/desktop/history.scss
@@ -46,7 +46,7 @@
   }
   .markdown {
     font-family: monospace;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
diff --git a/app/assets/stylesheets/desktop/latest-topic-list.scss b/app/assets/stylesheets/desktop/latest-topic-list.scss
index f6f125c438..03178789a3 100644
--- a/app/assets/stylesheets/desktop/latest-topic-list.scss
+++ b/app/assets/stylesheets/desktop/latest-topic-list.scss
@@ -13,7 +13,7 @@
   }
 
   .posts-map {
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
     font-weight: bold;
     color: var(--primary-medium);
   }
@@ -39,7 +39,7 @@
     @extend .topic-list-main-link;
     flex: 0 1 auto;
     max-width: 65%;
-    font-size: $font-0;
+    font-size: var(--font-0);
     .badge-wrapper {
       max-width: 100%;
       .badge-category-bg {
@@ -49,7 +49,7 @@
 
     .top-row {
       margin-bottom: 0.1em;
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
     }
   }
   .topic-stats {
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 1ee881f000..464e3ab676 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -141,7 +141,7 @@
     .login-welcome-header {
       .login-title {
         line-height: $line-height-small;
-        font-size: $font-up-6;
+        font-size: var(--font-up-6);
       }
       p.login-subheader {
         font-size: var(--font-up-1);
@@ -276,7 +276,7 @@
     padding: 3em 2em 1em;
 
     .login-title {
-      font-size: $font-up-6;
+      font-size: var(--font-up-6);
       line-height: $line-height-medium;
     }
     p.login-subheader {
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index d739b9878a..5c5a63753a 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -19,12 +19,12 @@
 
 .modal-header {
   h3 {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
   }
 }
 
 .close {
-  font-size: $font-up-3;
+  font-size: var(--font-up-3);
   text-decoration: none;
   &:visited {
     color: var(--primary-high);
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index e516d09ec0..3a9079534e 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -80,7 +80,7 @@
         cursor: default;
         color: var(--primary-med-or-secondary-med);
         line-height: $td-posters-more-lh;
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
       }
     }
   }
@@ -110,7 +110,7 @@
     width: auto;
     color: var(--primary-med-or-secondary-med);
     text-align: left;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     margin-top: 5px;
     .fa {
       margin-right: 2px;
@@ -238,7 +238,7 @@
   // slightly smaller font, tighten spacing on nav pills
   .nav-pills {
     > li > a {
-      font-size: $font-0;
+      font-size: var(--font-0);
       padding: 7px 10px;
     }
   }
@@ -251,7 +251,7 @@
     // smaller table cell spacing
     .topic-list-data {
       padding: 10px;
-      font-size: $font-0;
+      font-size: var(--font-0);
     }
   }
 }
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 6869ed0072..34aa6cf38e 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -228,7 +228,7 @@ pre.codeblock-buttons:hover {
   .topic-meta-data h5 {
     position: absolute;
     z-index: z("base");
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     a {
       font-weight: bold;
       color: var(--primary-low-mid-or-secondary-high);
@@ -269,7 +269,7 @@ pre.codeblock-buttons:hover {
     }
     .number,
     .d-icon {
-      font-size: $font-up-2;
+      font-size: var(--font-up-2);
       line-height: $line-height-medium;
     }
     button .d-icon,
@@ -307,7 +307,7 @@ pre.codeblock-buttons:hover {
       }
       .fa {
         margin: 0;
-        font-size: $font-up-2;
+        font-size: var(--font-up-2);
         line-height: 52px;
       }
     }
@@ -407,7 +407,7 @@ video {
 }
 
 .deleted-user-avatar {
-  font-size: $font-up-6;
+  font-size: var(--font-up-6);
 }
 
 .info-line {
@@ -563,14 +563,14 @@ blockquote {
     margin-top: 10px;
   }
   p {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     margin: 0 0 10px 0;
   }
   p.cancel {
     margin: 10px 0 0 0;
   }
   h3 {
-    font-size: $font-up-4;
+    font-size: var(--font-up-4);
     color: var(--primary);
     margin-bottom: 5px;
     .d-icon {
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 5e767a6233..71334e237e 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -24,7 +24,7 @@
     width: 500px;
   }
   h1 {
-    font-size: $font-up-4;
+    font-size: var(--font-up-4);
     line-height: $line-height-medium;
     overflow-wrap: break-word;
     width: 100%;
@@ -46,7 +46,7 @@
   width: 60%;
   margin-left: auto;
   margin-right: auto;
-  font-size: $font-up-4;
+  font-size: var(--font-up-4);
   text-align: center;
   line-height: $line-height-medium;
 
@@ -74,7 +74,7 @@
       display: block;
       margin-top: 2px;
       margin-bottom: 2px;
-      font-size: $font-up-2;
+      font-size: var(--font-up-2);
     }
   }
   .jump-form {
@@ -84,7 +84,7 @@
       height: 20px;
       text-align: center;
       margin-bottom: 0;
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
     }
     button.btn {
       float: right;
@@ -106,7 +106,7 @@
   bottom: 0;
   position: fixed;
   width: 100%;
-  font-size: $font-0;
+  font-size: var(--font-0);
   z-index: z("dropdown");
 }
 
diff --git a/app/assets/stylesheets/embed.scss b/app/assets/stylesheets/embed.scss
index 169856775d..6ccaf66fbc 100644
--- a/app/assets/stylesheets/embed.scss
+++ b/app/assets/stylesheets/embed.scss
@@ -43,7 +43,7 @@ article.post {
   .post-date {
     float: right;
     color: var(--primary-low-mid);
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     margin: 10px 4px 0 0;
   }
 
@@ -77,7 +77,7 @@ article.post {
 }
 
 .username {
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   margin: 0 0 10px 0;
 
   a {
@@ -103,7 +103,7 @@ img.emoji {
 }
 
 .in-reply-to {
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   text-align: center;
   margin: 10px 20px 6px 0;
   display: inline-block;
@@ -112,7 +112,7 @@ img.emoji {
 }
 
 .replies {
-  font-size: $font-0;
+  font-size: var(--font-0);
   color: var(--primary-medium);
 }
 
@@ -124,7 +124,7 @@ header.discourse {
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 8px;
-  font-size: $font-up-2;
+  font-size: var(--font-up-2);
   border-bottom: 3px solid var(--primary-low);
 
   display: flex;
@@ -134,7 +134,7 @@ header.discourse {
 
   h3 {
     margin: 0 auto 0 0;
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
 }
 
@@ -143,7 +143,7 @@ header.discourse {
 }
 
 footer {
-  font-size: $font-up-2;
+  font-size: var(--font-up-2);
   margin-top: 0.5em;
   .button {
     color: white;
diff --git a/app/assets/stylesheets/mobile/admin_report_table.scss b/app/assets/stylesheets/mobile/admin_report_table.scss
index d414b0a8a9..98880d04a1 100644
--- a/app/assets/stylesheets/mobile/admin_report_table.scss
+++ b/app/assets/stylesheets/mobile/admin_report_table.scss
@@ -1,6 +1,6 @@
 .admin-report-table {
   .table {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
 
   .table .admin-report-table-header {
diff --git a/app/assets/stylesheets/mobile/components/user-card.scss b/app/assets/stylesheets/mobile/components/user-card.scss
index ec6c8d05f6..dc4b715a95 100644
--- a/app/assets/stylesheets/mobile/components/user-card.scss
+++ b/app/assets/stylesheets/mobile/components/user-card.scss
@@ -37,16 +37,16 @@ $avatar_width: 120px;
     }
   }
   h1 {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
     .d-icon {
-      font-size: $font-down-2;
+      font-size: var(--font-down-2);
     }
   }
   h2 {
-    font-size: $font-0;
+    font-size: var(--font-0);
   }
   h3 {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
 }
 
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index ef83fdbb95..136eb8880a 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -202,9 +202,9 @@
 
     .selected-name {
       .name {
-        font-size: $font-down-1;
+        font-size: var(--font-down-1);
         .badge-wrapper {
-          font-size: $font-0;
+          font-size: var(--font-0);
         }
       }
     }
diff --git a/app/assets/stylesheets/mobile/dashboard.scss b/app/assets/stylesheets/mobile/dashboard.scss
index 8161e79ff2..1a0aaf3692 100644
--- a/app/assets/stylesheets/mobile/dashboard.scss
+++ b/app/assets/stylesheets/mobile/dashboard.scss
@@ -1,7 +1,7 @@
 .dashboard,
 .dashboard-next {
   .activity-metrics .counters-list {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
   .navigation a.navigation-link {
     padding: 0.5em;
diff --git a/app/assets/stylesheets/mobile/directory.scss b/app/assets/stylesheets/mobile/directory.scss
index 987580ccfc..8965198565 100644
--- a/app/assets/stylesheets/mobile/directory.scss
+++ b/app/assets/stylesheets/mobile/directory.scss
@@ -1,6 +1,6 @@
 .directory {
   .period-chooser .period-chooser-header h2.selected-name {
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
   }
 
   &.users-directory {
diff --git a/app/assets/stylesheets/mobile/edit-category.scss b/app/assets/stylesheets/mobile/edit-category.scss
index 07809a1ac6..58e9f1b140 100644
--- a/app/assets/stylesheets/mobile/edit-category.scss
+++ b/app/assets/stylesheets/mobile/edit-category.scss
@@ -31,7 +31,7 @@ div.edit-category {
     width: 100%;
     margin-bottom: 0;
     li {
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       border-bottom: none;
     }
     a.active::after {
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 09c79e57ca..032644dcf0 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -26,7 +26,7 @@
     max-width: 100%;
   }
   #site-text-logo {
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
   }
   .extra-info-wrapper {
     .extra-info {
@@ -35,7 +35,7 @@
         min-height: 2.25em;
       }
       .header-title {
-        font-size: $font-0;
+        font-size: var(--font-0);
         // the margin-bottom here is fragile, changing it can cause tag alignment issues
         margin: 0 0 0.35em 0;
         .archetype-private_message & {
diff --git a/app/assets/stylesheets/mobile/login.scss b/app/assets/stylesheets/mobile/login.scss
index 24f701cf32..eccfa2c562 100644
--- a/app/assets/stylesheets/mobile/login.scss
+++ b/app/assets/stylesheets/mobile/login.scss
@@ -129,7 +129,7 @@
   .modal-footer {
     box-sizing: border-box;
     margin: 0 auto;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     padding: 1.25em;
   }
 
@@ -266,6 +266,6 @@
     display: none;
   }
   h1.login-title {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
   }
 }
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index 9ee3e2dd06..fb69050d3d 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/app/assets/stylesheets/mobile/modal.scss
@@ -43,12 +43,12 @@
 .modal-header {
   padding: 10px;
   h3 {
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
   }
 }
 
 .close {
-  font-size: $font-up-4;
+  font-size: var(--font-up-4);
 }
 
 #choosing-topic {
diff --git a/app/assets/stylesheets/mobile/select-kit/category-drop.scss b/app/assets/stylesheets/mobile/select-kit/category-drop.scss
index 6697ca91e7..ecbc186a09 100644
--- a/app/assets/stylesheets/mobile/select-kit/category-drop.scss
+++ b/app/assets/stylesheets/mobile/select-kit/category-drop.scss
@@ -2,10 +2,10 @@
   &.combo-box {
     &.category-drop {
       .category-drop-header {
-        font-size: $font-0;
+        font-size: var(--font-0);
 
         .d-icon {
-          font-size: $font-0;
+          font-size: var(--font-0);
         }
       }
 
diff --git a/app/assets/stylesheets/mobile/select-kit/tag-drop.scss b/app/assets/stylesheets/mobile/select-kit/tag-drop.scss
index 9f2dfbd55f..36c23e8537 100644
--- a/app/assets/stylesheets/mobile/select-kit/tag-drop.scss
+++ b/app/assets/stylesheets/mobile/select-kit/tag-drop.scss
@@ -2,10 +2,10 @@
   &.combo-box {
     &.tag-drop {
       .tag-drop-header {
-        font-size: $font-0;
+        font-size: var(--font-0);
 
         .d-icon {
-          font-size: $font-0;
+          font-size: var(--font-0);
         }
       }
 
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 4d35394686..05e60c1839 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -48,7 +48,7 @@
     }
     > li {
       margin-right: 0;
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       border: 1px solid var(--primary-medium);
     }
     > li > a {
@@ -139,7 +139,7 @@
     position: relative;
     display: inline-block;
     top: -1px;
-    font-size: $font-0;
+    font-size: var(--font-0);
     line-height: $line-height-small;
     padding: 0.15em 0.4em 0.2em 0.4em;
     .d-icon {
@@ -303,11 +303,11 @@ tr.category-topic-link {
   }
 
   h3 {
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
   }
 
   h4 {
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
   }
 
   .category-name {
@@ -321,7 +321,7 @@ tr.category-topic-link {
   }
 
   .category-topic-link .main-link .age {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
   }
 
   .category-description td {
@@ -359,7 +359,7 @@ tr.category-topic-link {
       float: left;
       margin: 3px 1em 0 0;
       font-weight: normal;
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       .value {
         font-weight: bold;
       }
@@ -409,7 +409,7 @@ tr.category-topic-link {
 
 .category-heading {
   p {
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
     margin-bottom: 0.75em;
   }
 }
@@ -438,7 +438,7 @@ td .main-link {
 }
 .topic-list {
   .num.posts-map {
-    font-size: $font-up-2;
+    font-size: var(--font-up-2);
     padding: 0;
     button {
       padding: 0;
@@ -466,7 +466,7 @@ td .main-link {
 
 .category-list .category.muted a.category-title-link {
   color: var(--primary-medium);
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
 }
 
 .muted-categories-link {
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index ffa4a91436..d45d61d566 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -159,7 +159,7 @@ a.reply-to-tab {
     .number,
     .d-icon {
       color: var(--primary-high-or-secondary-low);
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
     }
     .avatar + a {
       float: left;
@@ -189,7 +189,7 @@ a.reply-to-tab {
       border-left: 1px solid var(--primary-low);
       .fa {
         margin: 0;
-        font-size: $font-up-2;
+        font-size: var(--font-up-2);
         line-height: 52px;
       }
     }
@@ -255,7 +255,7 @@ a.reply-to-tab {
   }
   a.badge-category,
   a.badge-category-parent {
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     vertical-align: top;
   }
 }
@@ -305,7 +305,7 @@ button.select-post {
 }
 
 .deleted-user-avatar {
-  font-size: $font-up-5;
+  font-size: var(--font-up-5);
 }
 
 span.btn-text {
@@ -344,7 +344,7 @@ span.highlighted {
 
 .topic-meta-data {
   margin-left: 50px;
-  font-size: $font-down-1;
+  font-size: var(--font-down-1);
   .names {
     line-height: $line-height-medium;
     display: flex;
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 10527054bd..d4357d0a08 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -14,7 +14,7 @@
 
 #topic-title {
   h1 {
-    font-size: $font-up-3;
+    font-size: var(--font-up-3);
     line-height: $line-height-medium;
     a {
       color: var(--primary);
@@ -47,7 +47,7 @@
       display: block;
       margin-top: 2px;
       margin-bottom: 2px;
-      font-size: $font-up-2;
+      font-size: var(--font-up-2);
     }
   }
   .jump-form {
@@ -56,7 +56,7 @@
       width: 45px;
       height: 20px;
       text-align: center;
-      font-size: $font-up-1;
+      font-size: var(--font-up-1);
     }
     button.btn {
       float: right !important;
@@ -77,7 +77,7 @@
   width: 90%;
   margin-left: auto;
   margin-right: auto;
-  font-size: $font-up-4;
+  font-size: var(--font-up-4);
   line-height: $line-height-medium;
 
   .topic-retry {
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index d8fb951f9c..54a67f3f46 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -128,14 +128,14 @@
 
       .featured-topic {
         text-align: center;
-        font-size: $font-0;
+        font-size: var(--font-0);
       }
 
       .location-and-website {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
-        font-size: $font-0;
+        font-size: var(--font-0);
         .d-icon {
           width: 0.8em;
           height: 0.8em;
@@ -391,7 +391,7 @@
     .label {
       display: block;
       color: var(--primary-medium);
-      font-size: $font-down-1;
+      font-size: var(--font-down-1);
       margin: 0.5em 0 0.15em 0;
     }
 
diff --git a/app/assets/stylesheets/publish_mobile.scss b/app/assets/stylesheets/publish_mobile.scss
index 663ab399e3..cdd7d9259c 100644
--- a/app/assets/stylesheets/publish_mobile.scss
+++ b/app/assets/stylesheets/publish_mobile.scss
@@ -5,7 +5,7 @@
     width: auto;
 
     .published-page-title {
-      font-size: $font-up-3;
+      font-size: var(--font-up-3);
       width: 100%;
       overflow: hidden;
       white-space: nowrap;
diff --git a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
index 0e67e9f39f..5f71f1dea5 100644
--- a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
+++ b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
@@ -89,7 +89,7 @@
 
   .tip {
     display: block;
-    font-size: $font-down-1;
+    font-size: var(--font-down-1);
     margin: -0.5em 0 0.5em;
   }
 
diff --git a/plugins/poll/assets/stylesheets/common/poll.scss b/plugins/poll/assets/stylesheets/common/poll.scss
index ffb4a04100..82cd605228 100644
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/plugins/poll/assets/stylesheets/common/poll.scss
@@ -13,7 +13,7 @@ div.poll {
 
   li {
     cursor: pointer;
-    font-size: $font-up-1;
+    font-size: var(--font-up-1);
   }
 
   li[data-poll-option-id] {
@@ -39,7 +39,7 @@ div.poll {
     padding: 1em 0;
 
     .info-label {
-      font-size: $font-up-4;
+      font-size: var(--font-up-4);
       line-height: $line-height-medium;
     }
 
@@ -54,7 +54,7 @@ div.poll {
     padding: 0.5em 1em;
 
     .poll-results-number-rating {
-      font-size: $font-up-5;
+      font-size: var(--font-up-5);
     }
   }
 
diff --git a/plugins/poll/assets/stylesheets/mobile/poll.scss b/plugins/poll/assets/stylesheets/mobile/poll.scss
index 037dfb7584..55399b9845 100644
--- a/plugins/poll/assets/stylesheets/mobile/poll.scss
+++ b/plugins/poll/assets/stylesheets/mobile/poll.scss
@@ -18,7 +18,7 @@ div.poll {
       display: inline;
     }
     .info-number {
-      font-size: $font-up-6;
+      font-size: var(--font-up-6);
     }
     p {
       margin: 0;