diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 33db25dd7f2..52018ed8b4b 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -145,7 +145,7 @@ $mobile-breakpoint: 700px;
     tr {
       grid-template-columns: repeat(3, 1fr);
       display: grid;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
       padding: 8px 0;
       min-width: 0;
       td {
@@ -547,7 +547,7 @@ $mobile-breakpoint: 700px;
   }
   h1 {
     font-size: var(--font-up-3);
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
     color: var(--primary);
   }
   .controls {
@@ -708,7 +708,7 @@ section.details {
   clear: both;
   text-align: right;
   .btn {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
   }
   @media (max-width: $mobile-breakpoint) {
     .btn {
diff --git a/app/assets/stylesheets/common/admin/admin_intro.scss b/app/assets/stylesheets/common/admin/admin_intro.scss
index bdf3baa14d9..1ac8d0f724d 100644
--- a/app/assets/stylesheets/common/admin/admin_intro.scss
+++ b/app/assets/stylesheets/common/admin/admin_intro.scss
@@ -23,7 +23,7 @@
     width: 65%;
     h1 {
       display: inline-block;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
     }
   }
   .external-link {
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 871ff9c9b32..443de0bd4ee 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -502,7 +502,7 @@
     .ace_placeholder {
       font-family: inherit;
       font-size: var(--font-up-1);
-      color: $primary-high;
+      color: var(--primary-high);
     }
 
     .status-actions {
@@ -573,7 +573,7 @@
       margin: 0.15em 0 0;
       color: var(--primary-high);
       font-size: var(--font-down-1);
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
     }
 
     .invalid .hex input {
diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss
index e8773fa4fd1..fd8c9f56014 100644
--- a/app/assets/stylesheets/common/admin/dashboard.scss
+++ b/app/assets/stylesheets/common/admin/dashboard.scss
@@ -568,7 +568,7 @@
 
   .version-number {
     font-size: var(--font-up-2);
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
     box-sizing: border-box;
     font-weight: bold;
     margin-bottom: 2em;
diff --git a/app/assets/stylesheets/common/admin/settings.scss b/app/assets/stylesheets/common/admin/settings.scss
index 807a4758767..7e023b55b33 100644
--- a/app/assets/stylesheets/common/admin/settings.scss
+++ b/app/assets/stylesheets/common/admin/settings.scss
@@ -81,7 +81,7 @@
         padding: 3px 5px 3px 18px;
         margin: 3px 0 3px 5px;
         position: relative;
-        line-height: $line-height-small;
+        line-height: var(--line-height-small);
         cursor: default;
         border: 1px dashed var(--primary-low-mid);
         border-radius: 3px;
@@ -95,7 +95,7 @@
     .validation-error {
       padding-top: 3px;
       font-size: var(--font-down-1);
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
     }
     .validation-error {
       color: var(--danger);
diff --git a/app/assets/stylesheets/common/admin/users.scss b/app/assets/stylesheets/common/admin/users.scss
index 59410f59878..9dff0bd83b3 100644
--- a/app/assets/stylesheets/common/admin/users.scss
+++ b/app/assets/stylesheets/common/admin/users.scss
@@ -40,7 +40,7 @@
     margin-left: 12px;
     @media (max-width: $mobile-breakpoint) {
       margin-left: 0;
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
       margin-top: 5px;
     }
   }
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 584bc8f016c..06a0e78bdce 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -94,7 +94,7 @@
   max-width: 100%;
   p {
     margin-top: 0;
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
     font-size: var(--font-up-3);
   }
 }
@@ -215,7 +215,7 @@
   }
 
   .topic-list-data {
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
     text-align: left;
     vertical-align: middle;
   }
@@ -286,7 +286,7 @@
     margin-top: 0.33em;
     color: var(--primary-high);
     word-wrap: break-word;
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
     padding-right: 20px;
   }
 
@@ -424,5 +424,5 @@ div.education {
 .topic-post-badges {
   white-space: nowrap;
   align-self: center;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 }
diff --git a/app/assets/stylesheets/common/base/activation.scss b/app/assets/stylesheets/common/base/activation.scss
index 559fa2a09ff..6f28a622b84 100644
--- a/app/assets/stylesheets/common/base/activation.scss
+++ b/app/assets/stylesheets/common/base/activation.scss
@@ -11,7 +11,7 @@
   .account-created {
     .ac-message {
       font-size: var(--font-up-1);
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
     }
     .activation-controls {
       button {
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 75fd1d9b031..3c267fdf1a6 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -9,7 +9,7 @@
     max-width: 100%;
     @include ellipsis;
     vertical-align: text-top;
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
   }
   &.with-topics {
     .subcategories-with-subcategories {
@@ -163,7 +163,7 @@
     font-size: var(--font-up-2);
     margin-bottom: 0.5em;
     margin-top: 0.25em;
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
     text-align: center;
     color: var(--primary);
     overflow: hidden;
@@ -189,7 +189,7 @@
       }
       .category-text-title {
         order: 2;
-        line-height: $line-height-medium;
+        line-height: var(--line-height-medium);
         overflow: hidden;
         margin-bottom: 0.25em;
         word-wrap: break-word;
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 0bbc9cfbc48..ab8adc21af3 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -448,7 +448,7 @@ div.ac-wrap div.item a.remove,
 .remove-link {
   margin-left: 4px;
   font-size: var(--font-down-1);
-  line-height: $line-height-small;
+  line-height: var(--line-height-small);
   padding: 1px 3.5px;
   border-radius: 12px;
   box-sizing: border-box;
@@ -471,10 +471,10 @@ div.ac-wrap {
   div.item {
     float: left;
     padding: 4px 10px;
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
     span {
       display: inline-block;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
     }
   }
 
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index d6a87afbf3e..fe579fe9f0c 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -90,7 +90,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: $heading-font-family;
+  font-family: var(--heading-font-family);
   margin-top: 0;
   margin-bottom: 0.5rem;
 }
@@ -145,7 +145,7 @@ input {
     margin-top: 0.17em;
     margin-right: 0.43em;
     margin-left: 0.1em;
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
     cursor: pointer;
     flex-shrink: 0; // Adding for safety, Safari will shrink checkboxes
   }
@@ -534,7 +534,7 @@ table {
   right: 70px;
   top: 60px;
   width: 230px;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 
   .first-notification,
   .read-later {
@@ -655,11 +655,11 @@ table {
   }
 
   .control-label {
-    font-family: $heading-font-family;
+    font-family: var(--heading-font-family);
 
     font-weight: bold;
     font-size: var(--font-up-2);
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
   }
 
   .controls {
@@ -860,7 +860,7 @@ table {
 }
 
 .broken-theme-alert {
-  font-size: $base-font-size;
+  font-size: var(--base-font-size);
   font-weight: bold;
   padding: 5px 0;
   background: var(--danger);
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index 0c6c9ea4362..0fc72d0b996 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -86,7 +86,7 @@
           span {
             width: 100%;
             word-break: break-word;
-            line-height: $line-height-medium;
+            line-height: var(--line-height-medium);
           }
         }
       }
@@ -148,10 +148,10 @@
   }
   &.groups-notifications-form {
     .control-instructions {
-      color: $primary-medium;
+      color: var(--primary-medium);
       margin-bottom: 10px;
       font-size: var(--font-down-1);
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
     }
 
     .category-selector,
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 901e2f3d41a..c52ed610a10 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -181,7 +181,7 @@
   .d-icon {
     width: 100%;
     font-size: var(--font-up-4);
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
     display: inline-block;
     color: var(--header_primary-low-mid);
   }
@@ -250,7 +250,7 @@
   display: flex;
   align-items: center;
   height: 100%;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
   padding: 0 1.5em 0 0.5em;
   // we need to hide overflow in both to truncate the title in a flexbox
   overflow: hidden;
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 3ce8be55028..506897cd40d 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -325,7 +325,7 @@ body.invite-page {
       .instructions {
         margin-top: 0.15em;
         color: var(--primary-medium);
-        line-height: $line-height-medium;
+        line-height: var(--line-height-medium);
       }
     }
   }
@@ -402,7 +402,7 @@ body.invite-page {
       margin: 0;
       font-size: var(--font-down-1);
       font-weight: normal;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
     }
     .tip {
       font-size: var(--font-down-1);
diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index f6ec6bb212e..bd23ba1e899 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -261,7 +261,7 @@ button {
 .mfp-close {
   width: 44px;
   height: 44px;
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
   position: absolute;
   right: 0;
   top: 0;
@@ -307,7 +307,7 @@ button {
   right: 0;
   color: $controls-text-color;
   font-size: var(--font-down-1);
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 }
 
 // Navigation arrows
@@ -459,7 +459,7 @@ button {
       color: $caption-subtitle-color;
       display: block;
       font-size: var(--font-down-1);
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
     }
     figure {
       margin: 0;
@@ -475,7 +475,7 @@ button {
   }
   .mfp-title {
     text-align: left;
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
     color: $caption-title-color;
     word-wrap: break-word;
     padding-right: 36px; // leave some space for counter at right side
@@ -561,7 +561,7 @@ button {
           right: 0;
           width: 35px;
           height: 35px;
-          line-height: $line-height-large;
+          line-height: var(--line-height-large);
           background: rgba(0, 0, 0, 0.6);
           position: fixed;
           text-align: center;
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 7cfc0310abd..201614eb630 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -223,7 +223,7 @@
       }
 
       justify-content: unset;
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
       width: 100%;
 
       .d-icon {
@@ -325,7 +325,7 @@
       display: inline;
       padding: 0;
       font-size: var(--font-down-1);
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
     }
     .badge-wrapper {
       &.bar,
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 337db4e99fb..c5249f07bc4 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -311,7 +311,7 @@
 .delete-user-modal {
   .modal-footer {
     .btn {
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
     }
   }
 }
@@ -452,7 +452,7 @@
   .flag-action-type-details {
     width: 100%;
     max-width: 500px;
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/not-found.scss b/app/assets/stylesheets/common/base/not-found.scss
index 798249480c9..51b0e34d8fa 100644
--- a/app/assets/stylesheets/common/base/not-found.scss
+++ b/app/assets/stylesheets/common/base/not-found.scss
@@ -5,7 +5,7 @@
 
   h1.title {
     font-size: var(--font-up-5);
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
   }
 
   &-search {
diff --git a/app/assets/stylesheets/common/base/onebox.scss b/app/assets/stylesheets/common/base/onebox.scss
index 9e88aad716f..f01d46f2b05 100644
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@@ -372,14 +372,14 @@ pre.onebox code ol.lines li:before {
   text-align: right;
   padding-right: 5px;
   font-size: var(--font-down-1);
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
   content: counter(li-counter);
   counter-increment: li-counter;
 }
 
 pre.onebox code ol {
   margin-left: 0;
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
 }
 pre.onebox code {
   background-color: var(--primary-very-low);
@@ -647,7 +647,7 @@ aside.onebox.twitterstatus .onebox-body {
 
   .date {
     display: flex;
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
 
     .timestamp {
       color: var(--primary-medium);
@@ -690,7 +690,7 @@ aside.onebox.twitterstatus .onebox-body {
       .album-title {
         width: 100%;
         font-size: var(--font-up-1);
-        line-height: $line-height-large;
+        line-height: var(--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 ffb57505dfe..d1c2fc8ec92 100644
--- a/app/assets/stylesheets/common/base/redirection.scss
+++ b/app/assets/stylesheets/common/base/redirection.scss
@@ -2,5 +2,5 @@
   margin: 0 auto;
   text-align: center;
   font-size: var(--font-up-4);
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 }
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index 4edae726dc4..4df2d643954 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -309,7 +309,7 @@
   }
 
   .badge-notification {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
     vertical-align: text-top;
   }
 
diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss
index 0e83373c827..189cee2a63a 100644
--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/app/assets/stylesheets/common/base/search-menu.scss
@@ -1,7 +1,7 @@
 @mixin user-item-flex {
   display: flex;
   flex-direction: column;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
   color: var(--primary-high-or-secondary-low);
 }
 
@@ -82,7 +82,7 @@ $search-pad-horizontal: 0.5em;
     .search-result-topic {
       .first-line {
         display: block;
-        line-height: $line-height-medium;
+        line-height: var(--line-height-medium);
       }
 
       .second-line {
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 2beab9abce0..ac8b7a9688e 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -315,7 +315,7 @@
 
   .blurb {
     font-size: var(--font-0);
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
     color: var(--primary-medium);
     .date {
       color: var(--primary-high);
@@ -342,14 +342,14 @@
   .search-link {
     .topic-title {
       font-size: var(--font-up-1);
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
       color: var(--primary);
     }
     .topic-statuses {
       display: inline-block;
       flex-shrink: 0;
       font-size: 1.3em;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
       color: var(--primary-medium);
       span {
         line-height: 1;
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index 35e70f35627..eeb3cdd1a41 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -27,7 +27,7 @@
   .tag-count {
     font-size: var(--font-down-1);
     vertical-align: middle;
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
   }
 }
 
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index f400a14846e..a943ed9cc1b 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -84,7 +84,7 @@ $quote-share-maxwidth: 150px;
 .cooked,
 .d-editor-preview {
   word-wrap: break-word;
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
 
   > *:first-child {
     margin-top: 0;
@@ -97,7 +97,7 @@ $quote-share-maxwidth: 150px;
   h5,
   h6 {
     margin: 30px 0 10px;
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
     a.anchor {
       opacity: 0;
       transition: opacity 0.25s;
@@ -677,7 +677,7 @@ aside.quote {
       text-align: center;
       font-weight: normal;
       font-size: var(--font-down-2);
-      line-height: $line-height-small;
+      line-height: var(--line-height-small);
     }
   }
 
@@ -698,7 +698,7 @@ aside.quote {
   h3 {
     margin-bottom: 4px;
     color: var(--primary);
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
     font-weight: normal;
     font-size: var(--font-0);
   }
@@ -708,7 +708,7 @@ aside.quote {
     color: var(--primary-med-or-secondary-med);
     font-weight: normal;
     font-size: var(--font-down-1);
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
   }
 
   span.domain {
@@ -1057,7 +1057,7 @@ kbd {
   display: inline-flex;
   font-size: var(--font-down-1);
   justify-content: center;
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
   margin: 0 0.15em;
   min-width: 24px;
   padding: 0.15em 0.6em;
@@ -1184,7 +1184,7 @@ blockquote > *:last-child {
     > p {
       margin: 0;
       padding-right: 0.5em;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
       flex: 1 1;
     }
   }
@@ -1292,7 +1292,7 @@ a.mention-group {
       color: var(--primary-med-or-secondary-med);
       margin-right: 6px;
       font-size: var(--font-0);
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
     }
 
     > span.url {
@@ -1308,7 +1308,7 @@ a.mention-group {
       color: var(--primary-med-or-secondary-med);
       font-size: var(--font-down-1);
       font-style: italic;
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
       margin-bottom: 1px;
     }
 
@@ -1522,7 +1522,7 @@ a.mention-group {
 
       .text {
         margin-left: 0.5em;
-        line-height: $line-height-medium;
+        line-height: var(--line-height-medium);
       }
     }
   }
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index e85e2c78e67..99df950ce8b 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -196,7 +196,7 @@ $topic-progress-height: 42px;
   h4 {
     display: inline;
     font-size: var(--font-up-2);
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
   }
   .d-icon {
     position: absolute;
@@ -377,7 +377,7 @@ a.badge-category {
 .suggested-topics h3 .badge-wrapper.bullet span.badge-category {
   // Override vertical-align: text-top from `badges.css.scss`
   vertical-align: baseline;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 }
 
 .suggested-topics h3 .badge-wrapper.bullet,
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index bfa87f6e6d3..32886dc0ca2 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -3,7 +3,7 @@
   padding: 3px 8px;
   color: var(--primary);
   border: 1px solid var(--primary-low);
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
   display: inline-flex;
   align-items: center;
   background-color: var(--secondary);
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 63ffaf22880..dbfd8ece4d9 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -572,7 +572,7 @@
     color: var(--primary-medium);
     margin-bottom: 10px;
     font-size: var(--font-down-1);
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
 
     a[href] {
       color: var(--tertiary);
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index 21c6678ce0b..c7372164974 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -153,7 +153,7 @@
     a.badge-category {
       display: inline-block;
       padding: 6px 8px;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
     }
   }
 }
@@ -167,7 +167,7 @@
   min-width: 0.5em;
   color: var(--secondary);
   font-size: var(--font-down-2);
-  line-height: $line-height-small;
+  line-height: var(--line-height-small);
   text-align: center;
   background-color: var(--primary-low-mid-or-secondary-low);
   &[href] {
@@ -217,7 +217,7 @@
 .badge-posts {
   font-weight: normal;
   font-size: var(--font-0);
-  line-height: $line-height-small;
+  line-height: var(--line-height-small);
   &[href] {
     color: var(--primary-med-or-secondary-med);
   }
diff --git a/app/assets/stylesheets/common/components/bookmark-list.scss b/app/assets/stylesheets/common/components/bookmark-list.scss
index e1d27b1e51e..c64cdd47574 100644
--- a/app/assets/stylesheets/common/components/bookmark-list.scss
+++ b/app/assets/stylesheets/common/components/bookmark-list.scss
@@ -34,7 +34,7 @@ $mobile-breakpoint: 700px;
       display: inline-block;
       margin-right: 1em;
       margin-bottom: 0.25em;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
       span {
         word-break: break-word;
       }
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 78653be5c5c..3dfb2f2d7f2 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -260,7 +260,7 @@
 .btn-flat {
   background: transparent;
   border: 0;
-  line-height: $line-height-small;
+  line-height: var(--line-height-small);
   transition: color 0.25s, background 0.25s;
   .d-icon {
     color: var(--primary-low-mid);
diff --git a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
index dab4263d812..56925f449c9 100644
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
+++ b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
@@ -74,7 +74,7 @@
     }
 
     kbd {
-      font-family: $base-font-family;
+      font-family: var(--font-family);
       font-weight: bold;
     }
   }
diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index c7208e7551c..8318d105c43 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -34,7 +34,7 @@
       padding: 6px 12px;
       color: var(--primary);
       font-size: var(--font-up-1);
-      line-height: $line-height-small;
+      line-height: var(--line-height-small);
       box-sizing: border-box;
       min-height: 30px;
       display: flex;
@@ -88,7 +88,7 @@
     margin: 0;
     padding: 0.75em;
     font-size: var(--font-up-1);
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
     cursor: pointer;
     color: var(--primary);
     @include ellipsis;
@@ -120,6 +120,6 @@
     width: 1.25em;
     text-align: center;
     margin-right: 0.25em;
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
   }
 }
diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index 3b80ad86853..5a7815ee73a 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@@ -101,7 +101,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
     margin-bottom: 5px;
   }
   h1 {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
     .d-icon {
       color: var(--primary);
     }
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index ca066afc8be..f233601f800 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -4,27 +4,27 @@
 
 html {
   color: var(--primary);
-  font-family: $base-font-family;
-  font-size: $base-font-size;
-  line-height: $line-height-large;
+  font-family: var(--font-family);
+  font-size: var(--base-font-size);
+  line-height: var(--line-height-large);
   background-color: var(--secondary);
   overflow-y: scroll;
   direction: ltr;
 
   &.text-size-smallest {
-    font-size: $base-font-size-smallest;
+    font-size: var(--base-font-size-smallest);
   }
 
   &.text-size-smaller {
-    font-size: $base-font-size-smaller;
+    font-size: var(--base-font-size-smaller);
   }
 
   &.text-size-larger {
-    font-size: $base-font-size-larger;
+    font-size: var(--base-font-size-larger);
   }
 
   &.text-size-largest {
-    font-size: $base-font-size-largest;
+    font-size: var(--base-font-size-largest);
   }
 }
 
diff --git a/app/assets/stylesheets/common/select-kit/category-chooser.scss b/app/assets/stylesheets/common/select-kit/category-chooser.scss
index a0def956f76..8fe76f143d4 100644
--- a/app/assets/stylesheets/common/select-kit/category-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/category-chooser.scss
@@ -24,14 +24,14 @@
 
         .category-status {
           color: var(--primary);
-          line-height: $line-height-large;
+          line-height: var(--line-height-large);
           flex: 1 1 auto;
         }
 
         .category-desc {
           flex: 1 1 auto;
           font-size: var(--font-down-1);
-          line-height: $line-height-large;
+          line-height: var(--line-height-large);
         }
       }
     }
diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss
index 53b4a8ef651..b566b4b6124 100644
--- a/app/assets/stylesheets/common/select-kit/combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/combo-box.scss
@@ -44,7 +44,7 @@
         a {
           white-space: nowrap;
           color: var(--primary);
-          line-height: $line-height-medium;
+          line-height: var(--line-height-medium);
           font-weight: bold;
           display: block;
           padding: 0.75em;
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 a28ce84da6c..43d12e6f469 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -35,7 +35,7 @@
         }
 
         .texts {
-          line-height: $line-height-medium;
+          line-height: var(--line-height-medium);
           flex: 1 1 0%;
           align-items: flex-start;
           display: flex;
diff --git a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
index 1b1fa7082f7..489f6a75a09 100644
--- a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
@@ -5,7 +5,7 @@
 
       .future-date-input-selector-header {
         .btn-clear {
-          line-height: $line-height-large;
+          line-height: var(--line-height-large);
         }
       }
 
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 44d6d7a5028..ca5be8d47e0 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -158,7 +158,7 @@
       align-items: center;
       white-space: nowrap;
       overflow: hidden;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
 
       .d-icon {
         margin-left: 5px;
diff --git a/app/assets/stylesheets/common/topic-timeline.scss b/app/assets/stylesheets/common/topic-timeline.scss
index 38d35f9dd05..b2c510e1b4a 100644
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@@ -77,7 +77,7 @@
       }
       .post-excerpt {
         max-width: 650px;
-        line-height: $line-height-large;
+        line-height: var(--line-height-large);
         display: block;
         @include line-clamp(8);
         @media screen and (max-height: 425px) {
@@ -98,7 +98,7 @@
         h2 {
           margin-top: 0;
           display: block;
-          line-height: $line-height-medium;
+          line-height: var(--line-height-medium);
           font-size: var(--font-up-2);
           @include line-clamp(4);
         }
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 21827809699..90d95baac6a 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -95,7 +95,7 @@
       border-left: 6px solid;
       h3,
       h4 {
-        line-height: $line-height-medium;
+        line-height: var(--line-height-medium);
         a[href] {
           color: var(--primary);
         }
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 0558259c364..7984aca95fe 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -58,7 +58,7 @@ select,
 textarea {
   font-size: var(--font-0);
   font-weight: normal;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 }
 
 select,
@@ -66,7 +66,7 @@ textarea {
   display: inline-block;
   margin-bottom: 9px;
   font-size: var(--font-0);
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
   color: var(--primary);
 }
 
@@ -77,7 +77,7 @@ textarea {
 
 select,
 input[type="file"] {
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
 }
 
 select {
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index 314bdb32bd9..473f688ada2 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -35,7 +35,7 @@
   display: block;
   word-wrap: break-word;
   font-size: var(--font-down-2);
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
   .search-highlight {
     color: var(--primary-high-or-secondary-low);
   }
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index 464e3ab6764..a8238ac7ad0 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -140,7 +140,7 @@
     padding: 3em 3em 2.5em;
     .login-welcome-header {
       .login-title {
-        line-height: $line-height-small;
+        line-height: var(--line-height-small);
         font-size: var(--font-up-6);
       }
       p.login-subheader {
@@ -277,7 +277,7 @@
 
     .login-title {
       font-size: var(--font-up-6);
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
     }
     p.login-subheader {
       font-size: var(--font-up-1);
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index 3a9079534ee..efdea3f56b4 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -36,7 +36,7 @@
 
   button.bulk-select {
     padding: 0;
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
   }
 
   .topic-list-data.bulk-select {
@@ -118,7 +118,7 @@
     a {
       color: var(--primary-med-or-secondary-med);
       margin-right: 3px;
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
     }
   }
   .activity {
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 34aa6cf38ec..c3eaebca036 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -270,7 +270,7 @@ pre.codeblock-buttons:hover {
     .number,
     .d-icon {
       font-size: var(--font-up-2);
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
     }
     button .d-icon,
     button:hover .d-icon {
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 71334e237ef..270e3cf8211 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -25,7 +25,7 @@
   }
   h1 {
     font-size: var(--font-up-4);
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
     overflow-wrap: break-word;
     width: 100%;
     a {
@@ -48,7 +48,7 @@
   margin-right: auto;
   font-size: var(--font-up-4);
   text-align: center;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 
   .topic-retry {
     display: block;
diff --git a/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss b/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
index b81f960a46b..aae47b4cfd8 100644
--- a/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
+++ b/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
@@ -6,7 +6,7 @@
         border-bottom: 1px solid rgba(var(--primary-low-rgb), 0.5);
 
         .name {
-          line-height: $line-height-medium;
+          line-height: var(--line-height-medium);
         }
 
         &:last-child {
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 032644dcf03..2d8b256c23f 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@@ -72,7 +72,7 @@
 
 .d-header-icons {
   .d-icon {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
   }
   .active .icon {
     &:after {
diff --git a/app/assets/stylesheets/mobile/history.scss b/app/assets/stylesheets/mobile/history.scss
index d70090e3099..6890c832b83 100644
--- a/app/assets/stylesheets/mobile/history.scss
+++ b/app/assets/stylesheets/mobile/history.scss
@@ -12,7 +12,7 @@
     max-width: 90vw;
   }
   #revision-numbers {
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
   }
   img {
     max-width: 95%;
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 05e60c18396..bab5fe8150c 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -52,7 +52,7 @@
       border: 1px solid var(--primary-medium);
     }
     > li > a {
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
       display: flex;
       align-items: center;
       .d-icon {
@@ -118,7 +118,7 @@
   }
 
   .main-link {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
     position: relative;
     z-index: z("base") + 1; // Intentionally overlapping category to create bigger tap target
     font-size: var(--font-up-1);
@@ -140,7 +140,7 @@
     display: inline-block;
     top: -1px;
     font-size: var(--font-0);
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
     padding: 0.15em 0.4em 0.2em 0.4em;
     .d-icon {
       color: var(--secondary);
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index d45d61d5664..a1e0c6d0e14 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -134,7 +134,7 @@ a.reply-to-tab {
 .topic-map {
   margin: 10px 0;
   h4 {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
   }
   .user {
     float: left;
@@ -154,7 +154,7 @@ a.reply-to-tab {
       }
     }
     .number {
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
     }
     .number,
     .d-icon {
@@ -346,7 +346,7 @@ span.highlighted {
   margin-left: 50px;
   font-size: var(--font-down-1);
   .names {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
     display: flex;
     flex-wrap: wrap;
 
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index d4357d0a086..557c778bbc7 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -15,7 +15,7 @@
 #topic-title {
   h1 {
     font-size: var(--font-up-3);
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
     a {
       color: var(--primary);
       vertical-align: middle;
@@ -78,7 +78,7 @@
   margin-left: auto;
   margin-right: auto;
   font-size: var(--font-up-4);
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 
   .topic-retry {
     display: block;
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index 54a67f3f467..2665b2eac07 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -103,11 +103,11 @@
       margin-bottom: 12px;
 
       h1 {
-        line-height: $line-height-small;
+        line-height: var(--line-height-small);
       }
 
       h2 {
-        line-height: $line-height-medium;
+        line-height: var(--line-height-medium);
       }
 
       .user-profile-avatar {
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index 847d5c7979f..df870f38424 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -253,7 +253,7 @@ body.wizard {
   &__step-title {
     font-size: 2.75em;
     color: var(--primary);
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
     margin: 0 0 1.5em 0;
     @include breakpoint("medium") {
       font-size: var(--font-up-5);
diff --git a/plugins/poll/assets/stylesheets/common/poll.scss b/plugins/poll/assets/stylesheets/common/poll.scss
index 82cd605228a..c0db0f7a966 100644
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/plugins/poll/assets/stylesheets/common/poll.scss
@@ -40,7 +40,7 @@ div.poll {
 
     .info-label {
       font-size: var(--font-up-4);
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
     }
 
     .info-text {