diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 50ba7431b..f79ff8297 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -26,7 +26,7 @@
 // null by default, thus nothing is generated.
 
 :root {
-  font-size: $font-size-root;
+  font-size: var(--root-font-size);
 
   @if $enable-smooth-scroll {
     @media (prefers-reduced-motion: no-preference) {
@@ -45,13 +45,13 @@
 
 body {
   margin: 0; // 1
-  font-family: $font-family-base;
-  @include font-size($font-size-base);
+  font-family: var(--bs-body-font);
+  @include font-size(var(--bs-body-font-size));
   font-weight: $font-weight-base;
   line-height: $line-height-base;
-  color: $body-color;
+  color: var(--bs-body-color);
   text-align: $body-text-align;
-  background-color: $body-bg; // 2
+  background-color: var(--bs-body-bg); // 2
   -webkit-text-size-adjust: 100%; // 3
   -webkit-tap-highlight-color: rgba($black, 0); // 4
 }
diff --git a/scss/_root.scss b/scss/_root.scss
index 768d6343f..aeb1b372b 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -4,6 +4,10 @@
     --#{$variable-prefix}#{$color}: #{$value};
   }
 
+  @each $color, $value in $grays {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
   @each $color, $value in $theme-colors {
     --#{$variable-prefix}#{$color}: #{$value};
   }
@@ -13,4 +17,22 @@
   --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
   --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
   --#{$variable-prefix}gradient: #{$gradient};
+
+  // Root and body
+  --#{$variable-prefix}root-font-size: #{$font-size-root};
+  --#{$variable-prefix}body-font: #{$font-family-base};
+  --#{$variable-prefix}body-font-size: #{$font-size-base};
+  --#{$variable-prefix}body-color: #{$body-color};
+  --#{$variable-prefix}body-bg: #{$body-bg};
+
+  // Layout
+  --#{$variable-prefix}grid-columns: #{$grid-columns};
+  --#{$variable-prefix}grid-gutter-width: #{$grid-gutter-width};
+
+  // Spacing
+  // TODO: Ideally we'd size these values based on the CSS var instead of the Sass map, so they'd be live updating, but TBD on feasibility
+  --#{$variable-prefix}spacer: #{$spacer};
+  @each $size, $value in $spacers {
+    --#{$variable-prefix}spacer-#{$size}: #{$value};
+  }
 }
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 92bb88ad4..3548cc671 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -2,7 +2,7 @@
 //
 // Generate semantic grid columns with these mixins.
 
-@mixin make-row($gutter: $grid-gutter-width) {
+@mixin make-row($gutter: var(--bs-grid-gutter-width)) {
   --#{$variable-prefix}gutter-x: #{$gutter};
   --#{$variable-prefix}gutter-y: 0;
   display: flex;