diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index edc30423327..cff45af4d73 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -43,8 +43,8 @@ $timeline-image-border-radius: 8px;
     --transition-short: 0.1s;
     --transition-standard: 0.3s;
     --MessageTimestamp-width: $MessageTimestamp_width;
-    --buttons-dialog-gap-row: $spacing-8;
-    --buttons-dialog-gap-column: $spacing-8;
+    --buttons-dialog-gap-row: var(--spacing-8);
+    --buttons-dialog-gap-column: var(--spacing-8);
 }
 
 @media only percy {
@@ -509,7 +509,7 @@ legend {
 }
 
 .mx_Dialog_buttons {
-    margin-top: $spacing-20;
+    margin-top: var(--spacing-20);
     margin-inline-start: auto;
     text-align: right;
 
@@ -807,7 +807,7 @@ legend {
     font-weight: $font-semi-bold;
     white-space: nowrap;
     position: relative;
-    padding: 0 $spacing-12 0 $spacing-8;
+    padding: 0 var(--spacing-12) 0 var(--spacing-8);
 }
 
 @define-mixin ThreadSummaryIcon {
diff --git a/res/css/_spacing.pcss b/res/css/_spacing.pcss
index 63197f2321f..36644c7aedb 100644
--- a/res/css/_spacing.pcss
+++ b/res/css/_spacing.pcss
@@ -16,15 +16,17 @@ limitations under the License.
 
 /* 1rem :: 10px */
 
-$spacing-2: 2px;
-$spacing-4: 4px;
-$spacing-8: 8px;
-$spacing-12: 12px;
-$spacing-16: 16px;
-$spacing-20: 20px;
-$spacing-24: 24px;
-$spacing-28: 28px;
-$spacing-32: 32px;
-$spacing-40: 40px;
-$spacing-48: 48px;
-$spacing-64: 64px;
+:root {
+    --spacing-2: 2px;
+    --spacing-4: 4px;
+    --spacing-8: 8px;
+    --spacing-12: 12px;
+    --spacing-16: 16px;
+    --spacing-20: 20px;
+    --spacing-24: 24px;
+    --spacing-28: 28px;
+    --spacing-32: 32px;
+    --spacing-40: 40px;
+    --spacing-48: 48px;
+    --spacing-64: 64px;
+}
diff --git a/res/css/components/views/beacon/_BeaconListItem.pcss b/res/css/components/views/beacon/_BeaconListItem.pcss
index 19ac4148cca..26ff0d8b41e 100644
--- a/res/css/components/views/beacon/_BeaconListItem.pcss
+++ b/res/css/components/views/beacon/_BeaconListItem.pcss
@@ -19,7 +19,7 @@ limitations under the License.
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    padding: $spacing-12 0;
+    padding: var(--spacing-12) 0;
 
     border-bottom: 1px solid $system;
 
@@ -36,7 +36,7 @@ limitations under the License.
     flex: 0 0;
     box-sizing: border-box;
 
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
     border: 2px solid $location-live-color;
     border-radius: 50%;
 }
@@ -52,7 +52,7 @@ limitations under the License.
 .mx_BeaconListItem_status {
     /* override beacon status padding */
     padding: 0 !important;
-    margin-bottom: $spacing-8;
+    margin-bottom: var(--spacing-8);
 
     .mx_BeaconStatus_label {
         font-weight: $font-semi-bold;
diff --git a/res/css/components/views/beacon/_BeaconStatus.pcss b/res/css/components/views/beacon/_BeaconStatus.pcss
index 65e51a934ba..4a333d6da88 100644
--- a/res/css/components/views/beacon/_BeaconStatus.pcss
+++ b/res/css/components/views/beacon/_BeaconStatus.pcss
@@ -21,7 +21,7 @@ limitations under the License.
     justify-content: flex-start;
 
     box-sizing: border-box;
-    padding: $spacing-8;
+    padding: var(--spacing-8);
 
     color: var(--color);
     font-size: $font-12px;
@@ -42,7 +42,7 @@ limitations under the License.
     width: 32px;
 
     flex: 0 0 32px;
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
 }
 
 .mx_BeaconStatus_description {
@@ -51,7 +51,7 @@ limitations under the License.
     flex-direction: column;
     line-height: $font-14px;
 
-    padding-right: $spacing-8;
+    padding-right: var(--spacing-8);
 
     white-space: nowrap;
     overflow: hidden;
diff --git a/res/css/components/views/beacon/_BeaconStatusTooltip.pcss b/res/css/components/views/beacon/_BeaconStatusTooltip.pcss
index d6ed72e4552..ab77b1dddb5 100644
--- a/res/css/components/views/beacon/_BeaconStatusTooltip.pcss
+++ b/res/css/components/views/beacon/_BeaconStatusTooltip.pcss
@@ -20,7 +20,7 @@ limitations under the License.
     max-width: 150px;
     height: 38px;
     box-sizing: content-box;
-    padding-top: $spacing-8;
+    padding-top: var(--spacing-8);
 }
 
 .mx_BeaconStatusTooltip_inner {
diff --git a/res/css/components/views/beacon/_BeaconViewDialog.pcss b/res/css/components/views/beacon/_BeaconViewDialog.pcss
index da5fa1ef3b6..f86bb48828d 100644
--- a/res/css/components/views/beacon/_BeaconViewDialog.pcss
+++ b/res/css/components/views/beacon/_BeaconViewDialog.pcss
@@ -61,11 +61,11 @@ limitations under the License.
 
 .mx_BeaconViewDialog_mapFallbackMessage {
     color: $secondary-content;
-    margin-bottom: $spacing-16;
+    margin-bottom: var(--spacing-16);
 }
 
 .mx_BeaconViewDialog_viewListButton {
     position: absolute;
-    top: $spacing-24;
-    left: $spacing-24;
+    top: var(--spacing-24);
+    left: var(--spacing-24);
 }
diff --git a/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss b/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss
index 1ed370919e9..69d661fe0c1 100644
--- a/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss
+++ b/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_DialogOwnBeaconStatus {
     position: absolute;
-    bottom: $spacing-32;
+    bottom: var(--spacing-32);
     width: 300px;
     margin-left: -150px;
     left: 50%;
@@ -31,14 +31,14 @@ limitations under the License.
     border-radius: 8px;
     box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
 
-    padding: 0 $spacing-12;
+    padding: 0 var(--spacing-12);
 }
 
 .mx_DialogOwnBeaconStatus_avatarIcon {
     flex: 0 0;
     height: 32px;
     width: 32px;
-    margin: $spacing-8 0 $spacing-8 0;
+    margin: var(--spacing-8) 0 var(--spacing-8) 0;
 }
 
 .mx_DialogOwnBeaconStatus_avatar {
@@ -47,7 +47,7 @@ limitations under the License.
 
     border: 2px solid $location-live-color;
     border-radius: 50%;
-    margin: $spacing-8 0 $spacing-8 0;
+    margin: var(--spacing-8) 0 var(--spacing-8) 0;
 }
 
 .mx_DialogOwnBeaconStatus_status {
diff --git a/res/css/components/views/beacon/_DialogSidebar.pcss b/res/css/components/views/beacon/_DialogSidebar.pcss
index c33f74e0366..c00f6eac32c 100644
--- a/res/css/components/views/beacon/_DialogSidebar.pcss
+++ b/res/css/components/views/beacon/_DialogSidebar.pcss
@@ -25,7 +25,7 @@ limitations under the License.
     flex-direction: column;
 
     box-sizing: border-box;
-    padding: $spacing-16;
+    padding: var(--spacing-16);
 
     background-color: $background;
     box-shadow: 0px 4px 4px $menu-box-shadow-color;
@@ -36,7 +36,7 @@ limitations under the License.
         justify-content: space-between;
 
         flex: 0 0;
-        margin-bottom: $spacing-16;
+        margin-bottom: var(--spacing-16);
 
         color: $primary-content;
 
diff --git a/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss b/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
index aa89c801d61..489bbe62068 100644
--- a/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
+++ b/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
@@ -18,7 +18,7 @@ limitations under the License.
     width: 100%;
     box-sizing: border-box;
 
-    padding: $spacing-4;
+    padding: var(--spacing-4);
     text-align: center;
 
     background-color: $accent;
diff --git a/res/css/components/views/beacon/_OwnBeaconStatus.pcss b/res/css/components/views/beacon/_OwnBeaconStatus.pcss
index f007124216a..f4f4409dea1 100644
--- a/res/css/components/views/beacon/_OwnBeaconStatus.pcss
+++ b/res/css/components/views/beacon/_OwnBeaconStatus.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_OwnBeaconStatus_button {
-    margin-left: $spacing-8;
+    margin-left: var(--spacing-8);
 }
 
 .mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
diff --git a/res/css/components/views/beacon/_RoomLiveShareWarning.pcss b/res/css/components/views/beacon/_RoomLiveShareWarning.pcss
index f85cebe8bbe..e9129cc410e 100644
--- a/res/css/components/views/beacon/_RoomLiveShareWarning.pcss
+++ b/res/css/components/views/beacon/_RoomLiveShareWarning.pcss
@@ -22,7 +22,7 @@ limitations under the License.
     align-items: center;
 
     box-sizing: border-box;
-    padding: $spacing-12 $spacing-16;
+    padding: var(--spacing-12) var(--spacing-16);
 
     color: $primary-content;
     background-color: $system;
@@ -32,7 +32,7 @@ limitations under the License.
 .mx_RoomLiveShareWarning_icon {
     height: 32px;
     width: 32px;
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
 }
 
 .mx_RoomLiveShareWarning_label {
@@ -41,19 +41,19 @@ limitations under the License.
 }
 
 .mx_RoomLiveShareWarning_spinner {
-    margin-right: $spacing-16;
+    margin-right: var(--spacing-16);
 }
 
 .mx_RoomLiveShareWarning_closeButton {
     @mixin ButtonResetDefault;
-    margin-left: $spacing-16;
+    margin-left: var(--spacing-16);
 }
 
 .mx_RoomLiveShareWarning_stopButton {
-    margin-left: $spacing-16;
+    margin-left: var(--spacing-16);
 }
 
 .mx_RoomLiveShareWarning_closeButtonIcon {
     height: $font-18px;
-    padding: $spacing-4;
+    padding: var(--spacing-4);
 }
diff --git a/res/css/components/views/beacon/_ShareLatestLocation.pcss b/res/css/components/views/beacon/_ShareLatestLocation.pcss
index 4c84a72b77a..d2757580f11 100644
--- a/res/css/components/views/beacon/_ShareLatestLocation.pcss
+++ b/res/css/components/views/beacon/_ShareLatestLocation.pcss
@@ -25,7 +25,7 @@ limitations under the License.
     /* override copyable text style to make compact */
     .mx_CopyableText_copyButton {
         height: 13px;
-        margin-left: $spacing-8 !important;
+        margin-left: var(--spacing-8) !important;
         position: relative;
         top: -1px;
         width: 13px;
diff --git a/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss b/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
index 6f29b6e08fd..f0454c1aa16 100644
--- a/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
+++ b/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
@@ -22,6 +22,6 @@ limitations under the License.
 .mx_PollDetailHeader_icon {
     height: 15px;
     width: 15px;
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
     vertical-align: middle;
 }
diff --git a/res/css/components/views/dialogs/polls/_PollListItem.pcss b/res/css/components/views/dialogs/polls/_PollListItem.pcss
index d6036fa3787..2d189bee095 100644
--- a/res/css/components/views/dialogs/polls/_PollListItem.pcss
+++ b/res/css/components/views/dialogs/polls/_PollListItem.pcss
@@ -23,7 +23,7 @@ limitations under the License.
     display: grid;
     justify-content: left;
     align-items: center;
-    grid-gap: $spacing-8;
+    grid-gap: var(--spacing-8);
     grid-template-columns: auto auto auto;
     grid-template-rows: auto;
     cursor: pointer;
@@ -35,7 +35,7 @@ limitations under the License.
     height: 14px;
     width: 14px;
     color: $quaternary-content;
-    padding-left: $spacing-8;
+    padding-left: var(--spacing-8);
 }
 
 .mx_PollListItem_question {
diff --git a/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss b/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss
index 16ea5dcce07..bf11700b932 100644
--- a/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss
+++ b/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss
@@ -30,7 +30,7 @@ limitations under the License.
     display: grid;
     justify-content: left;
     align-items: center;
-    grid-gap: $spacing-8;
+    grid-gap: var(--spacing-8);
     grid-template-columns: min-content 1fr min-content;
     grid-template-rows: auto;
 }
@@ -39,7 +39,7 @@ limitations under the License.
     height: 14px;
     width: 14px;
     color: $quaternary-content;
-    padding-left: $spacing-8;
+    padding-left: var(--spacing-8);
 }
 
 .mx_PollListItemEnded_date {
@@ -55,11 +55,11 @@ limitations under the License.
 
 .mx_PollListItemEnded_answers {
     display: grid;
-    grid-gap: $spacing-8;
-    margin-top: $spacing-12;
+    grid-gap: var(--spacing-8);
+    margin-top: var(--spacing-12);
 }
 
 .mx_PollListItemEnded_voteCount {
     // 6px to match PollOption padding
-    margin: $spacing-8 0 0 6px;
+    margin: var(--spacing-8) 0 0 6px;
 }
diff --git a/res/css/components/views/elements/_FilterDropdown.pcss b/res/css/components/views/elements/_FilterDropdown.pcss
index 6a9fe3dc7c0..a51fc0e0352 100644
--- a/res/css/components/views/elements/_FilterDropdown.pcss
+++ b/res/css/components/views/elements/_FilterDropdown.pcss
@@ -16,11 +16,11 @@ limitations under the License.
 
 .mx_FilterDropdown {
     .mx_Dropdown_menu {
-        margin-top: $spacing-4;
+        margin-top: var(--spacing-4);
         left: unset;
-        right: -$spacing-12;
+        right: calc(-1 * var(--spacing-12));
         width: 232px;
-        padding: $spacing-12;
+        padding: var(--spacing-12);
 
         border: 1px solid $quinary-content;
         border-radius: 8px;
@@ -56,7 +56,7 @@ limitations under the License.
     position: relative;
     width: 100%;
     box-sizing: border-box;
-    padding: $spacing-8 0 $spacing-8 $spacing-20;
+    padding: var(--spacing-8) 0 var(--spacing-8) var(--spacing-20);
 
     font-size: $font-12px;
     line-height: $font-15px;
@@ -67,7 +67,7 @@ limitations under the License.
     height: 14px;
     width: 14px;
     position: absolute;
-    top: $spacing-8;
+    top: var(--spacing-8);
     left: 0;
 }
 
@@ -78,5 +78,5 @@ limitations under the License.
 
 .mx_FilterDropdown_optionDescription {
     color: $secondary-content;
-    margin-top: $spacing-4;
+    margin-top: var(--spacing-4);
 }
diff --git a/res/css/components/views/elements/_FilterTabGroup.pcss b/res/css/components/views/elements/_FilterTabGroup.pcss
index bbf1a279ad4..30a1cadf34b 100644
--- a/res/css/components/views/elements/_FilterTabGroup.pcss
+++ b/res/css/components/views/elements/_FilterTabGroup.pcss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_FilterTabGroup {
     color: $primary-content;
     label {
-        margin-right: $spacing-12;
+        margin-right: var(--spacing-12);
         cursor: pointer;
         span {
             display: inline-block;
diff --git a/res/css/components/views/elements/_LearnMore.pcss b/res/css/components/views/elements/_LearnMore.pcss
index 97f3b4c527d..b27695dde6e 100644
--- a/res/css/components/views/elements/_LearnMore.pcss
+++ b/res/css/components/views/elements/_LearnMore.pcss
@@ -15,5 +15,5 @@ limitations under the License.
 */
 
 .mx_LearnMore_button {
-    margin-left: $spacing-4;
+    margin-left: var(--spacing-4);
 }
diff --git a/res/css/components/views/location/_EnableLiveShare.pcss b/res/css/components/views/location/_EnableLiveShare.pcss
index 7c10cc1923f..899b7c6c7af 100644
--- a/res/css/components/views/location/_EnableLiveShare.pcss
+++ b/res/css/components/views/location/_EnableLiveShare.pcss
@@ -21,13 +21,13 @@ limitations under the License.
     justify-content: flex-end;
     align-items: center;
 
-    padding: $spacing-32 $spacing-16;
+    padding: var(--spacing-32) var(--spacing-16);
     text-align: center;
     box-sizing: border-box;
 }
 
 .mx_EnableLiveShare_heading {
-    padding-top: $spacing-24;
+    padding-top: var(--spacing-24);
 }
 
 .mx_EnableLiveShare_icon {
@@ -36,13 +36,13 @@ limitations under the License.
 }
 
 .mx_EnableLiveShare_description {
-    padding: 0 $spacing-24;
-    margin-bottom: $spacing-32;
+    padding: 0 var(--spacing-24);
+    margin-bottom: var(--spacing-32);
     line-height: $font-20px;
 }
 
 .mx_EnableLiveShare_button {
-    margin-top: $spacing-32;
+    margin-top: var(--spacing-32);
     height: 48px;
     width: 100%;
 }
diff --git a/res/css/components/views/location/_LiveDurationDropdown.pcss b/res/css/components/views/location/_LiveDurationDropdown.pcss
index 9b0e39a07c6..f93985965be 100644
--- a/res/css/components/views/location/_LiveDurationDropdown.pcss
+++ b/res/css/components/views/location/_LiveDurationDropdown.pcss
@@ -15,5 +15,5 @@ limitations under the License.
 */
 
 .mx_LiveDurationDropdown {
-    margin-bottom: $spacing-16;
+    margin-bottom: var(--spacing-16);
 }
diff --git a/res/css/components/views/location/_MapError.pcss b/res/css/components/views/location/_MapError.pcss
index 9437df8b847..add66a4aeb0 100644
--- a/res/css/components/views/location/_MapError.pcss
+++ b/res/css/components/views/location/_MapError.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_MapError {
-    padding: 100px $spacing-32 0;
+    padding: 100px var(--spacing-32) 0;
     text-align: center;
 
     --mx-map-error-icon-color: $secondary-content;
@@ -30,7 +30,7 @@ limitations under the License.
     justify-content: center;
     align-items: center;
 
-    padding: $spacing-24;
+    padding: var(--spacing-24);
     background-color: $panels;
     font-size: $font-12px;
     line-height: $font-16px;
@@ -44,7 +44,7 @@ limitations under the License.
     }
 
     .mx_MapError_heading {
-        padding-top: $spacing-8;
+        padding-top: var(--spacing-8);
         /* override h3 heading size */
         font-size: inherit !important;
         font-weight: normal !important;
@@ -52,11 +52,11 @@ limitations under the License.
 }
 
 .mx_MapError_message {
-    margin: $spacing-16 0 $spacing-32;
+    margin: var(--spacing-16) 0 var(--spacing-32);
 }
 
 .mx_MapError_heading {
-    padding-top: $spacing-24;
+    padding-top: var(--spacing-24);
 }
 
 .mx_MapError_icon {
diff --git a/res/css/components/views/location/_MapFallback.pcss b/res/css/components/views/location/_MapFallback.pcss
index b40e98c6922..0d3ed957940 100644
--- a/res/css/components/views/location/_MapFallback.pcss
+++ b/res/css/components/views/location/_MapFallback.pcss
@@ -40,6 +40,6 @@ limitations under the License.
 
 .mx_MapFallback_icon {
     width: 65px;
-    margin-bottom: $spacing-16;
+    margin-bottom: var(--spacing-16);
     color: $quaternary-content;
 }
diff --git a/res/css/components/views/location/_ShareDialogButtons.pcss b/res/css/components/views/location/_ShareDialogButtons.pcss
index 5278e68020e..0c5137f8dff 100644
--- a/res/css/components/views/location/_ShareDialogButtons.pcss
+++ b/res/css/components/views/location/_ShareDialogButtons.pcss
@@ -31,7 +31,7 @@ limitations under the License.
     text-align: center;
     color: $secondary-content;
     position: absolute;
-    top: $spacing-16;
+    top: var(--spacing-16);
 
     &:hover,
     &:focus {
@@ -39,11 +39,11 @@ limitations under the License.
     }
 
     &.left {
-        left: $spacing-16;
+        left: var(--spacing-16);
     }
 
     &.right {
-        right: $spacing-16;
+        right: var(--spacing-16);
     }
 }
 
diff --git a/res/css/components/views/location/_ShareType.pcss b/res/css/components/views/location/_ShareType.pcss
index 186365a2ba6..d77b13345d1 100644
--- a/res/css/components/views/location/_ShareType.pcss
+++ b/res/css/components/views/location/_ShareType.pcss
@@ -21,22 +21,22 @@ limitations under the License.
     justify-content: flex-start;
     align-items: center;
 
-    padding: 60px $spacing-12 $spacing-32;
+    padding: 60px var(--spacing-12) var(--spacing-32);
 
     color: $primary-content;
 
     .mx_ShareType_wrapper_options {
         display: flex;
         flex-direction: column;
-        row-gap: $spacing-12;
+        row-gap: var(--spacing-12);
         width: 100%;
-        margin-top: $spacing-12;
+        margin-top: var(--spacing-12);
 
         .mx_ShareType_option {
             display: flex;
             align-items: center;
             justify-content: flex-start;
-            padding: $spacing-8 $spacing-20;
+            padding: var(--spacing-8) var(--spacing-20);
             background: none;
 
             border: 1px solid $quinary-content;
@@ -58,7 +58,7 @@ limitations under the License.
 .mx_ShareType_badge {
     height: 60px;
     width: 60px;
-    margin-bottom: $spacing-20;
+    margin-bottom: var(--spacing-20);
     background-color: $accent;
     border-radius: 50%;
     border: 14px solid $accent;
@@ -68,7 +68,7 @@ limitations under the License.
 }
 
 .mx_ShareType_heading {
-    padding-bottom: $spacing-32;
+    padding-bottom: var(--spacing-32);
     text-align: center;
 }
 
@@ -76,7 +76,7 @@ limitations under the License.
     height: 40px;
     width: 40px;
     box-sizing: border-box;
-    margin-right: $spacing-12;
+    margin-right: var(--spacing-12);
     flex: 0 0 40px;
     border-width: 2px;
     border-style: solid;
diff --git a/res/css/components/views/location/_ZoomButtons.pcss b/res/css/components/views/location/_ZoomButtons.pcss
index d6e40e5a49f..b27443b9c21 100644
--- a/res/css/components/views/location/_ZoomButtons.pcss
+++ b/res/css/components/views/location/_ZoomButtons.pcss
@@ -16,11 +16,11 @@ limitations under the License.
 
 .mx_ZoomButtons {
     position: absolute;
-    bottom: $spacing-32;
-    right: $spacing-24;
+    bottom: var(--spacing-32);
+    right: var(--spacing-24);
     display: flex;
     flex-direction: column;
-    row-gap: $spacing-8;
+    row-gap: var(--spacing-8);
 
     .mx_ZoomButtons_button {
         $ZoomButtons_button-size: 24px;
diff --git a/res/css/components/views/messages/_MBeaconBody.pcss b/res/css/components/views/messages/_MBeaconBody.pcss
index 26f3653a841..de33a40279c 100644
--- a/res/css/components/views/messages/_MBeaconBody.pcss
+++ b/res/css/components/views/messages/_MBeaconBody.pcss
@@ -40,8 +40,8 @@ limitations under the License.
 
 .mx_MBeaconBody_withoutMapInfoLastUpdated {
     /* 48px lines up with icon in BeaconStatus */
-    margin-top: -$spacing-8;
-    padding: 0 $spacing-8 $spacing-8 48px;
+    margin-top: calc(-1 * var(--spacing-8));
+    padding: 0 var(--spacing-8) var(--spacing-8) 48px;
 
     color: $tertiary-content;
     font-size: $font-10px;
diff --git a/res/css/components/views/messages/shared/_MediaProcessingError.pcss b/res/css/components/views/messages/shared/_MediaProcessingError.pcss
index 97b82ad0f19..660cd9ee615 100644
--- a/res/css/components/views/messages/shared/_MediaProcessingError.pcss
+++ b/res/css/components/views/messages/shared/_MediaProcessingError.pcss
@@ -15,6 +15,6 @@ limitations under the License.
 */
 
 .mx_MediaProcessingError_Icon {
-    margin-right: $spacing-4;
+    margin-right: var(--spacing-4);
     vertical-align: text-top;
 }
diff --git a/res/css/components/views/pips/_WidgetPip.pcss b/res/css/components/views/pips/_WidgetPip.pcss
index 80c47719251..00304a72903 100644
--- a/res/css/components/views/pips/_WidgetPip.pcss
+++ b/res/css/components/views/pips/_WidgetPip.pcss
@@ -39,7 +39,7 @@ limitations under the License.
 
 .mx_WidgetPip_header {
     top: 0;
-    padding: $spacing-12;
+    padding: var(--spacing-12);
     display: flex;
     font-size: $font-12px;
     font-weight: $font-semi-bold;
@@ -47,10 +47,10 @@ limitations under the License.
 }
 
 .mx_WidgetPip_backButton {
-    height: $spacing-24;
+    height: var(--spacing-24);
     display: flex;
     align-items: center;
-    gap: $spacing-12;
+    gap: var(--spacing-12);
 
     > .mx_Icon {
         color: $call-light-quaternary-content;
@@ -60,7 +60,7 @@ limitations under the License.
 
 .mx_WidgetPip_footer {
     bottom: 0;
-    padding: $spacing-12 $spacing-8;
+    padding: var(--spacing-12) var(--spacing-8);
     display: flex;
     justify-content: flex-end;
     align-items: flex-end;
diff --git a/res/css/components/views/polls/_PollOption.pcss b/res/css/components/views/polls/_PollOption.pcss
index da4c66d6cf1..8a664cb0e32 100644
--- a/res/css/components/views/polls/_PollOption.pcss
+++ b/res/css/components/views/polls/_PollOption.pcss
@@ -53,7 +53,7 @@ limitations under the License.
     height: 12px;
     width: 12px;
     color: $accent;
-    margin-right: $spacing-4;
+    margin-right: var(--spacing-4);
     vertical-align: middle;
 }
 
@@ -97,7 +97,7 @@ limitations under the License.
     margin-right: 12px;
     border-radius: 8px;
     background-color: $system;
-    margin-top: $spacing-8;
+    margin-top: var(--spacing-8);
 
     .mx_PollOption_popularityAmount {
         width: 0%;
diff --git a/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss b/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss
index b62cc531893..d7d1142b8fc 100644
--- a/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss
+++ b/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss
@@ -27,7 +27,7 @@ limitations under the License.
 
 .mx_DeviceDetailHeading_renameForm {
     display: grid;
-    grid-gap: $spacing-16;
+    grid-gap: var(--spacing-16);
     justify-content: left;
     grid-template-columns: 100%;
 }
@@ -35,7 +35,7 @@ limitations under the License.
 .mx_DeviceDetailHeading_renameFormButtons {
     display: flex;
     flex-direction: row;
-    gap: $spacing-8;
+    gap: var(--spacing-8);
 
     .mx_Spinner {
         width: auto;
@@ -45,7 +45,7 @@ limitations under the License.
 
 .mx_DeviceDetailHeading_renameFormInput {
     // override field styles
-    margin: 0 0 $spacing-4 0 !important;
+    margin: 0 0 var(--spacing-4) 0 !important;
 }
 
 .mx_DeviceDetailHeading_renameFormHeading {
@@ -54,6 +54,6 @@ limitations under the License.
 
 .mx_DeviceDetailHeading_renameFormError {
     color: $alert;
-    padding-right: $spacing-4;
+    padding-right: var(--spacing-4);
     display: block;
 }
diff --git a/res/css/components/views/settings/devices/_DeviceDetails.pcss b/res/css/components/views/settings/devices/_DeviceDetails.pcss
index 9b34fa378aa..9969d5e0bc4 100644
--- a/res/css/components/views/settings/devices/_DeviceDetails.pcss
+++ b/res/css/components/views/settings/devices/_DeviceDetails.pcss
@@ -19,19 +19,19 @@ limitations under the License.
     flex-direction: column;
     box-sizing: border-box;
 
-    margin-top: $spacing-16;
-    padding: $spacing-24;
+    margin-top: var(--spacing-16);
+    padding: var(--spacing-24);
     border-radius: 8px;
     border: 1px solid $quinary-content;
 }
 
 .mx_DeviceDetails_section {
-    padding-bottom: $spacing-20;
-    margin-bottom: $spacing-20;
+    padding-bottom: var(--spacing-20);
+    margin-bottom: var(--spacing-20);
     border-bottom: 1px solid $quinary-content;
 
     display: grid;
-    grid-gap: $spacing-24;
+    grid-gap: var(--spacing-24);
     justify-content: left;
     grid-template-columns: 100%;
 
@@ -50,7 +50,7 @@ limitations under the License.
         font-size: $font-12px;
         color: $secondary-content;
         line-height: $font-14px;
-        margin-top: $spacing-4;
+        margin-top: var(--spacing-4);
     }
 }
 
@@ -69,7 +69,7 @@ limitations under the License.
     }
 
     td {
-        padding-top: $spacing-8;
+        padding-top: var(--spacing-8);
     }
 
     .mxDeviceDetails_metadataLabel {
@@ -85,7 +85,7 @@ limitations under the License.
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: $spacing-4;
+    gap: var(--spacing-4);
 }
 
 .mx_DeviceDetails_pushNotifications {
diff --git a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss
index c2a0d5bb780..cf9a249578e 100644
--- a/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss
+++ b/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss
@@ -21,7 +21,7 @@ limitations under the License.
     align-items: flex-start;
     box-sizing: border-box;
 
-    padding: $spacing-16;
+    padding: var(--spacing-16);
 
     border: 1px solid $quinary-content;
     border-radius: 8px;
@@ -32,7 +32,7 @@ limitations under the License.
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: $spacing-16;
+    margin-right: var(--spacing-16);
     border-radius: 8px;
 
     height: 40px;
@@ -61,7 +61,7 @@ limitations under the License.
     flex: 1 1;
 }
 .mx_DeviceSecurityCard_heading {
-    margin: 0 0 $spacing-4 0;
+    margin: 0 0 var(--spacing-4) 0;
 }
 .mx_DeviceSecurityCard_description {
     margin: 0;
@@ -70,5 +70,5 @@ limitations under the License.
 }
 
 .mx_DeviceSecurityCard_actions {
-    margin-top: $spacing-16;
+    margin-top: var(--spacing-16);
 }
diff --git a/res/css/components/views/settings/devices/_DeviceTile.pcss b/res/css/components/views/settings/devices/_DeviceTile.pcss
index 18224362c22..fb4d60d2a7f 100644
--- a/res/css/components/views/settings/devices/_DeviceTile.pcss
+++ b/res/css/components/views/settings/devices/_DeviceTile.pcss
@@ -30,7 +30,7 @@ limitations under the License.
 }
 
 .mx_DeviceTile_metadata {
-    margin-top: $spacing-4;
+    margin-top: var(--spacing-4);
     font-size: $font-12px;
     color: $secondary-content;
     line-height: $font-14px;
@@ -38,13 +38,13 @@ limitations under the License.
 
 .mx_DeviceTile_inactiveIcon {
     height: 14px;
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
     vertical-align: middle;
 }
 
 .mx_DeviceTile_actions {
     display: grid;
-    grid-gap: $spacing-8;
+    grid-gap: var(--spacing-8);
     grid-auto-flow: column;
-    margin-left: $spacing-8;
+    margin-left: var(--spacing-8);
 }
diff --git a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
index 5a5937b1513..ae1a1d0a8ac 100644
--- a/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
+++ b/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
@@ -17,9 +17,9 @@ limitations under the License.
 .mx_DeviceTypeIcon {
     flex: 0 0 auto;
     position: relative;
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
     /* creates space for verification icon to overlap */
-    padding: 0 $spacing-8 $spacing-8 0;
+    padding: 0 var(--spacing-8) var(--spacing-8) 0;
 }
 
 .mx_DeviceTypeIcon_deviceIconWrapper {
@@ -30,7 +30,7 @@ limitations under the License.
     width: 40px;
     box-sizing: border-box;
 
-    border: $spacing-8 solid var(--background-color);
+    border: var(--spacing-8) solid var(--background-color);
     border-radius: 50%;
     color: var(--icon-color);
     background-color: var(--background-color);
@@ -53,7 +53,7 @@ limitations under the License.
     height: 24px;
     width: 24px;
     box-sizing: border-box;
-    padding: $spacing-4;
+    padding: var(--spacing-4);
 
     border: 1px solid $quinary-content;
     border-radius: 50%;
diff --git a/res/css/components/views/settings/devices/_FilteredDeviceList.pcss b/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
index 9f9bd0cc712..27585079ad5 100644
--- a/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
+++ b/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
@@ -23,9 +23,9 @@ limitations under the License.
 .mx_FilteredDeviceList_list {
     list-style-type: none;
     display: grid;
-    grid-gap: $spacing-16;
+    grid-gap: var(--spacing-16);
     margin: 0;
-    padding: 0 $spacing-16;
+    padding: 0 var(--spacing-16);
 }
 
 .mx_FilteredDeviceList_listItem {
@@ -34,13 +34,13 @@ limitations under the License.
 }
 
 .mx_FilteredDeviceList_securityCard {
-    margin-bottom: $spacing-32;
+    margin-bottom: var(--spacing-32);
 }
 
 .mx_FilteredDeviceList_noResults {
     width: 100%;
     text-align: center;
-    margin-bottom: $spacing-32;
+    margin-bottom: var(--spacing-32);
 }
 
 .mx_FilteredDeviceList_headerButton {
@@ -48,7 +48,7 @@ limitations under the License.
     // override inline button styling
     display: flex !important;
     flex-direction: row;
-    gap: $spacing-8;
+    gap: var(--spacing-8);
 }
 
 .mx_FilteredDeviceList_deviceDetails {
diff --git a/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss b/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss
index 3bba9d90b35..411299fc612 100644
--- a/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss
+++ b/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss
@@ -19,12 +19,12 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     box-sizing: border-box;
-    gap: $spacing-16;
+    gap: var(--spacing-16);
 
     width: 100%;
     height: 48px;
-    padding: 0 $spacing-16;
-    margin-bottom: $spacing-32;
+    padding: 0 var(--spacing-16);
+    margin-bottom: var(--spacing-32);
 
     background-color: $system;
     border-radius: 8px;
diff --git a/res/css/components/views/settings/devices/_SecurityRecommendations.pcss b/res/css/components/views/settings/devices/_SecurityRecommendations.pcss
index d0a53335590..5759ea0dfae 100644
--- a/res/css/components/views/settings/devices/_SecurityRecommendations.pcss
+++ b/res/css/components/views/settings/devices/_SecurityRecommendations.pcss
@@ -15,5 +15,5 @@ limitations under the License.
 */
 
 .mx_SecurityRecommendations_spacing {
-    height: $spacing-16;
+    height: var(--spacing-16);
 }
diff --git a/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss b/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss
index aa0cf91a9cb..dfe270038b3 100644
--- a/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss
+++ b/res/css/components/views/settings/devices/_SelectableDeviceTile.pcss
@@ -23,5 +23,5 @@ limitations under the License.
 
 .mx_SelectableDeviceTile_checkbox {
     flex: 0 0;
-    margin-right: $spacing-16;
+    margin-right: var(--spacing-16);
 }
diff --git a/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/res/css/components/views/settings/shared/_SettingsSubsection.pcss
index a2b3cd35bfa..49a3f838719 100644
--- a/res/css/components/views/settings/shared/_SettingsSubsection.pcss
+++ b/res/css/components/views/settings/shared/_SettingsSubsection.pcss
@@ -23,7 +23,7 @@ limitations under the License.
     width: 100%;
     box-sizing: inherit;
     line-height: $font-24px;
-    margin-bottom: $spacing-24;
+    margin-bottom: var(--spacing-24);
     color: $secondary-content;
 }
 
diff --git a/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss b/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss
index e6d4bf4be7c..bd3fe6704fd 100644
--- a/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss
+++ b/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss
@@ -17,9 +17,9 @@ limitations under the License.
 .mx_SettingsSubsectionHeading {
     display: flex;
     flex-direction: row;
-    padding-bottom: $spacing-8;
+    padding-bottom: var(--spacing-8);
 
-    gap: $spacing-8;
+    gap: var(--spacing-8);
 }
 
 .mx_SettingsSubsectionHeading_heading {
diff --git a/res/css/compound/_SuccessDialog.pcss b/res/css/compound/_SuccessDialog.pcss
index 61f98a97df7..4846ef2d41b 100644
--- a/res/css/compound/_SuccessDialog.pcss
+++ b/res/css/compound/_SuccessDialog.pcss
@@ -18,11 +18,11 @@ limitations under the License.
     text-align: center;
 
     .mx_Icon {
-        mask-border: $spacing-16;
+        mask-border: var(--spacing-16);
     }
 
     .mx_Dialog_header {
-        margin: 0 0 $spacing-16;
+        margin: 0 0 var(--spacing-16);
         padding: 0;
     }
 
@@ -32,7 +32,7 @@ limitations under the License.
 
     .mx_Dialog_content {
         color: $secondary-content;
-        margin: 0 0 $spacing-40;
+        margin: 0 0 var(--spacing-40);
     }
 
     .mx_Dialog_buttons {
diff --git a/res/css/structures/_AutocompleteInput.pcss b/res/css/structures/_AutocompleteInput.pcss
index 754c8ae1944..14bc52c3f8a 100644
--- a/res/css/structures/_AutocompleteInput.pcss
+++ b/res/css/structures/_AutocompleteInput.pcss
@@ -19,7 +19,7 @@ limitations under the License.
 }
 
 .mx_AutocompleteInput_search_icon {
-    margin-left: $spacing-8;
+    margin-left: var(--spacing-8);
     fill: $secondary-content;
 }
 
@@ -40,7 +40,7 @@ limitations under the License.
         resize: none;
         // `!important` is required to bypass global input styles.
         margin: 0 !important;
-        padding: $spacing-8 9px;
+        padding: var(--spacing-8) 9px;
         border: none !important;
         color: $primary-content !important;
         font-weight: normal !important;
@@ -63,22 +63,22 @@ limitations under the License.
 
 .mx_AutocompleteInput_editor_selection {
     display: flex;
-    margin-left: $spacing-8;
+    margin-left: var(--spacing-8);
 }
 
 .mx_AutocompleteInput_editor_selection_pill {
     display: flex;
     align-items: center;
     border-radius: 12px;
-    padding-left: $spacing-8;
-    padding-right: $spacing-8;
+    padding-left: var(--spacing-8);
+    padding-right: var(--spacing-8);
     background-color: $username-variant1-color;
     color: #ffffff;
     font-size: $font-12px;
 }
 
 .mx_AutocompleteInput_editor_selection_remove_button {
-    padding: 0 $spacing-4;
+    padding: 0 var(--spacing-4);
 }
 
 .mx_AutocompleteInput_matches {
@@ -96,7 +96,7 @@ limitations under the License.
 .mx_AutocompleteInput_suggestion {
     display: flex;
     align-items: center;
-    padding: $spacing-8;
+    padding: var(--spacing-8);
     cursor: pointer;
 
     > * {
@@ -120,7 +120,7 @@ limitations under the License.
 }
 
 .mx_AutocompleteInput_suggestion_title {
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
 }
 
 .mx_AutocompleteInput_suggestion_description {
diff --git a/res/css/structures/_ErrorMessage.pcss b/res/css/structures/_ErrorMessage.pcss
index ece0d7ea25a..7dbd82802c9 100644
--- a/res/css/structures/_ErrorMessage.pcss
+++ b/res/css/structures/_ErrorMessage.pcss
@@ -19,7 +19,7 @@ limitations under the License.
     color: $alert;
     display: flex;
     font-size: $font-12px;
-    gap: $spacing-8;
+    gap: var(--spacing-8);
     line-height: 1.2em;
     min-height: 2.4em;
 }
diff --git a/res/css/structures/_FilePanel.pcss b/res/css/structures/_FilePanel.pcss
index f04dc3f8dcc..be474859ee7 100644
--- a/res/css/structures/_FilePanel.pcss
+++ b/res/css/structures/_FilePanel.pcss
@@ -69,7 +69,7 @@ limitations under the License.
         }
 
         .mx_MFileBody_download {
-            padding-top: $spacing-8;
+            padding-top: var(--spacing-8);
             display: flex;
             justify-content: space-between;
             font-size: $font-14px;
diff --git a/res/css/structures/_ViewSource.pcss b/res/css/structures/_ViewSource.pcss
index 52d3afecc4f..fcf63042297 100644
--- a/res/css/structures/_ViewSource.pcss
+++ b/res/css/structures/_ViewSource.pcss
@@ -25,8 +25,8 @@ limitations under the License.
 
     .mx_ViewSource_header {
         border-bottom: 1px solid $quinary-content;
-        padding-bottom: $spacing-12;
-        margin-bottom: $spacing-12;
+        padding-bottom: var(--spacing-12);
+        margin-bottom: var(--spacing-12);
         font-family: monospace;
 
         .mx_CopyableText {
@@ -38,11 +38,11 @@ limitations under the License.
         font-size: $font-17px;
         font-weight: 400;
         color: $primary-content;
-        margin-top: $spacing-12;
+        margin-top: var(--spacing-12);
     }
 
     .mx_ViewSource_details {
-        margin-top: $spacing-12;
+        margin-top: var(--spacing-12);
     }
 
     .mx_CopyableText_border {
diff --git a/res/css/views/audio_messages/_AudioPlayer.pcss b/res/css/views/audio_messages/_AudioPlayer.pcss
index 314632d6c0c..88bf2ce353a 100644
--- a/res/css/views/audio_messages/_AudioPlayer.pcss
+++ b/res/css/views/audio_messages/_AudioPlayer.pcss
@@ -59,7 +59,7 @@ limitations under the License.
 
         .mx_Clock {
             min-width: $font-42px; /* for flexbox */
-            padding-left: $spacing-4; /* isolate from seek bar */
+            padding-left: var(--spacing-4); /* isolate from seek bar */
             text-align: justify;
             white-space: nowrap;
         }
diff --git a/res/css/views/auth/_AuthBody.pcss b/res/css/views/auth/_AuthBody.pcss
index e1abe24d230..d5c618e4bc4 100644
--- a/res/css/views/auth/_AuthBody.pcss
+++ b/res/css/views/auth/_AuthBody.pcss
@@ -36,7 +36,7 @@ limitations under the License.
     h1 {
         font-size: $font-24px;
         font-weight: $font-semi-bold;
-        margin-top: $spacing-8;
+        margin-top: var(--spacing-8);
         color: $authpage-primary-color;
     }
 
@@ -71,7 +71,7 @@ limitations under the License.
     }
 
     .mx_AuthBody_text {
-        margin-bottom: $spacing-48;
+        margin-bottom: var(--spacing-48);
         margin-top: 0;
     }
 
@@ -105,7 +105,7 @@ limitations under the License.
 
     .mx_Login_submit {
         height: 32px;
-        margin-top: $spacing-16;
+        margin-top: var(--spacing-16);
     }
 
     .mx_ErrorMessage {
@@ -146,7 +146,7 @@ limitations under the License.
     min-height: 600px;
 
     h1 {
-        margin: $spacing-24 0;
+        margin: var(--spacing-24) 0;
     }
 
     .mx_AuthBody_button-container {
@@ -156,24 +156,24 @@ limitations under the License.
 
     .mx_Login_submit {
         font-weight: $font-semi-bold;
-        margin: 0 0 $spacing-16;
+        margin: 0 0 var(--spacing-16);
     }
 
     .mx_AuthBody_text {
-        margin-bottom: $spacing-32;
+        margin-bottom: var(--spacing-32);
 
         p {
-            margin: 0 0 $spacing-8;
+            margin: 0 0 var(--spacing-8);
         }
     }
 
     .mx_AuthBody_sign-in-instead-button {
         font-weight: $font-semi-bold;
-        padding: $spacing-4;
+        padding: var(--spacing-4);
     }
 
     .mx_AuthBody_fieldRow {
-        margin-bottom: $spacing-24;
+        margin-bottom: var(--spacing-24);
     }
 
     .mx_AccessibleButton.mx_AccessibleButton_hasKind {
@@ -190,7 +190,7 @@ limitations under the License.
     align-items: center;
     color: $secondary-content;
     display: flex;
-    gap: $spacing-8;
+    gap: var(--spacing-8);
 }
 
 .mx_AuthBody_resend-button {
@@ -198,8 +198,8 @@ limitations under the License.
     border-radius: 8px;
     color: $accent;
     display: flex;
-    gap: $spacing-4;
-    padding: $spacing-4;
+    gap: var(--spacing-4);
+    padding: var(--spacing-4);
 
     &:hover {
         background-color: $system;
@@ -240,7 +240,7 @@ limitations under the License.
     text-align: center;
 
     .mx_AuthBody_paddedFooter_title {
-        margin-top: $spacing-16;
+        margin-top: var(--spacing-16);
         font-size: $font-15px;
         line-height: $font-24px;
 
@@ -251,7 +251,7 @@ limitations under the License.
     }
 
     .mx_AuthBody_paddedFooter_subtitle {
-        margin-top: $spacing-8;
+        margin-top: var(--spacing-8);
         font-size: $font-10px;
         line-height: $font-14px;
     }
@@ -267,7 +267,7 @@ limitations under the License.
 }
 
 .mx_SSOButtons + .mx_AuthBody_changeFlow {
-    margin-top: $spacing-24;
+    margin-top: var(--spacing-24);
 }
 
 .mx_AuthBody_spinner {
diff --git a/res/css/views/auth/_LoginWithQR.pcss b/res/css/views/auth/_LoginWithQR.pcss
index f1259fde0fa..ae7ea86f880 100644
--- a/res/css/views/auth/_LoginWithQR.pcss
+++ b/res/css/views/auth/_LoginWithQR.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_LoginWithQRSection .mx_AccessibleButton {
-    margin-right: $spacing-12;
+    margin-right: var(--spacing-12);
 }
 
 .mx_AuthPage .mx_LoginWithQR {
@@ -24,7 +24,7 @@ limitations under the License.
     }
 
     .mx_AccessibleButton + .mx_AccessibleButton {
-        margin-top: $spacing-8;
+        margin-top: var(--spacing-8);
     }
 
     .mx_LoginWithQR_separator {
@@ -54,7 +54,7 @@ limitations under the License.
 
 .mx_UserSettingsDialog .mx_LoginWithQR {
     .mx_AccessibleButton + .mx_AccessibleButton {
-        margin-left: $spacing-12;
+        margin-left: var(--spacing-12);
     }
 
     font-size: $font-14px;
@@ -69,8 +69,8 @@ limitations under the License.
     }
 
     .mx_QRCode {
-        padding: $spacing-12 $spacing-40;
-        margin: $spacing-28 0;
+        padding: var(--spacing-12) var(--spacing-40);
+        margin: var(--spacing-28) 0;
     }
 
     .mx_LoginWithQR_buttons {
@@ -104,13 +104,13 @@ limitations under the License.
             color: $accent;
         }
         height: 1.3em;
-        margin-right: $spacing-8;
+        margin-right: var(--spacing-8);
         vertical-align: middle;
     }
 
     .mx_LoginWithQR_confirmationDigits {
         text-align: center;
-        margin: $spacing-48 auto;
+        margin: var(--spacing-48) auto;
         font-weight: 600;
         font-size: $font-24px;
         color: $primary-content;
@@ -118,8 +118,8 @@ limitations under the License.
 
     .mx_LoginWithQR_confirmationAlert {
         border: 1px solid $quaternary-content;
-        border-radius: $spacing-8;
-        padding: $spacing-8;
+        border-radius: var(--spacing-8);
+        padding: var(--spacing-8);
         line-height: 1.5em;
         display: flex;
 
@@ -142,8 +142,8 @@ limitations under the License.
     }
 
     .mx_LoginWithQR_BackButton {
-        height: $spacing-12;
-        margin-bottom: $spacing-24;
+        height: var(--spacing-12);
+        margin-bottom: var(--spacing-24);
         svg {
             height: 100%;
         }
@@ -157,7 +157,7 @@ limitations under the License.
 
     .mx_QRCode {
         border: 1px solid $quinary-content;
-        border-radius: $spacing-8;
+        border-radius: var(--spacing-8);
         display: flex;
         justify-content: center;
     }
diff --git a/res/css/views/beta/_BetaCard.pcss b/res/css/views/beta/_BetaCard.pcss
index e4e4db01e56..981408f08d8 100644
--- a/res/css/views/beta/_BetaCard.pcss
+++ b/res/css/views/beta/_BetaCard.pcss
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_BetaCard {
-    margin-bottom: $spacing-20;
-    padding: $spacing-24;
+    margin-bottom: var(--spacing-20);
+    padding: var(--spacing-24);
     background-color: $system;
     border-radius: 8px;
     box-sizing: border-box;
@@ -25,7 +25,7 @@ limitations under the License.
     .mx_BetaCard_columns {
         display: flex;
         flex-flow: wrap;
-        gap: $spacing-20;
+        gap: var(--spacing-20);
         justify-content: center;
 
         .mx_BetaCard_columns_description {
@@ -36,11 +36,11 @@ limitations under the License.
                 font-size: $font-18px;
                 line-height: $font-22px;
                 color: $primary-content;
-                margin: $spacing-4 0 14px; // TODO: use a spacing variable
+                margin: var(--spacing-4) 0 14px; // TODO: use a spacing variable
 
                 display: flex;
                 align-items: center;
-                column-gap: $spacing-12;
+                column-gap: var(--spacing-12);
             }
 
             .mx_BetaCard_caption {
@@ -51,8 +51,8 @@ limitations under the License.
             .mx_BetaCard_buttons {
                 display: flex;
                 flex-wrap: wrap-reverse;
-                gap: $spacing-12;
-                margin: $spacing-20 auto 0;
+                gap: var(--spacing-12);
+                margin: var(--spacing-20) auto 0;
 
                 .mx_AccessibleButton {
                     padding: 7px 40px;
@@ -67,18 +67,18 @@ limitations under the License.
             }
 
             .mx_BetaCard_refreshWarning {
-                margin-top: $spacing-8;
+                margin-top: var(--spacing-8);
                 font-size: $font-10px;
                 text-align: center;
             }
 
             .mx_BetaCard_faq {
-                margin-top: $spacing-20;
+                margin-top: var(--spacing-20);
                 font-size: $font-12px;
                 line-height: $font-15px;
 
                 > h4 {
-                    margin: $spacing-12 0 0;
+                    margin: var(--spacing-12) 0 0;
                 }
 
                 > p {
@@ -102,13 +102,13 @@ limitations under the License.
 
     .mx_BetaCard_relatedSettings {
         .mx_SettingsFlag {
-            margin: $spacing-16 0 0;
+            margin: var(--spacing-16) 0 0;
             font-size: $font-15px;
             line-height: $font-24px;
             color: $primary-content;
 
             .mx_SettingsFlag_microcopy {
-                margin-top: $spacing-4;
+                margin-top: var(--spacing-4);
                 font-size: $font-12px;
                 line-height: $font-15px;
             }
@@ -122,7 +122,7 @@ limitations under the License.
 
 .mx_BetaCard_betaPill {
     background-color: $accent-alt;
-    padding: $spacing-4 10px; // TODO: use a spacing variable
+    padding: var(--spacing-4) 10px; // TODO: use a spacing variable
     border-radius: 8px;
     text-transform: uppercase;
     font-size: $font-12px;
diff --git a/res/css/views/dialogs/_AppDownloadDialog.pcss b/res/css/views/dialogs/_AppDownloadDialog.pcss
index e0591ed7e91..724f8ea5ade 100644
--- a/res/css/views/dialogs/_AppDownloadDialog.pcss
+++ b/res/css/views/dialogs/_AppDownloadDialog.pcss
@@ -1,7 +1,7 @@
 .mx_AppDownloadDialog {
     display: flex;
     flex-direction: column;
-    gap: $spacing-32;
+    gap: var(--spacing-32);
     color: $primary-content;
 
     &.mx_Dialog_fixedWidth {
@@ -12,13 +12,13 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: $spacing-16;
+        gap: var(--spacing-16);
     }
 
     .mx_AppDownloadDialog_mobile {
         display: flex;
         flex-direction: row;
-        gap: $spacing-24;
+        gap: var(--spacing-24);
 
         .mx_AppDownloadDialog_app {
             display: flex;
@@ -26,13 +26,13 @@
             flex-grow: 1;
             flex-basis: 50%;
             align-items: center;
-            gap: $spacing-16;
+            gap: var(--spacing-16);
 
             .mx_QRCode {
                 /* intentionally hardcoded color to ensure the QR code is readable in any situation */
                 background: #ffffff;
 
-                padding: $spacing-24;
+                padding: var(--spacing-24);
                 border: 1px solid $quinary-content;
                 border-radius: 4px;
                 align-self: stretch;
@@ -56,7 +56,7 @@
             .mx_AppDownloadDialog_links {
                 display: flex;
                 flex-direction: row;
-                gap: $spacing-8;
+                gap: var(--spacing-8);
 
                 .mx_AccessibleButton {
                     svg {
diff --git a/res/css/views/dialogs/_ExportDialog.pcss b/res/css/views/dialogs/_ExportDialog.pcss
index ef96ed63818..af1eab2db0a 100644
--- a/res/css/views/dialogs/_ExportDialog.pcss
+++ b/res/css/views/dialogs/_ExportDialog.pcss
@@ -92,5 +92,5 @@ limitations under the License.
 }
 
 .mx_ExportDialog_attachments-checkbox {
-    margin-top: $spacing-16;
+    margin-top: var(--spacing-16);
 }
diff --git a/res/css/views/dialogs/_InviteDialog.pcss b/res/css/views/dialogs/_InviteDialog.pcss
index 86de19b5ab8..60c923e1d82 100644
--- a/res/css/views/dialogs/_InviteDialog.pcss
+++ b/res/css/views/dialogs/_InviteDialog.pcss
@@ -20,7 +20,7 @@ limitations under the License.
 }
 
 .mx_InviteDialog_transferWrapper .mx_Dialog {
-    padding-bottom: $spacing-16;
+    padding-bottom: var(--spacing-16);
 }
 
 .mx_InviteDialog_addressBar {
@@ -28,7 +28,7 @@ limitations under the License.
     flex-direction: row;
     /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
     /* for the user section gets weird. */
-    margin: $spacing-8 45px 0 0; /* TODO: Use a spacing variable */
+    margin: var(--spacing-8) 45px 0 0; /* TODO: Use a spacing variable */
 
     .mx_InviteDialog_editor {
         flex: 1;
@@ -36,7 +36,7 @@ limitations under the License.
         background-color: $header-panel-bg-color;
         border-radius: 4px;
         min-height: 25px;
-        padding-inline-start: $spacing-8;
+        padding-inline-start: var(--spacing-8);
         overflow-x: hidden;
         overflow-y: auto;
         display: flex;
@@ -54,7 +54,7 @@ limitations under the License.
             height: 24px;
             line-height: $font-24px;
             font-size: $font-14px;
-            padding-inline-start: $spacing-12;
+            padding-inline-start: var(--spacing-12);
             border: 0 !important;
             outline: 0 !important;
             resize: none;
@@ -85,7 +85,7 @@ limitations under the License.
 }
 
 .mx_InviteDialog_section {
-    padding-bottom: $spacing-4;
+    padding-bottom: var(--spacing-4);
 
     h3 {
         font-size: $font-12px;
@@ -109,7 +109,7 @@ limitations under the License.
 }
 
 .mx_InviteDialog_section_hidden_suggestions_disclaimer {
-    padding: $spacing-8 0 $spacing-16 0;
+    padding: var(--spacing-8) 0 var(--spacing-16) 0;
     font-size: $font-14px;
 
     > span {
@@ -126,7 +126,7 @@ limitations under the License.
     border-top: 1px solid $input-border-color;
 
     > h3 {
-        margin: $spacing-12 0;
+        margin: var(--spacing-12) 0;
         font-size: $font-12px;
         color: $muted-fg-color;
         font-weight: bold;
@@ -148,7 +148,7 @@ limitations under the License.
 
 /* Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog. */
 .mx_InviteDialog_userTile {
-    margin-inline-end: $spacing-8;
+    margin-inline-end: var(--spacing-8);
 
     .mx_InviteDialog_userTile_pill {
         background-color: $username-variant1-color;
@@ -156,7 +156,7 @@ limitations under the License.
         display: inline-block;
         height: 24px;
         line-height: $font-24px;
-        padding-inline: $spacing-8;
+        padding-inline: var(--spacing-8);
         color: #ffffff; /* this is fine without a var because it's for both themes */
 
         .mx_SearchResultAvatar {
@@ -181,7 +181,7 @@ limitations under the License.
 
     .mx_InviteDialog_userTile_remove {
         display: inline-block;
-        margin-inline-start: $spacing-4;
+        margin-inline-start: var(--spacing-4);
     }
 }
 
@@ -202,7 +202,7 @@ limitations under the License.
 
         .mx_InviteDialog_section {
             padding-bottom: 0;
-            margin-top: $spacing-12;
+            margin-top: var(--spacing-12);
         }
     }
 }
@@ -241,18 +241,18 @@ limitations under the License.
     }
 
     .mx_InviteDialog_addressBar {
-        margin-top: $spacing-8;
+        margin-top: var(--spacing-8);
     }
 
     input[type="checkbox"] {
-        margin-inline-end: $spacing-8;
+        margin-inline-end: var(--spacing-8);
     }
 }
 
 .mx_InviteDialog_userSections {
-    margin-top: $spacing-4;
+    margin-top: var(--spacing-4);
     overflow-y: auto;
-    padding: 0 45px $spacing-4 0; /* TODO: Use a spacing variable */
+    padding: 0 45px var(--spacing-4) 0; /* TODO: Use a spacing variable */
 }
 
 .mx_InviteDialog_helpText {
@@ -261,7 +261,7 @@ limitations under the License.
 
 .mx_InviteDialog_dialPad {
     width: 224px;
-    margin-top: $spacing-16;
+    margin-top: var(--spacing-16);
     margin-inline: auto;
 
     .mx_InviteDialog_dialPadField {
@@ -288,19 +288,19 @@ limitations under the License.
     }
 
     .mx_DialPad {
-        row-gap: $spacing-16;
+        row-gap: var(--spacing-16);
         column-gap: 48px; /* TODO: Use a spacing variable */
         margin-inline: auto;
     }
 }
 
 .mx_InviteDialog_transferConsultConnect {
-    padding-top: $spacing-16;
+    padding-top: var(--spacing-16);
     /* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width,
      * then compensate with padding
      */
-    padding-inline: $spacing-24;
-    margin-inline: calc(-1 * $spacing-24);
+    padding-inline: var(--spacing-24);
+    margin-inline: calc(-1 * var(--spacing-24));
     border-top: 1px solid $quinary-content;
 
     display: flex;
@@ -323,13 +323,13 @@ limitations under the License.
 .mx_InviteDialog_tile {
     cursor: pointer;
     display: grid;
-    gap: $spacing-8 $spacing-12;
+    gap: var(--spacing-8) var(--spacing-12);
     align-items: center;
 
     &.mx_InviteDialog_tile--room {
         /* mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time */
         grid-template-columns: min-content auto auto;
-        padding: $spacing-4 $spacing-8;
+        padding: var(--spacing-4) var(--spacing-8);
 
         &:hover {
             background-color: $header-panel-bg-color;
@@ -370,7 +370,7 @@ limitations under the License.
 
     &.mx_InviteDialog_tile--inviterError {
         grid-template-columns: max-content auto; /* max-content = avatar width */
-        margin-bottom: $spacing-24;
+        margin-bottom: var(--spacing-24);
 
         &:last-child {
             margin-bottom: 0;
@@ -455,5 +455,5 @@ limitations under the License.
 
 .mx_InviteDialog_oneThreepid {
     font-size: $font-12px;
-    margin: $spacing-8 0;
+    margin: var(--spacing-8) 0;
 }
diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss
index ff7c1002c42..086ed70e9ea 100644
--- a/res/css/views/dialogs/_MessageEditHistoryDialog.pcss
+++ b/res/css/views/dialogs/_MessageEditHistoryDialog.pcss
@@ -78,8 +78,8 @@ limitations under the License.
         display: flex;
         align-items: center;
 
-        padding-inline-start: $spacing-8;
-        padding-inline-end: $spacing-8;
+        padding-inline-start: var(--spacing-8);
+        padding-inline-end: var(--spacing-8);
 
         font-size: $font-15px;
     }
diff --git a/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss b/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
index 72fc912ca67..3e51fdfb59c 100644
--- a/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
+++ b/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
@@ -23,9 +23,9 @@ limitations under the License.
         &.mx_RoomSettingsDialog_BridgeList_listItem {
             display: flex;
             flex-wrap: wrap;
-            gap: $spacing-8;
+            gap: var(--spacing-8);
             padding: 5px;
-            margin-bottom: $spacing-8;
+            margin-bottom: var(--spacing-8);
 
             /* border-style around each bridge list item */
             border-width: 1px 1px;
@@ -79,11 +79,11 @@ limitations under the License.
 
                 .mx_RoomSettingsDialog_column_data_details,
                 .mx_RoomSettingsDialog_column_data_metadata {
-                    margin-top: $spacing-4;
+                    margin-top: var(--spacing-4);
                 }
 
                 .mx_RoomSettingsDialog_column_data_metadata li {
-                    margin-top: $spacing-8;
+                    margin-top: var(--spacing-8);
                 }
 
                 .mx_RoomSettingsDialog_column_data_protocolName {
diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss
index b9fa6348254..0c236b02312 100644
--- a/res/css/views/dialogs/_SpotlightDialog.pcss
+++ b/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -24,7 +24,7 @@ limitations under the License.
 
     #mx_SpotlightDialog_keyboardPrompt {
         position: absolute;
-        padding: $spacing-8;
+        padding: var(--spacing-8);
         border-radius: 8px;
         background-color: $background;
         top: -60px; /* relative to the top of the modal */
@@ -36,8 +36,8 @@ limitations under the License.
 
         kbd {
             display: inline-block;
-            padding: 2px $spacing-4; /* TODO: Use a spacing variable */
-            margin: 0 $spacing-4;
+            padding: 2px var(--spacing-4); /* TODO: Use a spacing variable */
+            margin: 0 var(--spacing-4);
             border-radius: 6px;
             background-color: $quinary-content;
             vertical-align: middle;
@@ -63,7 +63,7 @@ limitations under the License.
         margin: 0;
         border: none;
         border-radius: 8px 8px 0 0;
-        padding: $spacing-12 $spacing-16;
+        padding: var(--spacing-12) var(--spacing-16);
         border-bottom: 1px solid $system;
 
         > .mx_SpotlightDialog_filter {
@@ -71,12 +71,12 @@ limitations under the License.
             align-content: center;
             align-items: center;
             border-radius: 8px;
-            margin-right: $spacing-8;
+            margin-right: var(--spacing-8);
             background-color: $quinary-content;
             vertical-align: middle;
             color: $primary-content;
             position: relative;
-            padding: $spacing-4 $spacing-8 $spacing-4 37px; /* TODO: Use a spacing variable */
+            padding: var(--spacing-4) var(--spacing-8) var(--spacing-4) 37px; /* TODO: Use a spacing variable */
 
             &::before {
                 background-color: $secondary-content;
@@ -87,7 +87,7 @@ limitations under the License.
                 width: 18px;
                 height: 18px;
                 position: absolute;
-                left: $spacing-8;
+                left: var(--spacing-8);
                 top: 50%;
                 transform: translateY(-50%);
             }
@@ -107,7 +107,7 @@ limitations under the License.
                 height: 16px;
                 background: $system;
                 border-radius: 8px;
-                margin-left: $spacing-8;
+                margin-left: var(--spacing-8);
                 text-align: center;
                 line-height: 16px;
                 color: $secondary-content;
@@ -146,14 +146,14 @@ limitations under the License.
             flex-grow: 0;
             width: unset;
             height: unset;
-            margin-left: $spacing-16;
+            margin-left: var(--spacing-16);
         }
     }
 
     #mx_SpotlightDialog_content {
         height: 100%;
         overflow-y: auto;
-        padding: $spacing-16;
+        padding: var(--spacing-16);
 
         .mx_SpotlightDialog_section {
             > h4,
@@ -166,23 +166,23 @@ limitations under the License.
             }
 
             > h4 {
-                margin-bottom: $spacing-8;
+                margin-bottom: var(--spacing-8);
             }
 
             .mx_SpotlightDialog_sectionHeader {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-                margin-bottom: $spacing-8;
+                margin-bottom: var(--spacing-8);
 
                 .mx_SpotlightDialog_options {
                     display: flex;
-                    gap: $spacing-4;
+                    gap: var(--spacing-4);
                 }
             }
 
             & + .mx_SpotlightDialog_section {
-                margin-top: $spacing-24;
+                margin-top: var(--spacing-24);
             }
         }
 
@@ -196,7 +196,7 @@ limitations under the License.
 
             .mx_SpotlightDialog_option {
                 border-radius: 8px;
-                padding: $spacing-4;
+                padding: var(--spacing-4);
                 color: $primary-content;
                 font-size: $font-12px;
                 line-height: $font-15px;
@@ -210,11 +210,11 @@ limitations under the License.
                 text-overflow: ellipsis;
 
                 .mx_DecoratedRoomAvatar {
-                    margin: 0 9px $spacing-4; /* maintain centering */
+                    margin: 0 9px var(--spacing-4); /* maintain centering */
                 }
 
                 & + .mx_SpotlightDialog_option {
-                    margin-left: $spacing-16;
+                    margin-left: var(--spacing-16);
                 }
 
                 &:hover,
@@ -229,7 +229,7 @@ limitations under the License.
         .mx_SpotlightDialog_otherSearches,
         .mx_SpotlightDialog_hiddenResults {
             .mx_SpotlightDialog_option {
-                padding: 6px $spacing-4; /* TODO: Use a spacing variable */
+                padding: 6px var(--spacing-4); /* TODO: Use a spacing variable */
                 border-radius: 8px;
                 font-size: $font-15px;
                 line-height: $font-24px;
@@ -252,20 +252,20 @@ limitations under the License.
                     align-items: flex-start;
 
                     .mx_AccessibleButton {
-                        padding: $spacing-4 $spacing-20;
-                        margin: 2px $spacing-4; /* TODO: Use a spacing variable */
+                        padding: var(--spacing-4) var(--spacing-20);
+                        margin: 2px var(--spacing-4); /* TODO: Use a spacing variable */
                     }
 
                     .mx_SpotlightDialog_enterPrompt {
                         margin-top: 9px; /* TODO: Use a spacing variable */
-                        margin-right: $spacing-8;
+                        margin-right: var(--spacing-8);
                     }
                 }
 
                 > .mx_SpotlightDialog_metaspaceResult,
                 > .mx_DecoratedRoomAvatar,
                 > .mx_BaseAvatar {
-                    margin-right: $spacing-8;
+                    margin-right: var(--spacing-8);
                     width: 24px;
                     height: 24px;
 
@@ -285,7 +285,7 @@ limitations under the License.
                         display: flex;
                         flex-direction: row;
                         line-height: $font-24px;
-                        margin-right: $spacing-8;
+                        margin-right: var(--spacing-8);
 
                         .mx_SpotlightDialog_result_publicRoomName {
                             color: $primary-content;
@@ -296,7 +296,7 @@ limitations under the License.
                         .mx_SpotlightDialog_result_publicRoomAlias {
                             color: $tertiary-content;
                             font-size: $font-12px;
-                            margin-left: $spacing-8;
+                            margin-left: var(--spacing-8);
                             overflow: hidden;
                             text-overflow: ellipsis;
                         }
@@ -315,7 +315,7 @@ limitations under the License.
                 }
 
                 .mx_NotificationBadge {
-                    margin-left: $spacing-8;
+                    margin-left: var(--spacing-8);
                 }
 
                 .mx_SpotlightDialog_option--menu,
@@ -369,12 +369,12 @@ limitations under the License.
 
         .mx_SpotlightDialog_inviteLink,
         .mx_SpotlightDialog_createRoom {
-            margin-top: $spacing-8;
+            margin-top: var(--spacing-8);
 
             .mx_AccessibleButton {
                 position: relative;
                 margin: 0;
-                padding: 3px $spacing-8 3px $spacing-28; /* TODO: Use a spacing variable */
+                padding: 3px var(--spacing-8) 3px var(--spacing-28); /* TODO: Use a spacing variable */
 
                 &::before {
                     content: "";
@@ -383,7 +383,7 @@ limitations under the License.
                     mask-repeat: no-repeat;
                     mask-position: center;
                     mask-size: contain;
-                    left: $spacing-8;
+                    left: var(--spacing-8);
                     width: 16px;
                     height: 16px;
                     background: $accent;
@@ -404,7 +404,7 @@ limitations under the License.
             .mx_SpotlightDialog_joinRoomAlias,
             .mx_SpotlightDialog_explorePublicRooms,
             .mx_SpotlightDialog_startGroupChat {
-                padding-left: $spacing-32;
+                padding-left: var(--spacing-32);
                 position: relative;
 
                 &::before {
@@ -416,7 +416,7 @@ limitations under the License.
                     width: 24px;
                     height: 24px;
                     position: absolute;
-                    left: $spacing-4;
+                    left: var(--spacing-4);
                     top: 50%;
                     transform: translateY(-50%);
                 }
@@ -457,8 +457,8 @@ limitations under the License.
         }
 
         .mx_SpotlightDialog_result_details {
-            margin-left: $spacing-8;
-            margin-right: $spacing-8;
+            margin-left: var(--spacing-8);
+            margin-right: var(--spacing-8);
             color: $tertiary-content;
             font-size: $font-12px;
             line-height: $font-15px;
@@ -475,7 +475,7 @@ limitations under the License.
         }
 
         .mx_SpotlightDialog_enterPrompt {
-            padding: 2px $spacing-4; /* TODO: Use a spacing variable */
+            padding: 2px var(--spacing-4); /* TODO: Use a spacing variable */
             /* To avoid any styling inherent with <kbd> elements */
             font-family: inherit;
             font-weight: inherit;
@@ -484,7 +484,7 @@ limitations under the License.
             color: $tertiary-content;
             border-radius: 6px;
             background-color: $quinary-content;
-            margin-right: $spacing-4;
+            margin-right: var(--spacing-4);
             display: none;
         }
 
diff --git a/res/css/views/dialogs/_VerifyEMailDialog.pcss b/res/css/views/dialogs/_VerifyEMailDialog.pcss
index 47541dc452a..9b76df23b9d 100644
--- a/res/css/views/dialogs/_VerifyEMailDialog.pcss
+++ b/res/css/views/dialogs/_VerifyEMailDialog.pcss
@@ -21,7 +21,7 @@ limitations under the License.
     .mx_Dialog {
         color: $primary-content;
         font-size: $font-14px;
-        padding: $spacing-24 $spacing-24 $spacing-16;
+        padding: var(--spacing-24) var(--spacing-24) var(--spacing-16);
         text-align: center;
         width: 485px;
 
@@ -37,7 +37,7 @@ limitations under the License.
 
         .mx_AuthBody_did-not-receive {
             justify-content: center;
-            margin-bottom: $spacing-8;
+            margin-bottom: var(--spacing-8);
         }
 
         .mx_Dialog_cancelButton {
diff --git a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
index 6b802197dc7..1b0302fda80 100644
--- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
+++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
@@ -21,7 +21,7 @@ limitations under the License.
             display: inline-block;
             width: 24px;
             height: 24px;
-            margin-inline-end: $spacing-8;
+            margin-inline-end: var(--spacing-8);
             position: relative;
             top: 5px; /* TODO: spacing variable */
             background-color: $primary-content;
@@ -63,7 +63,7 @@ limitations under the License.
             }
 
             .mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
-                margin: $spacing-16;
+                margin: var(--spacing-16);
             }
 
             .mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
@@ -104,7 +104,7 @@ limitations under the License.
         }
 
         .mx_Dialog_buttons {
-            $spacingStart: $spacing-24; /* 16px icon + 8px padding */
+            $spacingStart: var(--spacing-24); /* 16px icon + 8px padding */
 
             text-align: initial;
             display: flex;
@@ -137,7 +137,7 @@ limitations under the License.
             }
 
             .mx_Dialog_buttons_row {
-                gap: $spacing-16; /* TODO: needs normalization */
+                gap: var(--spacing-16); /* TODO: needs normalization */
                 padding-inline-start: $spacingStart;
             }
         }
diff --git a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
index 5dc40898623..3115c35c3cd 100644
--- a/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
+++ b/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
@@ -27,7 +27,7 @@ limitations under the License.
         padding: 56px; /* 80px from design - 24px wrapper padding */
 
         .mx_Dialog_title {
-            margin-bottom: $spacing-16;
+            margin-bottom: var(--spacing-16);
         }
     }
 
diff --git a/res/css/views/directory/_NetworkDropdown.pcss b/res/css/views/directory/_NetworkDropdown.pcss
index 8dbd7f020db..2d0ca908e23 100644
--- a/res/css/views/directory/_NetworkDropdown.pcss
+++ b/res/css/views/directory/_NetworkDropdown.pcss
@@ -17,14 +17,14 @@ limitations under the License.
 .mx_NetworkDropdown_wrapper .mx_ContextualMenu {
     .mx_GenericDropdownMenu_Option {
         &.mx_GenericDropdownMenu_Option--header {
-            padding-top: $spacing-12;
-            padding-bottom: $spacing-4;
+            padding-top: var(--spacing-12);
+            padding-bottom: var(--spacing-4);
             min-width: 160px;
         }
 
         &.mx_GenericDropdownMenu_Option--item {
-            padding-top: $spacing-4;
-            padding-bottom: $spacing-4;
+            padding-top: var(--spacing-4);
+            padding-bottom: var(--spacing-4);
 
             > .mx_GenericDropdownMenu_Option--label span:first-child {
                 font-weight: normal;
@@ -38,15 +38,15 @@ limitations under the License.
             color: $primary-content;
 
             span:not(:first-child) {
-                margin-left: $spacing-4;
+                margin-left: var(--spacing-4);
                 color: $secondary-content;
             }
         }
     }
 
     .mx_GenericDropdownMenu_divider {
-        margin-top: $spacing-4;
-        margin-bottom: $spacing-4;
+        margin-top: var(--spacing-4);
+        margin-bottom: var(--spacing-4);
     }
 }
 
diff --git a/res/css/views/elements/_GenericEventListSummary.pcss b/res/css/views/elements/_GenericEventListSummary.pcss
index b7d1adb73e3..1bd650fff62 100644
--- a/res/css/views/elements/_GenericEventListSummary.pcss
+++ b/res/css/views/elements/_GenericEventListSummary.pcss
@@ -18,7 +18,7 @@ limitations under the License.
     position: relative;
 
     .mx_GenericEventListSummary_avatars {
-        margin-right: $spacing-8;
+        margin-right: var(--spacing-8);
     }
 
     .mx_GenericEventListSummary_spacer {
@@ -40,7 +40,7 @@ limitations under the License.
     }
 
     &[data-layout="group"] {
-        margin-top: $spacing-8;
+        margin-top: var(--spacing-8);
     }
 
     &[data-layout="bubble"] {
@@ -92,7 +92,7 @@ limitations under the License.
 
     .mx_MatrixChat_useCompactLayout & {
         font-size: $font-13px;
-        margin-top: $spacing-4;
+        margin-top: var(--spacing-4);
 
         .mx_EventTile_line {
             line-height: $font-20px;
diff --git a/res/css/views/elements/_LabelledCheckbox.pcss b/res/css/views/elements/_LabelledCheckbox.pcss
index 8545c6747b4..0b76614ad62 100644
--- a/res/css/views/elements/_LabelledCheckbox.pcss
+++ b/res/css/views/elements/_LabelledCheckbox.pcss
@@ -32,7 +32,7 @@ limitations under the License.
 
         .mx_LabelledCheckbox_byline {
             display: block;
-            padding-top: $spacing-4;
+            padding-top: var(--spacing-4);
             color: $muted-fg-color;
             font-size: $font-11px;
         }
diff --git a/res/css/views/elements/_ServerPicker.pcss b/res/css/views/elements/_ServerPicker.pcss
index d640a1e7f27..8a215271ca3 100644
--- a/res/css/views/elements/_ServerPicker.pcss
+++ b/res/css/views/elements/_ServerPicker.pcss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_ServerPicker {
     margin-bottom: 14px;
-    padding-bottom: $spacing-16;
+    padding-bottom: var(--spacing-16);
     border-bottom: 1px solid rgba(141, 151, 165, 0.2);
     display: grid;
     grid-template-columns: auto min-content;
diff --git a/res/css/views/elements/_UseCaseSelection.pcss b/res/css/views/elements/_UseCaseSelection.pcss
index 26b2c5652fc..421de38f101 100644
--- a/res/css/views/elements/_UseCaseSelection.pcss
+++ b/res/css/views/elements/_UseCaseSelection.pcss
@@ -18,7 +18,7 @@ limitations under the License.
     display: grid;
     grid-template-rows: 1fr 1fr max-content 2fr;
     height: 100%;
-    grid-gap: $spacing-40;
+    grid-gap: var(--spacing-40);
 
     .mx_UseCaseSelection_title {
         display: flex;
@@ -35,7 +35,7 @@ limitations under the License.
     .mx_UseCaseSelection_info {
         display: flex;
         flex-direction: column;
-        gap: $spacing-8;
+        gap: var(--spacing-8);
         align-self: flex-end;
 
         h2 {
@@ -57,7 +57,7 @@ limitations under the License.
     .mx_UseCaseSelection_options {
         display: grid;
         grid-template-columns: repeat(auto-fit, 232px);
-        gap: $spacing-32;
+        gap: var(--spacing-32);
         align-self: stretch;
         justify-content: center;
     }
diff --git a/res/css/views/elements/_UseCaseSelectionButton.pcss b/res/css/views/elements/_UseCaseSelectionButton.pcss
index 2ca7f6c9cf9..65316e23fcd 100644
--- a/res/css/views/elements/_UseCaseSelectionButton.pcss
+++ b/res/css/views/elements/_UseCaseSelectionButton.pcss
@@ -18,7 +18,7 @@ limitations under the License.
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: $spacing-24 $spacing-16;
+    padding: var(--spacing-24) var(--spacing-16);
     background: $background;
     border: 1px solid $quinary-content;
     border-radius: 8px;
@@ -31,8 +31,8 @@ limitations under the License.
         /* workaround: design expects a layering of two colors */
         background: linear-gradient(0deg, rgba(172, 59, 168, 0.15), rgba(172, 59, 168, 0.15)), #ffffff;
         border-radius: 14px;
-        padding: $spacing-8;
-        margin-bottom: $spacing-16;
+        padding: var(--spacing-8);
+        margin-bottom: var(--spacing-16);
 
         &::before {
             content: "";
@@ -62,8 +62,8 @@ limitations under the License.
 
     &:hover,
     &:focus {
-        box-shadow: 0 $spacing-4 $spacing-8 rgba(0, 0, 0, 0.08);
-        transform: translate(0, -$spacing-8);
+        box-shadow: 0 var(--spacing-4) var(--spacing-8) rgba(0, 0, 0, 0.08);
+        transform: translate(0, calc(-1 * var(--spacing-8)));
     }
 
     .mx_UseCaseSelectionButton_selectedIcon {
@@ -94,8 +94,8 @@ limitations under the License.
 
     &.mx_UseCaseSelectionButton_selected {
         border: 2px solid $accent;
-        padding: calc($spacing-24 - 1px) calc($spacing-16 - 1px);
-        box-shadow: 0 $spacing-4 $spacing-8 rgba(0, 0, 0, 0.08);
+        padding: calc(var(--spacing-24) - 1px) calc(var(--spacing-16) - 1px);
+        box-shadow: 0 var(--spacing-4) var(--spacing-8) rgba(0, 0, 0, 0.08);
 
         .mx_UseCaseSelectionButton_selectedIcon {
             opacity: 1;
diff --git a/res/css/views/location/_LocationPicker.pcss b/res/css/views/location/_LocationPicker.pcss
index 6598237b089..f5b7c3e406c 100644
--- a/res/css/views/location/_LocationPicker.pcss
+++ b/res/css/views/location/_LocationPicker.pcss
@@ -40,7 +40,7 @@ limitations under the License.
 
         .maplibregl-ctrl.maplibregl-ctrl-group,
         .maplibregl-ctrl.maplibregl-ctrl-attrib {
-            margin-right: $spacing-16;
+            margin-right: var(--spacing-16);
         }
 
         .maplibregl-ctrl.maplibregl-ctrl-group {
@@ -62,7 +62,7 @@ limitations under the License.
         flex: 0;
         width: 100%;
         box-sizing: border-box;
-        padding: $spacing-16;
+        padding: var(--spacing-16);
         display: flex;
         flex-direction: column;
         justify-content: stretch;
@@ -76,7 +76,7 @@ limitations under the License.
 
 .mx_LocationPicker_pinText {
     position: absolute;
-    top: $spacing-16;
+    top: var(--spacing-16);
     width: 100%;
     box-sizing: border-box;
     text-align: center;
@@ -86,7 +86,7 @@ limitations under the License.
     span {
         box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
         border-radius: 8px;
-        padding: $spacing-8;
+        padding: var(--spacing-8);
         background-color: $background;
         color: $primary-content;
 
diff --git a/res/css/views/messages/_CallEvent.pcss b/res/css/views/messages/_CallEvent.pcss
index 599b2b86fe0..ae82bbb1acd 100644
--- a/res/css/views/messages/_CallEvent.pcss
+++ b/res/css/views/messages/_CallEvent.pcss
@@ -29,7 +29,7 @@ limitations under the License.
     border-radius: 8px;
 
     display: flex;
-    gap: $spacing-8;
+    gap: var(--spacing-8);
 
     > .mx_BaseAvatar,
     > .mx_Icon {
@@ -38,7 +38,7 @@ limitations under the License.
 
     > .mx_Icon {
         padding: 0;
-        margin: $spacing-4 0;
+        margin: var(--spacing-4) 0;
         color: $secondary-content;
     }
 
@@ -63,7 +63,7 @@ limitations under the License.
     mask-size: 16px;
     width: 16px;
     height: 16px;
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
 }
 
 .mx_CallEvent_active .mx_CallEvent_title {
@@ -73,7 +73,7 @@ limitations under the License.
 .mx_CallEvent_columns {
     flex-grow: 1;
     display: flex;
-    gap: $spacing-12;
+    gap: var(--spacing-12);
     align-items: center;
     justify-content: space-between;
 }
@@ -81,7 +81,7 @@ limitations under the License.
 .mx_TimelineCard .mx_CallEvent_columns {
     flex-direction: column;
     align-items: flex-start;
-    gap: $spacing-8;
+    gap: var(--spacing-8);
 }
 
 .mx_CallEvent_details {
diff --git a/res/css/views/messages/_EventTileBubble.pcss b/res/css/views/messages/_EventTileBubble.pcss
index bbf346cab16..88f751586f9 100644
--- a/res/css/views/messages/_EventTileBubble.pcss
+++ b/res/css/views/messages/_EventTileBubble.pcss
@@ -38,7 +38,7 @@ limitations under the License.
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: contain;
-        margin-top: $spacing-4;
+        margin-top: var(--spacing-4);
     }
 
     .mx_EventTileBubble_title,
@@ -62,6 +62,6 @@ limitations under the License.
         grid-column: 4;
         grid-row: 1 / 3;
         align-self: center;
-        margin-left: $spacing-16;
+        margin-left: var(--spacing-16);
     }
 }
diff --git a/res/css/views/messages/_LegacyCallEvent.pcss b/res/css/views/messages/_LegacyCallEvent.pcss
index 8d0f5abbc30..cc61d6e5bb3 100644
--- a/res/css/views/messages/_LegacyCallEvent.pcss
+++ b/res/css/views/messages/_LegacyCallEvent.pcss
@@ -24,11 +24,11 @@ limitations under the License.
         flex-wrap: wrap;
         align-items: center;
         justify-content: space-between;
-        gap: $spacing-4 0;
+        gap: var(--spacing-4) 0;
 
         position: relative;
-        margin: $spacing-4 0;
-        padding: $spacing-12 $spacing-24;
+        margin: var(--spacing-4) 0;
+        padding: var(--spacing-12) var(--spacing-24);
         box-sizing: border-box;
         background-color: $dark-panel-bg-color;
         border-radius: 8px;
@@ -112,7 +112,7 @@ limitations under the License.
             .mx_LegacyCallEvent_info_basic {
                 display: flex;
                 flex-direction: column;
-                gap: $spacing-4;
+                gap: var(--spacing-4);
                 margin-left: 10px; /* To match mx_LegacyCallEvent */
                 margin-right: 10px;
                 min-width: 0;
@@ -121,7 +121,7 @@ limitations under the License.
                     font-weight: 600;
                     font-size: 1.5rem;
                     line-height: 1.8rem;
-                    margin-bottom: $spacing-4;
+                    margin-bottom: var(--spacing-4);
 
                     overflow: hidden;
                     white-space: nowrap;
@@ -161,14 +161,14 @@ limitations under the License.
             align-items: center;
             color: $secondary-content;
             font-size: $font-12px;
-            gap: $spacing-12; /* See mx_IncomingLegacyCallToast_buttons */
+            gap: var(--spacing-12); /* See mx_IncomingLegacyCallToast_buttons */
             margin-inline-start: 42px; /* avatar (32px) + mx_LegacyCallEvent_info_basic margin (10px) */
             word-break: break-word;
             max-width: fit-content;
 
             .mx_LegacyCallEvent_content_button {
                 @mixin LegacyCallButton;
-                padding: 0 $spacing-12;
+                padding: 0 var(--spacing-12);
                 font-size: inherit;
 
                 span::before {
@@ -193,7 +193,7 @@ limitations under the License.
         &.mx_LegacyCallEvent_narrow {
             flex-direction: column;
             align-items: unset;
-            gap: $spacing-4 $spacing-16;
+            gap: var(--spacing-4) var(--spacing-16);
             height: unset;
             min-width: 290px;
 
@@ -229,7 +229,7 @@ limitations under the License.
     .mx_LegacyCallEvent_wrapper {
         .mx_LegacyCallEvent {
             &.mx_LegacyCallEvent_narrow {
-                gap: $spacing-8 $spacing-4;
+                gap: var(--spacing-8) var(--spacing-4);
             }
         }
     }
@@ -238,7 +238,7 @@ limitations under the License.
 .mx_IRCLayout {
     .mx_LegacyCallEvent_wrapper {
         .mx_LegacyCallEvent {
-            margin-inline-start: $spacing-4; /* display green line */
+            margin-inline-start: var(--spacing-4); /* display green line */
         }
     }
 }
diff --git a/res/css/views/messages/_MImageBody.pcss b/res/css/views/messages/_MImageBody.pcss
index ea5996faabb..445bce488a6 100644
--- a/res/css/views/messages/_MImageBody.pcss
+++ b/res/css/views/messages/_MImageBody.pcss
@@ -19,9 +19,9 @@ $timeline-image-border-radius: 8px;
 
 .mx_MImageBody_banner {
     position: absolute;
-    bottom: $spacing-4;
-    left: $spacing-4;
-    padding: $spacing-4;
+    bottom: var(--spacing-4);
+    left: var(--spacing-4);
+    padding: var(--spacing-4);
     border-radius: $timeline-image-border-radius;
     font-size: $font-15px;
     user-select: none; /* prevent banner text from being selected */
diff --git a/res/css/views/messages/_MImageReplyBody.pcss b/res/css/views/messages/_MImageReplyBody.pcss
index f1b9514adc9..1f162295d17 100644
--- a/res/css/views/messages/_MImageReplyBody.pcss
+++ b/res/css/views/messages/_MImageReplyBody.pcss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_MImageReplyBody {
     display: flex;
-    column-gap: $spacing-4;
+    column-gap: var(--spacing-4);
 
     .mx_MImageBody_thumbnail_container,
     .mx_MImageReplyBody_info {
diff --git a/res/css/views/messages/_MPollBody.pcss b/res/css/views/messages/_MPollBody.pcss
index e7f3118d571..2a4f1929ccb 100644
--- a/res/css/views/messages/_MPollBody.pcss
+++ b/res/css/views/messages/_MPollBody.pcss
@@ -56,7 +56,7 @@ limitations under the License.
 
         .mx_Spinner {
             flex: 0;
-            margin-left: $spacing-8;
+            margin-left: var(--spacing-8);
         }
     }
 }
@@ -68,7 +68,7 @@ limitations under the License.
 
 .mx_MPollBody_allOptions {
     display: grid;
-    grid-gap: $spacing-16;
-    margin-bottom: $spacing-8;
+    grid-gap: var(--spacing-16);
+    margin-bottom: var(--spacing-8);
     max-width: 550px;
 }
diff --git a/res/css/views/messages/_MPollEndBody.pcss b/res/css/views/messages/_MPollEndBody.pcss
index db302655043..a18f8bca86b 100644
--- a/res/css/views/messages/_MPollEndBody.pcss
+++ b/res/css/views/messages/_MPollEndBody.pcss
@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_MPollEndBody_icon {
     height: 14px;
-    margin-right: $spacing-8;
+    margin-right: var(--spacing-8);
     vertical-align: middle;
     color: $secondary-content;
 }
diff --git a/res/css/views/messages/_ReactionsRow.pcss b/res/css/views/messages/_ReactionsRow.pcss
index 7d54e3ce206..dfeabedff9a 100644
--- a/res/css/views/messages/_ReactionsRow.pcss
+++ b/res/css/views/messages/_ReactionsRow.pcss
@@ -63,7 +63,7 @@ limitations under the License.
     &.mx_AccessibleButton_kind_link_inline {
         font-size: $font-12px;
         line-height: $font-20px;
-        margin-inline-start: $spacing-4;
+        margin-inline-start: var(--spacing-4);
         vertical-align: middle;
 
         &:hover {
diff --git a/res/css/views/polls/pollHistory/_PollHistory.pcss b/res/css/views/polls/pollHistory/_PollHistory.pcss
index ee7860dd609..b12ebe5c22f 100644
--- a/res/css/views/polls/pollHistory/_PollHistory.pcss
+++ b/res/css/views/polls/pollHistory/_PollHistory.pcss
@@ -23,5 +23,5 @@ limitations under the License.
 }
 
 .mx_PollHistory_header.mx_Heading_h2 {
-    margin-bottom: $spacing-16;
+    margin-bottom: var(--spacing-16);
 }
diff --git a/res/css/views/polls/pollHistory/_PollHistoryList.pcss b/res/css/views/polls/pollHistory/_PollHistoryList.pcss
index be6ca7423af..32d1728558c 100644
--- a/res/css/views/polls/pollHistory/_PollHistoryList.pcss
+++ b/res/css/views/polls/pollHistory/_PollHistoryList.pcss
@@ -29,12 +29,12 @@ limitations under the License.
     flex: 1 1 0;
     align-content: flex-start;
     display: grid;
-    grid-gap: $spacing-20;
-    padding-right: $spacing-64;
-    margin: $spacing-32 0;
+    grid-gap: var(--spacing-20);
+    padding-right: var(--spacing-64);
+    margin: var(--spacing-32) 0;
 
     &.mx_PollHistoryList_list_ENDED {
-        grid-gap: $spacing-32;
+        grid-gap: var(--spacing-32);
     }
 }
 
@@ -42,7 +42,7 @@ limitations under the License.
     height: 100%;
     width: 100%;
     box-sizing: border-box;
-    padding: 0 $spacing-64;
+    padding: 0 var(--spacing-64);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -53,7 +53,7 @@ limitations under the License.
     color: $secondary-content;
 
     .mx_PollHistoryList_loadMorePolls {
-        margin-top: $spacing-16;
+        margin-top: var(--spacing-16);
     }
 }
 
diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss
index 22720a99e03..e2ee4e76088 100644
--- a/res/css/views/right_panel/_BaseCard.pcss
+++ b/res/css/views/right_panel/_BaseCard.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_BaseCard {
-    --BaseCard_padding-inline: $spacing-8;
+    --BaseCard_padding-inline: var(--spacing-8);
     --BaseCard_EventTile_line-padding-block: 2px;
     --BaseCard_EventTile-spacing-inline: 36px; /* TODO: Use a spacing variable */
     --BaseCard_header-button-size: 24px;
@@ -27,9 +27,9 @@ limitations under the License.
     flex: 1;
 
     .mx_BaseCard_header {
-        --BaseCard_header_button-margin: $spacing-12;
+        --BaseCard_header_button-margin: var(--spacing-12);
 
-        margin: $spacing-4 0 $spacing-12;
+        margin: var(--spacing-4) 0 var(--spacing-12);
 
         > h2 {
             margin: 0 44px; /* TODO: Use a spacing variable */
@@ -65,7 +65,7 @@ limitations under the License.
 
         .mx_BaseCard_back {
             left: 0;
-            margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4);
+            margin-inline-start: calc(var(--BaseCard_header_button-margin) - var(--spacing-4));
 
             &::before {
                 transform: rotate(90deg);
@@ -86,7 +86,7 @@ limitations under the License.
 
         .mx_BaseCard_close {
             right: 0;
-            margin-inline-end: calc(var(--BaseCard_header_button-margin) - $spacing-4);
+            margin-inline-end: calc(var(--BaseCard_header_button-margin) - var(--spacing-4));
 
             &::before {
                 mask-image: url("$(res)/img/icons-close.svg");
@@ -144,11 +144,11 @@ limitations under the License.
     }
 
     .mx_BaseCard_Group {
-        margin: $spacing-20 0 $spacing-16;
+        margin: var(--spacing-20) 0 var(--spacing-16);
 
         & > * {
-            margin-left: $spacing-12;
-            margin-right: $spacing-12;
+            margin-left: var(--spacing-12);
+            margin-right: var(--spacing-12);
         }
 
         > h1 {
@@ -159,7 +159,7 @@ limitations under the License.
 
         .mx_BaseCard_Button {
             padding: 10px; /* TODO: Use a spacing variable */
-            padding-inline-start: $spacing-12;
+            padding-inline-start: var(--spacing-12);
             margin: 0;
             position: relative;
             font-size: $font-13px;
@@ -181,7 +181,7 @@ limitations under the License.
             }
 
             &.mx_AccessibleButton_disabled {
-                padding-right: $spacing-12;
+                padding-right: var(--spacing-12);
                 &::after {
                     content: unset;
                 }
@@ -190,7 +190,7 @@ limitations under the License.
     }
 
     .mx_BaseCard_footer {
-        padding-top: $spacing-4;
+        padding-top: var(--spacing-4);
         text-align: center;
         display: flex;
         justify-content: space-around;
@@ -212,7 +212,7 @@ limitations under the License.
 .mx_UserInfo,
 .mx_MemberList {
     &.mx_BaseCard {
-        padding: $spacing-32 0 0;
+        padding: var(--spacing-32) 0 0;
 
         .mx_AutoHideScrollbar {
             margin-right: unset;
diff --git a/res/css/views/right_panel/_PinnedMessagesCard.pcss b/res/css/views/right_panel/_PinnedMessagesCard.pcss
index 7b6396a8ece..aeeeed17268 100644
--- a/res/css/views/right_panel/_PinnedMessagesCard.pcss
+++ b/res/css/views/right_panel/_PinnedMessagesCard.pcss
@@ -48,7 +48,7 @@ limitations under the License.
 
             .mx_PinnedMessagesCard_empty_header {
                 color: $primary-content;
-                margin-block: $spacing-24 $spacing-20;
+                margin-block: var(--spacing-24) var(--spacing-20);
             }
 
             > span {
diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss
index f75743037b0..01143ba48c1 100644
--- a/res/css/views/right_panel/_RoomSummaryCard.pcss
+++ b/res/css/views/right_panel/_RoomSummaryCard.pcss
@@ -17,10 +17,10 @@ limitations under the License.
 .mx_RoomSummaryCard {
     .mx_BaseCard_header {
         text-align: center;
-        margin-top: $spacing-20;
+        margin-top: var(--spacing-20);
 
         h2 {
-            margin: $spacing-12 0 $spacing-4;
+            margin: var(--spacing-12) 0 var(--spacing-4);
         }
 
         .mx_RoomSummaryCard_alias {
diff --git a/res/css/views/right_panel/_ThreadPanel.pcss b/res/css/views/right_panel/_ThreadPanel.pcss
index 74d6a3175bf..ab53e508ef4 100644
--- a/res/css/views/right_panel/_ThreadPanel.pcss
+++ b/res/css/views/right_panel/_ThreadPanel.pcss
@@ -26,7 +26,7 @@ limitations under the License.
             }
 
             .mx_ThreadPanel_dropdown {
-                padding: 3px $spacing-4 3px $spacing-8; /* TODO: Use a spacing variable */
+                padding: 3px var(--spacing-4) 3px var(--spacing-8); /* TODO: Use a spacing variable */
                 border-radius: 4px;
                 line-height: 1.5;
                 user-select: none;
@@ -102,8 +102,8 @@ limitations under the License.
     }
 
     .mx_RoomView_MessageList {
-        padding-inline-start: $spacing-8;
-        padding-inline-end: $spacing-8;
+        padding-inline-start: var(--spacing-8);
+        padding-inline-end: var(--spacing-8);
         content-visibility: visible;
     }
 
diff --git a/res/css/views/right_panel/_TimelineCard.pcss b/res/css/views/right_panel/_TimelineCard.pcss
index 13f949b39e5..765387ea42b 100644
--- a/res/css/views/right_panel/_TimelineCard.pcss
+++ b/res/css/views/right_panel/_TimelineCard.pcss
@@ -58,7 +58,7 @@ limitations under the License.
                 padding-inline-end: $MessageTimestamp_width; /* ensure timestamp is not hidden */
 
                 .mx_EventTile_e2eIcon {
-                    inset-inline-start: $spacing-8;
+                    inset-inline-start: var(--spacing-8);
                 }
             }
 
@@ -102,7 +102,7 @@ limitations under the License.
 
             .mx_ReactionsRow {
                 /* See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss */
-                margin-inline-end: $spacing-8;
+                margin-inline-end: var(--spacing-8);
             }
 
             .mx_ThreadSummary {
diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss
index 6d3c397f3f5..1edd2927d4a 100644
--- a/res/css/views/right_panel/_UserInfo.pcss
+++ b/res/css/views/right_panel/_UserInfo.pcss
@@ -48,23 +48,23 @@ limitations under the License.
     }
 
     .mx_UserInfo_container {
-        padding: $spacing-8 $spacing-16;
+        padding: var(--spacing-8) var(--spacing-16);
 
         &:not(.mx_UserInfo_separator) {
-            padding-top: $spacing-16;
+            padding-top: var(--spacing-16);
             padding-bottom: 0;
 
             > :not(h3) {
-                margin-inline-start: $spacing-8;
+                margin-inline-start: var(--spacing-8);
                 display: flex;
                 flex-flow: column;
                 align-items: flex-start;
-                row-gap: $spacing-8;
+                row-gap: var(--spacing-8);
             }
         }
 
         .mx_UserInfo_container_verifyButton {
-            margin-top: $spacing-8;
+            margin-top: var(--spacing-8);
         }
     }
 
@@ -75,7 +75,7 @@ limitations under the License.
     .mx_UserInfo_memberDetailsContainer {
         padding-top: 0;
         padding-bottom: 0;
-        margin-bottom: $spacing-8;
+        margin-bottom: var(--spacing-8);
     }
 
     .mx_RoomTile_titleContainer {
@@ -91,7 +91,7 @@ limitations under the License.
     }
 
     .mx_UserInfo_avatar {
-        margin: $spacing-24 $spacing-32 0 $spacing-32;
+        margin: var(--spacing-24) var(--spacing-32) 0 var(--spacing-32);
 
         .mx_UserInfo_avatar_transition {
             max-width: 30vh;
@@ -147,7 +147,7 @@ limitations under the License.
         color: $tertiary-content;
         font-weight: 600;
         font-size: $font-12px;
-        margin: $spacing-4 0;
+        margin: var(--spacing-4) 0;
     }
 
     p {
@@ -178,13 +178,13 @@ limitations under the License.
 
             .mx_E2EIcon {
                 margin-top: 3px; /* visual vertical centering to the top line of text. TODO: Use a variable */
-                margin-inline-end: $spacing-4; /* margin from displayName */
+                margin-inline-end: var(--spacing-4); /* margin from displayName */
                 min-width: 18px; /* convince flexbox to not collapse it */
             }
         }
 
         .mx_UserInfo_profileStatus {
-            margin-top: $spacing-12;
+            margin-top: var(--spacing-12);
         }
     }
 
@@ -241,7 +241,7 @@ limitations under the License.
     .mx_UserInfo_devices {
         .mx_UserInfo_device {
             display: flex;
-            margin: $spacing-8 0;
+            margin: var(--spacing-8) 0;
 
             &.mx_UserInfo_device_verified {
                 .mx_UserInfo_device_trusted {
diff --git a/res/css/views/rooms/_DecryptionFailureBar.pcss b/res/css/views/rooms/_DecryptionFailureBar.pcss
index 57dc71b7311..4bcc1148001 100644
--- a/res/css/views/rooms/_DecryptionFailureBar.pcss
+++ b/res/css/views/rooms/_DecryptionFailureBar.pcss
@@ -15,14 +15,14 @@ limitations under the License.
 */
 
 .mx_DecryptionFailureBar {
-    --gap-row: $spacing-8;
-    --gap-column: $spacing-12;
+    --gap-row: var(--spacing-8);
+    --gap-column: var(--spacing-12);
     --gap: var(--gap-row) var(--gap-column);
     --size-icon: 24px;
 
     background-color: $system;
-    padding: $spacing-12;
-    margin-inline: $spacing-16;
+    padding: var(--spacing-12);
+    margin-inline: var(--spacing-16);
     border-radius: 4px;
 
     &.mx_DecryptionFailureBar--withEnd {
@@ -30,7 +30,7 @@ limitations under the License.
         flex-flow: wrap;
         align-items: flex-start;
         justify-content: space-between;
-        row-gap: calc(var(--gap-row) + $spacing-4); /* Increase spacing between the message and the buttons */
+        row-gap: calc(var(--gap-row) + var(--spacing-4)); /* Increase spacing between the message and the buttons */
 
         .mx_DecryptionFailureBar_end {
             display: flex;
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index ef75fc154bd..d42481e4273 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -110,7 +110,7 @@ $left-gutter: 64px;
         display: flex;
         flex-flow: wrap;
         align-items: center;
-        gap: $spacing-4;
+        gap: var(--spacing-4);
     }
 
     .mx_ReplyChain--expanded {
@@ -271,7 +271,7 @@ $left-gutter: 64px;
         }
 
         .mx_ReplyChain {
-            margin-bottom: $spacing-8;
+            margin-bottom: var(--spacing-8);
         }
     }
 
@@ -333,7 +333,7 @@ $left-gutter: 64px;
     &[data-layout="group"] {
         .mx_EventTile_avatar {
             top: 14px;
-            left: $spacing-8;
+            left: var(--spacing-8);
         }
 
         .mx_EventTile_line,
@@ -371,7 +371,7 @@ $left-gutter: 64px;
         }
 
         .mx_ReactionsRow {
-            margin: $spacing-4 64px;
+            margin: var(--spacing-4) 64px;
         }
 
         > .mx_DisambiguatedProfile {
@@ -562,11 +562,11 @@ $left-gutter: 64px;
             border: 1px solid $inlinecode-border-color;
             border-radius: 4px;
             // The horizontal padding is added by gfm.css .markdown-body
-            padding: $spacing-2 0;
+            padding: var(--spacing-2) 0;
             // Avoid inline code blocks to be sticked when on multiple lines
             line-height: $font-22px;
             // Avoid the border to be glued to the other words
-            margin-right: $spacing-2;
+            margin-right: var(--spacing-2);
         }
 
         code {
@@ -758,15 +758,15 @@ $left-gutter: 64px;
 
         .mx_EventTile_collapsedCodeBlock {
             max-height: 30vh;
-            padding-top: $spacing-12;
-            padding-bottom: $spacing-12;
+            padding-top: var(--spacing-12);
+            padding-bottom: var(--spacing-12);
         }
 
         /* Inserted adjacent to <pre> blocks, (See TextualBody) */
         .mx_EventTile_button {
             position: absolute;
-            top: $spacing-8;
-            right: $spacing-8;
+            top: var(--spacing-8);
+            right: var(--spacing-8);
             width: 19px;
             height: 19px;
             visibility: hidden;
@@ -837,7 +837,7 @@ $left-gutter: 64px;
         margin-right: 0;
 
         span {
-            padding: $spacing-4 $spacing-8;
+            padding: var(--spacing-4) var(--spacing-8);
         }
     }
 
@@ -865,15 +865,15 @@ $left-gutter: 64px;
 
 .mx_EventTile[data-shape="ThreadsList"],
 .mx_EventTile[data-shape="Notification"] {
-    --topOffset: $spacing-12;
+    --topOffset: var(--spacing-12);
     --leftOffset: 48px;
     $borderRadius: 8px;
-    $padding: $spacing-8;
+    $padding: var(--spacing-8);
     $hrHeight: 1px;
     $notification-dot-size: 8px; /* notification dot next to the timestamp */
 
     margin: calc(var(--topOffset) + $hrHeight) 0 var(--topOffset); /* include the height of horizontal line */
-    padding: $padding $spacing-24 $padding $padding;
+    padding: $padding var(--spacing-24) $padding $padding;
     border-radius: $borderRadius;
 
     display: flex;
@@ -913,7 +913,7 @@ $left-gutter: 64px;
         width: $notification-dot-size !important;
         height: $notification-dot-size !important;
         border-radius: 50%;
-        inset: $notification-inset-block-start $spacing-8 auto auto;
+        inset: $notification-inset-block-start var(--spacing-8) auto auto;
     }
 
     .mx_NotificationBadge_count {
@@ -977,7 +977,7 @@ $left-gutter: 64px;
         padding-inline-start: var(--leftOffset);
 
         .mx_ThreadPanel_replies {
-            margin-top: $spacing-8;
+            margin-top: var(--spacing-8);
             display: flex;
             align-items: center;
             position: relative;
@@ -1105,7 +1105,7 @@ $left-gutter: 64px;
 
         &[data-layout="irc"],
         &[data-layout="group"] {
-            padding-block-start: $spacing-16;
+            padding-block-start: var(--spacing-16);
 
             .mx_EventTile_line,
             .mx_ReactionsRow {
@@ -1142,8 +1142,8 @@ $left-gutter: 64px;
             .mx_EventTile_senderDetails {
                 display: flex;
                 align-items: center;
-                gap: $spacing-16; /* gap between the avatar and the sender ID */
-                padding-inline-start: $spacing-8;
+                gap: var(--spacing-16); /* gap between the avatar and the sender ID */
+                padding-inline-start: var(--spacing-8);
 
                 a {
                     flex: 1;
@@ -1217,7 +1217,7 @@ $left-gutter: 64px;
     .mx_EventTile {
         /* Override :not([data-layout="bubble"]) */
         &[data-layout="group"] {
-            --MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
+            --MatrixChat_useCompactLayout_group-padding-top: var(--spacing-4);
             --MatrixChat_useCompactLayout-top-avatar: 2px;
             --MatrixChat_useCompactLayout-top-e2eIcon: 3px;
             --MatrixChat_useCompactLayout_line-spacing-block: 0px;
@@ -1230,7 +1230,7 @@ $left-gutter: 64px;
             }
 
             .mx_ReplyChain {
-                margin-bottom: $spacing-4;
+                margin-bottom: var(--spacing-4);
             }
 
             &.mx_EventTile_info {
@@ -1250,7 +1250,7 @@ $left-gutter: 64px;
             }
 
             &.mx_EventTile_emote {
-                padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */
+                padding-top: var(--spacing-8); /* add a bit more space for emotes so that avatars don't collide */
 
                 .mx_EventTile_avatar {
                     top: var(--MatrixChat_useCompactLayout-top-avatar);
@@ -1302,7 +1302,7 @@ $left-gutter: 64px;
                 blockquote,
                 pre,
                 table {
-                    margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */
+                    margin-bottom: var(--spacing-4); /* 1/4 of the non-compact margin-bottom */
                 }
             }
         }
@@ -1322,7 +1322,7 @@ $left-gutter: 64px;
     width: stretch;
     align-items: center;
     justify-content: space-between;
-    gap: $spacing-8;
+    gap: var(--spacing-8);
     margin-left: var(--leftOffset);
     .mx_EventTile_truncated {
         flex: 1;
diff --git a/res/css/views/rooms/_LinkPreviewWidget.pcss b/res/css/views/rooms/_LinkPreviewWidget.pcss
index 7949233a9f4..3fd7a5ec9c9 100644
--- a/res/css/views/rooms/_LinkPreviewWidget.pcss
+++ b/res/css/views/rooms/_LinkPreviewWidget.pcss
@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 .mx_LinkPreviewWidget {
-    margin: $spacing-16 0 $spacing-16 auto;
+    margin: var(--spacing-16) 0 var(--spacing-16) auto;
     display: flex;
-    column-gap: $spacing-4;
+    column-gap: var(--spacing-4);
     border-inline-start: 2px solid $preview-widget-bar-color;
     border-radius: 2px;
     color: $info-plinth-fg-color;
@@ -31,12 +31,12 @@ limitations under the License.
     .mx_LinkPreviewWidget_wrapImageCaption {
         display: flex;
         flex-wrap: wrap;
-        row-gap: $spacing-8;
+        row-gap: var(--spacing-8);
         flex: 1;
 
         .mx_LinkPreviewWidget_image,
         .mx_LinkPreviewWidget_caption {
-            margin-inline-start: $spacing-16;
+            margin-inline-start: var(--spacing-16);
             min-width: 0; /* Prevent blowout */
         }
 
@@ -69,7 +69,7 @@ limitations under the License.
         }
 
         .mx_LinkPreviewWidget_description {
-            margin-top: $spacing-8;
+            margin-top: var(--spacing-8);
             word-wrap: break-word;
             -webkit-line-clamp: 3;
         }
diff --git a/res/css/views/rooms/_ReplyPreview.pcss b/res/css/views/rooms/_ReplyPreview.pcss
index 95a061c4042..192cbae7d4f 100644
--- a/res/css/views/rooms/_ReplyPreview.pcss
+++ b/res/css/views/rooms/_ReplyPreview.pcss
@@ -25,8 +25,8 @@ limitations under the License.
         border-bottom: 1px solid $primary-hairline-color;
         display: flex;
         flex-flow: column;
-        row-gap: $spacing-8;
-        padding: $spacing-8 $spacing-8 0 0;
+        row-gap: var(--spacing-8);
+        padding: var(--spacing-8) var(--spacing-8) 0 0;
 
         .mx_ReplyPreview_header {
             display: flex;
diff --git a/res/css/views/rooms/_RoomCallBanner.pcss b/res/css/views/rooms/_RoomCallBanner.pcss
index ec26807bb18..c04e5f63a2b 100644
--- a/res/css/views/rooms/_RoomCallBanner.pcss
+++ b/res/css/views/rooms/_RoomCallBanner.pcss
@@ -21,7 +21,7 @@ limitations under the License.
     align-items: center;
 
     box-sizing: border-box;
-    padding: $spacing-12 $spacing-16;
+    padding: var(--spacing-12) var(--spacing-16);
 
     color: $primary-content;
     background-color: $system;
@@ -37,7 +37,7 @@ limitations under the License.
 .mx_RoomCallBanner_label {
     color: $primary-content;
     font-weight: 600;
-    padding-right: $spacing-8;
+    padding-right: var(--spacing-8);
 
     &::before {
         display: inline-block;
diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
index 75f2ee31d01..b1afccea1c2 100644
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -57,7 +57,7 @@ limitations under the License.
     }
 
     .mx_BetaCard_betaPill {
-        margin-right: $spacing-8;
+        margin-right: var(--spacing-8);
     }
 }
 
diff --git a/res/css/views/rooms/_RoomPreviewCard.pcss b/res/css/views/rooms/_RoomPreviewCard.pcss
index b7acfb1a321..fad8e07de1f 100644
--- a/res/css/views/rooms/_RoomPreviewCard.pcss
+++ b/res/css/views/rooms/_RoomPreviewCard.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_RoomPreviewCard {
-    padding: $spacing-32 $spacing-24 !important; /* Override SpaceRoomView's default padding */
+    padding: var(--spacing-32) var(--spacing-24) !important; /* Override SpaceRoomView's default padding */
     margin: auto;
     flex-grow: 1;
     max-width: 480px;
@@ -29,9 +29,9 @@ limitations under the License.
         font-weight: $font-semi-bold;
         line-height: $font-24px;
         color: $primary-content;
-        margin-top: $spacing-24;
+        margin-top: var(--spacing-24);
         position: relative;
-        padding-left: calc(20px + $spacing-8);
+        padding-left: calc(20px + var(--spacing-8));
 
         &::before {
             content: "";
@@ -50,11 +50,11 @@ limitations under the License.
     .mx_RoomPreviewCard_inviter {
         display: flex;
         align-items: center;
-        margin-bottom: $spacing-20;
+        margin-bottom: var(--spacing-20);
         font-size: $font-15px;
 
         > div {
-            margin-left: $spacing-8;
+            margin-left: var(--spacing-8);
 
             .mx_RoomPreviewCard_inviter_name {
                 line-height: $font-18px;
@@ -103,30 +103,30 @@ limitations under the License.
         /* XXX Remove this when video rooms leave beta */
         .mx_BetaCard_betaPill {
             position: absolute;
-            inset-block-start: $spacing-32;
-            inset-inline-end: $spacing-24;
+            inset-block-start: var(--spacing-32);
+            inset-inline-end: var(--spacing-24);
         }
     }
 
     h1.mx_RoomPreviewCard_name {
-        margin: $spacing-16 0 !important; /* Override SpaceRoomView's default margins */
+        margin: var(--spacing-16) 0 !important; /* Override SpaceRoomView's default margins */
     }
 
     .mx_RoomPreviewCard_topic {
         line-height: $font-22px;
-        margin-top: $spacing-16;
+        margin-top: var(--spacing-16);
         max-height: 160px;
         overflow-y: auto;
     }
 
     .mx_FacePile {
-        margin-top: $spacing-20;
+        margin-top: var(--spacing-20);
     }
 
     .mx_RoomPreviewCard_joinButtons {
-        margin-top: $spacing-20;
+        margin-top: var(--spacing-20);
         display: flex;
-        gap: $spacing-20;
+        gap: var(--spacing-20);
 
         .mx_AccessibleButton {
             max-width: 200px;
diff --git a/res/css/views/rooms/_ThreadSummary.pcss b/res/css/views/rooms/_ThreadSummary.pcss
index b4e7dd5f3c6..23cbd1a511e 100644
--- a/res/css/views/rooms/_ThreadSummary.pcss
+++ b/res/css/views/rooms/_ThreadSummary.pcss
@@ -27,7 +27,7 @@ limitations under the License.
 
 .mx_ThreadSummary,
 .mx_ThreadSummary_icon {
-    margin-top: $spacing-8;
+    margin-top: var(--spacing-8);
 }
 
 .mx_ThreadSummary {
@@ -38,7 +38,7 @@ limitations under the License.
     height: 40px;
     position: relative;
     background-color: $system;
-    padding-inline: $spacing-12 $spacing-16;
+    padding-inline: var(--spacing-12) var(--spacing-16);
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -66,7 +66,7 @@ limitations under the License.
             content: "";
             position: absolute;
             top: 50%;
-            right: $spacing-12;
+            right: var(--spacing-12);
             transform: translateY(-50%);
             width: 12px;
             height: 12px;
@@ -111,7 +111,7 @@ limitations under the License.
     }
 
     .mx_ThreadSummary_content {
-        margin-left: $spacing-4;
+        margin-left: var(--spacing-4);
         flex: 1;
     }
 
@@ -127,17 +127,17 @@ limitations under the License.
 }
 
 .mx_ThreadSummary_avatar {
-    margin-inline-end: $spacing-8;
+    margin-inline-end: var(--spacing-8);
 }
 
 .mx_ThreadSummary_icon {
     display: inline-block;
-    margin-bottom: $spacing-8;
+    margin-bottom: var(--spacing-8);
 
     &::before {
         @mixin ThreadSummaryIcon;
         vertical-align: middle;
-        margin-inline-end: $spacing-8;
+        margin-inline-end: var(--spacing-8);
         margin-top: -2px;
     }
 
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index 50f76635983..716ecd5b41e 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -55,7 +55,7 @@ limitations under the License.
         ol {
             margin-top: 0;
             margin-bottom: 0;
-            padding-inline-start: $spacing-28;
+            padding-inline-start: var(--spacing-28);
         }
 
         /* Make list type disc to match rich text editor */
@@ -81,7 +81,7 @@ limitations under the License.
 
             margin-top: 0;
             margin-bottom: 0;
-            padding: $spacing-8 $spacing-12;
+            padding: var(--spacing-8) var(--spacing-12);
 
             background-color: $inlinecode-background-color;
             border: 1px solid $inlinecode-border-color;
@@ -93,7 +93,7 @@ limitations under the License.
             background-color: $inlinecode-background-color;
             border: 1px solid $inlinecode-border-color;
             border-radius: 4px;
-            padding: $spacing-2;
+            padding: var(--spacing-2);
 
             &:empty {
                 border: unset;
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
index b5c1c04d576..0ff7a0c9bd5 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_LinkModal {
-    padding: $spacing-32;
+    padding: var(--spacing-32);
     max-width: 600px;
     height: 341px;
     box-sizing: border-box;
@@ -26,7 +26,7 @@ limitations under the License.
         display: flex;
         flex-direction: column;
         flex: 1;
-        gap: $spacing-8;
+        gap: var(--spacing-8);
         margin-top: 7px;
 
         .mx_LinkModal_Field {
diff --git a/res/css/views/settings/_DevicesPanel.pcss b/res/css/views/settings/_DevicesPanel.pcss
index 8a7842d4d0f..b3f27e560c8 100644
--- a/res/css/views/settings/_DevicesPanel.pcss
+++ b/res/css/views/settings/_DevicesPanel.pcss
@@ -56,7 +56,7 @@ limitations under the License.
     align-items: flex-start;
     margin-block: 10px;
     min-height: 35px;
-    padding: 0 $spacing-8;
+    padding: 0 var(--spacing-8);
 
     .mx_DeviceTypeIcon {
         /* hide the new device type in legacy device list
@@ -67,7 +67,7 @@ limitations under the License.
 
 .mx_DevicesPanel_icon {
     margin-left: 0px;
-    margin-right: $spacing-16;
+    margin-right: var(--spacing-16);
     margin-top: 2px;
 }
 
diff --git a/res/css/views/settings/_FontScalingPanel.pcss b/res/css/views/settings/_FontScalingPanel.pcss
index 9aadf3497d1..5f3b3f2a022 100644
--- a/res/css/views/settings/_FontScalingPanel.pcss
+++ b/res/css/views/settings/_FontScalingPanel.pcss
@@ -27,7 +27,7 @@ limitations under the License.
 
         border: 1px solid $quinary-content;
         border-radius: 10px;
-        padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
+        padding: 0 var(--spacing-16) var(--FontScalingPanel_preview-padding-block) var(--spacing-16);
         pointer-events: none;
         display: flow-root;
 
@@ -47,12 +47,12 @@ limitations under the License.
     .mx_FontScalingPanel_fontSlider {
         display: flex;
         align-items: center;
-        padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */
+        padding: 15px var(--spacing-20) 35px; /* TODO: Use spacing variables */
         background: rgba($quinary-content, 0.2);
         border-radius: 10px;
         font-size: $font-10px;
-        margin-top: $spacing-24;
-        margin-bottom: $spacing-24;
+        margin-top: var(--spacing-24);
+        margin-bottom: var(--spacing-24);
 
         .mx_FontScalingPanel_fontSlider_smallText,
         .mx_FontScalingPanel_fontSlider_largeText {
@@ -61,12 +61,12 @@ limitations under the License.
 
         .mx_FontScalingPanel_fontSlider_smallText {
             font-size: $font-15px;
-            padding-inline-end: $spacing-20;
+            padding-inline-end: var(--spacing-20);
         }
 
         .mx_FontScalingPanel_fontSlider_largeText {
             font-size: $font-18px;
-            padding-inline-start: $spacing-20;
+            padding-inline-start: var(--spacing-20);
         }
     }
 
diff --git a/res/css/views/settings/_IntegrationManager.pcss b/res/css/views/settings/_IntegrationManager.pcss
index 505ccf86c24..9356d076965 100644
--- a/res/css/views/settings/_IntegrationManager.pcss
+++ b/res/css/views/settings/_IntegrationManager.pcss
@@ -33,7 +33,7 @@ limitations under the License.
     }
 
     h3 {
-        margin-block: $spacing-20;
+        margin-block: var(--spacing-20);
     }
 
     .mx_IntegrationManager_loading,
diff --git a/res/css/views/settings/_Notifications.pcss b/res/css/views/settings/_Notifications.pcss
index 45a5b4529d8..3556d11a67a 100644
--- a/res/css/views/settings/_Notifications.pcss
+++ b/res/css/views/settings/_Notifications.pcss
@@ -20,7 +20,7 @@ limitations under the License.
     grid-template-columns: auto repeat(3, 62px);
     place-items: center center;
     grid-gap: 8px;
-    margin-top: $spacing-40;
+    margin-top: var(--spacing-40);
 
     /* Override StyledRadioButton default styles */
     .mx_StyledRadioButton {
@@ -67,7 +67,7 @@ limitations under the License.
     justify-self: start;
     padding-right: 30%;
     // collapse half of the grid-gap
-    margin-top: -$spacing-4;
+    margin-top: calc(-1 * var(--spacing-4));
 }
 
 .mx_UserNotifSettings {
diff --git a/res/css/views/settings/_ProfileSettings.pcss b/res/css/views/settings/_ProfileSettings.pcss
index 86b6835dc81..e3ea13a7efe 100644
--- a/res/css/views/settings/_ProfileSettings.pcss
+++ b/res/css/views/settings/_ProfileSettings.pcss
@@ -45,14 +45,14 @@ limitations under the License.
             }
 
             .mx_ProfileSettings_profile_controls_userId {
-                margin-inline-end: $spacing-20;
+                margin-inline-end: var(--spacing-20);
             }
         }
     }
 
     .mx_ProfileSettings_buttons {
         margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */
-        margin-bottom: $spacing-28;
+        margin-bottom: var(--spacing-28);
 
         > .mx_AccessibleButton_kind_link {
             font-size: $font-14px;
diff --git a/res/css/views/settings/_SetIntegrationManager.pcss b/res/css/views/settings/_SetIntegrationManager.pcss
index 30feddb0433..1740f357a99 100644
--- a/res/css/views/settings/_SetIntegrationManager.pcss
+++ b/res/css/views/settings/_SetIntegrationManager.pcss
@@ -23,7 +23,7 @@ limitations under the License.
             display: flex;
             align-items: center;
             flex-wrap: wrap;
-            column-gap: $spacing-4;
+            column-gap: var(--spacing-4);
 
             .mx_SettingsTab_heading,
             .mx_SettingsTab_subheading {
diff --git a/res/css/views/settings/tabs/_SettingsTab.pcss b/res/css/views/settings/tabs/_SettingsTab.pcss
index 544b5c623b2..6c0b20b4412 100644
--- a/res/css/views/settings/tabs/_SettingsTab.pcss
+++ b/res/css/views/settings/tabs/_SettingsTab.pcss
@@ -49,7 +49,7 @@ limitations under the License.
     display: block;
     font-weight: 600;
     color: $primary-content;
-    margin-top: $spacing-12;
+    margin-top: var(--spacing-12);
     margin-bottom: 10px; /* TODO: Use a spacing variable */
     margin-right: 100px; /* TODO: Use a spacing variable */
 }
@@ -67,7 +67,7 @@ limitations under the License.
 .mx_SettingsTab_section {
     $end-gutter: 80px;
 
-    margin-bottom: $spacing-24;
+    margin-bottom: var(--spacing-24);
 
     .mx_SettingsFlag {
         margin-inline-end: $end-gutter;
@@ -95,13 +95,13 @@ limitations under the License.
 }
 
 .mx_SettingsTab_toggleWithDescription {
-    margin-top: $spacing-24;
+    margin-top: var(--spacing-24);
 }
 
 .mx_SettingsTab_sections {
     display: grid;
     grid-template-columns: 1fr;
-    grid-gap: $spacing-32;
+    grid-gap: var(--spacing-32);
 
-    padding: $spacing-16 0;
+    padding: var(--spacing-16) 0;
 }
diff --git a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
index cf3e16bc044..e67182a4eed 100644
--- a/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
+++ b/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
@@ -16,12 +16,12 @@ limitations under the License.
 
 .mx_SecurityRoomSettingsTab {
     .mx_SettingsTab_showAdvanced {
-        margin-bottom: $spacing-16;
+        margin-bottom: var(--spacing-16);
     }
 
     .mx_SecurityRoomSettingsTab_warning {
         display: flex;
         align-items: center;
-        column-gap: $spacing-4;
+        column-gap: var(--spacing-4);
     }
 }
diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
index 658f91ed4f9..b4460d474ec 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.pcss
@@ -18,7 +18,7 @@ limitations under the License.
     --AppearanceUserSettingsTab_Field-margin-inline-start: calc($font-16px + 10px);
 
     .mx_SettingsTab_subsectionText {
-        margin-block: $spacing-12 $spacing-32;
+        margin-block: var(--spacing-12) var(--spacing-32);
         color: $primary-content; /* Same as mx_SettingsTab */
     }
 
@@ -28,7 +28,7 @@ limitations under the License.
 
     .mx_AppearanceUserSettingsTab_Advanced {
         .mx_Checkbox {
-            margin-block: $spacing-16;
+            margin-block: var(--spacing-16);
         }
 
         .mx_AppearanceUserSettingsTab_systemFont {
diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
index c03de9f36ce..af875c3cb34 100644
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss
@@ -22,10 +22,10 @@ limitations under the License.
     }
 
     details {
-        margin: $spacing-16 auto;
+        margin: var(--spacing-16) auto;
 
         summary {
-            margin-bottom: $spacing-16;
+            margin-bottom: var(--spacing-16);
         }
     }
 }
diff --git a/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
index aa65e6d4943..b600f887690 100644
--- a/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
+++ b/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
@@ -24,8 +24,8 @@ limitations under the License.
     }
 
     .mx_KeyboardShortcut_shortcutRow {
-        column-gap: $spacing-8;
-        margin-bottom: $spacing-4;
+        column-gap: var(--spacing-8);
+        margin-bottom: var(--spacing-4);
 
         /* TODO: Use flexbox */
         &:last-of-type {
diff --git a/res/css/views/toasts/_IncomingCallToast.pcss b/res/css/views/toasts/_IncomingCallToast.pcss
index 4d879f4f958..ebda8d9f48b 100644
--- a/res/css/views/toasts/_IncomingCallToast.pcss
+++ b/res/css/views/toasts/_IncomingCallToast.pcss
@@ -31,7 +31,7 @@ limitations under the License.
         overflow: hidden;
 
         .mx_IncomingCallToast_info {
-            margin-bottom: $spacing-16;
+            margin-bottom: var(--spacing-16);
 
             .mx_IncomingCallToast_room {
                 display: inline-block;
@@ -41,19 +41,19 @@ limitations under the License.
                 line-height: $font-24px;
 
                 /* Prevent overlap with the close button */
-                width: calc(100% - $closeButtonSize - 2 * $spacing-4);
+                width: calc(100% - $closeButtonSize - 2 * var(--spacing-4));
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
 
-                margin-bottom: $spacing-4;
+                margin-bottom: var(--spacing-4);
             }
 
             .mx_IncomingCallToast_message {
                 font-size: $font-12px;
                 line-height: $font-15px;
 
-                margin-bottom: $spacing-4;
+                margin-bottom: var(--spacing-4);
             }
 
             .mx_LiveContentSummary {
@@ -70,15 +70,15 @@ limitations under the License.
         .mx_IncomingCallToast_joinButton {
             position: relative;
 
-            bottom: $spacing-4;
-            right: $spacing-4;
+            bottom: var(--spacing-4);
+            right: var(--spacing-4);
 
             align-self: flex-end;
 
             box-sizing: border-box;
             min-width: 120px;
 
-            padding: $spacing-4 0;
+            padding: var(--spacing-4) 0;
 
             line-height: $font-24px;
         }
@@ -87,8 +87,8 @@ limitations under the License.
     .mx_IncomingCallToast_closeButton {
         position: absolute;
 
-        top: $spacing-4;
-        right: $spacing-4;
+        top: var(--spacing-4);
+        right: var(--spacing-4);
 
         display: flex;
         height: $closeButtonSize;
diff --git a/res/css/views/user-onboarding/_UserOnboardingButton.pcss b/res/css/views/user-onboarding/_UserOnboardingButton.pcss
index 3eba86045ac..5e172fb1dec 100644
--- a/res/css/views/user-onboarding/_UserOnboardingButton.pcss
+++ b/res/css/views/user-onboarding/_UserOnboardingButton.pcss
@@ -20,8 +20,8 @@ limitations under the License.
     align-content: stretch;
     align-items: stretch;
     border-radius: 8px;
-    margin: $spacing-8 $spacing-8 0;
-    padding: $spacing-12;
+    margin: var(--spacing-8) var(--spacing-8) 0;
+    padding: var(--spacing-12);
 
     &.mx_UserOnboardingButton_selected,
     &:hover,
@@ -74,7 +74,7 @@ limitations under the License.
 
     .mx_ProgressBar {
         width: auto;
-        margin-top: $spacing-8;
+        margin-top: var(--spacing-8);
         background: $background;
     }
 
diff --git a/res/css/views/user-onboarding/_UserOnboardingHeader.pcss b/res/css/views/user-onboarding/_UserOnboardingHeader.pcss
index 0059f1d7ff6..6abe850af06 100644
--- a/res/css/views/user-onboarding/_UserOnboardingHeader.pcss
+++ b/res/css/views/user-onboarding/_UserOnboardingHeader.pcss
@@ -17,10 +17,10 @@ limitations under the License.
 .mx_UserOnboardingHeader {
     display: flex;
     flex-direction: row;
-    padding: $spacing-32;
+    padding: var(--spacing-32);
     border-radius: 16px;
     background: $system;
-    gap: $spacing-64;
+    gap: var(--spacing-64);
 
     animation-delay: 1500ms;
     animation-duration: 300ms;
@@ -30,7 +30,7 @@ limitations under the License.
     will-change: opacity, transform;
 
     @media (max-width: 1280px) {
-        margin: $spacing-32;
+        margin: var(--spacing-32);
     }
 
     .mx_UserOnboardingHeader_dot {
@@ -44,7 +44,7 @@ limitations under the License.
         flex-shrink: 1;
         flex-grow: 1;
         min-width: 0;
-        gap: $spacing-24;
+        gap: var(--spacing-24);
         margin-right: auto;
 
         p {
@@ -54,7 +54,7 @@ limitations under the License.
         .mx_AccessibleButton {
             margin-top: auto;
             align-self: flex-start;
-            padding: $spacing-12 $spacing-24;
+            padding: var(--spacing-12) var(--spacing-24);
         }
     }
 
@@ -63,13 +63,13 @@ limitations under the License.
         flex-shrink: 1;
         flex-grow: 1;
         align-self: center;
-        height: calc(100% + $spacing-64 + $spacing-64);
+        height: calc(100% + var(--spacing-64) + var(--spacing-64));
         aspect-ratio: 4 / 3;
         object-fit: contain;
         min-width: 0;
         min-height: 0;
-        margin-top: -$spacing-64;
-        margin-bottom: -$spacing-64;
+        margin-top: calc(-1 * var(--spacing-64));
+        margin-bottom: calc(-1 * var(--spacing-64));
 
         animation-delay: 1500ms;
         animation-duration: 300ms;
diff --git a/res/css/views/user-onboarding/_UserOnboardingList.pcss b/res/css/views/user-onboarding/_UserOnboardingList.pcss
index f00906888ac..e36ce3bf8d2 100644
--- a/res/css/views/user-onboarding/_UserOnboardingList.pcss
+++ b/res/css/views/user-onboarding/_UserOnboardingList.pcss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_UserOnboardingList {
     display: flex;
     flex-direction: column;
-    margin: 0 $spacing-32;
+    margin: 0 var(--spacing-32);
 
     animation-duration: 300ms;
     animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
@@ -43,7 +43,7 @@ limitations under the License.
 
         .mx_ProgressBar {
             width: auto;
-            margin-top: $spacing-16;
+            margin-top: var(--spacing-16);
             height: 16px;
 
             @mixin ProgressBarBorderRadius 16px;
@@ -56,10 +56,10 @@ limitations under the License.
 
         appearance: none;
         list-style: none;
-        margin: $spacing-32 0 0;
+        margin: var(--spacing-32) 0 0;
         padding: 0;
 
-        grid-gap: $spacing-24;
+        grid-gap: var(--spacing-24);
     }
 }
 
diff --git a/res/css/views/user-onboarding/_UserOnboardingPage.pcss b/res/css/views/user-onboarding/_UserOnboardingPage.pcss
index f2c778d8fc0..8536d2bc68a 100644
--- a/res/css/views/user-onboarding/_UserOnboardingPage.pcss
+++ b/res/css/views/user-onboarding/_UserOnboardingPage.pcss
@@ -26,10 +26,10 @@ limitations under the License.
     flex-direction: column;
     box-sizing: border-box;
 
-    gap: $spacing-64;
-    padding: $spacing-64 100px;
+    gap: var(--spacing-64);
+    padding: var(--spacing-64) 100px;
 
     @media (max-width: 1280px) {
-        padding: $spacing-48 $spacing-32;
+        padding: var(--spacing-48) var(--spacing-32);
     }
 }
diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss
index 72c5dc1839a..d1cf2657cd2 100644
--- a/res/css/views/voip/_CallView.pcss
+++ b/res/css/views/voip/_CallView.pcss
@@ -43,7 +43,7 @@ limitations under the License.
     .mx_CallView_lobby {
         min-height: 0;
         flex-grow: 1;
-        padding: $spacing-12;
+        padding: var(--spacing-12);
         color: $call-primary-content;
         background-color: $call-background;
 
@@ -54,11 +54,11 @@ limitations under the License.
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        gap: $spacing-32;
+        gap: var(--spacing-32);
 
         .mx_FacePile {
             width: fit-content;
-            margin: $spacing-8 auto 0;
+            margin: var(--spacing-8) auto 0;
         }
 
         .mx_CallView_preview {
@@ -77,7 +77,7 @@ limitations under the License.
             align-items: center;
 
             .mx_BaseAvatar {
-                margin: $spacing-20;
+                margin: var(--spacing-20);
 
                 /* Override the explicit dimensions on the element so that this gets sized responsively */
                 width: unset !important;
@@ -108,7 +108,7 @@ limitations under the License.
 
                 display: flex;
                 justify-content: center;
-                gap: $spacing-24;
+                gap: var(--spacing-24);
 
                 .mx_CallView_deviceButtonWrapper {
                     position: relative;
diff --git a/res/css/views/voip/_LegacyCallPreview.pcss b/res/css/views/voip/_LegacyCallPreview.pcss
index a7397471952..45915b88f3b 100644
--- a/res/css/views/voip/_LegacyCallPreview.pcss
+++ b/res/css/views/voip/_LegacyCallPreview.pcss
@@ -18,7 +18,7 @@ limitations under the License.
     align-items: flex-end;
     display: flex;
     flex-direction: column;
-    gap: $spacing-16;
+    gap: var(--spacing-16);
     left: 0;
     position: fixed;
     top: 0;
diff --git a/res/css/voice-broadcast/atoms/_LiveBadge.pcss b/res/css/voice-broadcast/atoms/_LiveBadge.pcss
index eb0dbd8e4b3..ba54597654c 100644
--- a/res/css/voice-broadcast/atoms/_LiveBadge.pcss
+++ b/res/css/voice-broadcast/atoms/_LiveBadge.pcss
@@ -22,7 +22,7 @@ limitations under the License.
     display: inline-flex;
     font-size: $font-12px;
     font-weight: $font-semi-bold;
-    gap: $spacing-4;
+    gap: var(--spacing-4);
     padding: 2px 4px;
 }
 
diff --git a/res/css/voice-broadcast/atoms/_PlaybackControlButton.pcss b/res/css/voice-broadcast/atoms/_PlaybackControlButton.pcss
index fd2c3ad73c5..7036a7ec340 100644
--- a/res/css/voice-broadcast/atoms/_PlaybackControlButton.pcss
+++ b/res/css/voice-broadcast/atoms/_PlaybackControlButton.pcss
@@ -21,6 +21,6 @@ limitations under the License.
     display: flex;
     height: 32px;
     justify-content: center;
-    margin-bottom: $spacing-8;
+    margin-bottom: var(--spacing-8);
     width: 32px;
 }
diff --git a/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss b/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss
index a30beb27b6a..7eab30d59b7 100644
--- a/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss
+++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss
@@ -14,9 +14,9 @@ limitations under the License.
 .mx_VoiceBroadcastHeader {
     align-items: flex-start;
     display: flex;
-    gap: $spacing-8;
+    gap: var(--spacing-8);
     line-height: 20px;
-    margin-bottom: $spacing-16;
+    margin-bottom: var(--spacing-16);
     min-width: 0;
 }
 
@@ -46,7 +46,7 @@ limitations under the License.
     color: $secondary-content;
     font-size: $font-12px;
     display: flex;
-    gap: $spacing-4;
+    gap: var(--spacing-4);
 
     .mx_Spinner {
         flex: 0 0 14px;
diff --git a/res/css/voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss b/res/css/voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss
index bf2e535096e..c4c4a93dabd 100644
--- a/res/css/voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss
+++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss
@@ -18,7 +18,7 @@ limitations under the License.
     align-items: center;
     color: $alert;
     display: flex;
-    gap: $spacing-12;
+    gap: var(--spacing-12);
 
     svg path {
         fill: $alert;
diff --git a/res/css/voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss b/res/css/voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss
index 570a30e6f6f..a024212ab19 100644
--- a/res/css/voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss
+++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss
@@ -18,5 +18,5 @@ limitations under the License.
     align-items: center;
     color: $alert;
     display: flex;
-    gap: $spacing-4;
+    gap: var(--spacing-4);
 }
diff --git a/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss b/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss
index cc53c674e56..5b2cd4eb1be 100644
--- a/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss
+++ b/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss
@@ -20,7 +20,7 @@ limitations under the License.
     color: $secondary-content;
     display: inline-block;
     font-size: $font-12px;
-    padding: $spacing-12;
+    padding: var(--spacing-12);
     width: 271px;
 
     .mx_Clock {
@@ -35,7 +35,7 @@ limitations under the License.
 
 .mx_VoiceBroadcastBody--small {
     display: flex;
-    gap: $spacing-8;
+    gap: var(--spacing-8);
     width: 192px;
 
     .mx_VoiceBroadcastHeader {
@@ -55,15 +55,15 @@ limitations under the License.
     background-color: $quinary-content;
     border: 0;
     height: 1px;
-    margin: $spacing-12 0;
+    margin: var(--spacing-12) 0;
 }
 
 .mx_VoiceBroadcastBody_controls {
     align-items: center;
     display: flex;
-    gap: $spacing-32;
+    gap: var(--spacing-32);
     justify-content: center;
-    margin-bottom: $spacing-8;
+    margin-bottom: var(--spacing-8);
 }
 
 .mx_VoiceBroadcastBody_timerow {
@@ -73,7 +73,7 @@ limitations under the License.
 
 .mx_AccessibleButton.mx_VoiceBroadcastBody_blockButton {
     display: flex;
-    gap: $spacing-8;
+    gap: var(--spacing-8);
 }
 
 .mx_VoiceBroadcastBody__small-close {