diff --git a/dist/css/mixins/index.css b/dist/css/mixins/index.css
new file mode 100644
index 0000000000..293771b28d
--- /dev/null
+++ b/dist/css/mixins/index.css
@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=index.css.map */
diff --git a/dist/css/mixins/index.css.map b/dist/css/mixins/index.css.map
new file mode 100644
index 0000000000..ec9a3d81f7
--- /dev/null
+++ b/dist/css/mixins/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"index.css","sourcesContent":[]}
\ No newline at end of file
diff --git a/dist/css/setup/index.css b/dist/css/setup/index.css
new file mode 100644
index 0000000000..293771b28d
--- /dev/null
+++ b/dist/css/setup/index.css
@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=index.css.map */
diff --git a/dist/css/setup/index.css.map b/dist/css/setup/index.css.map
new file mode 100644
index 0000000000..ec9a3d81f7
--- /dev/null
+++ b/dist/css/setup/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"index.css","sourcesContent":[]}
\ No newline at end of file
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index d69dfd617f..574ef3148a 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -2,7 +2,7 @@
 @use "mixins/border-radius";
 @use "mixins/color-mode";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 //
diff --git a/scss/_alert.scss b/scss/_alert.scss
index 172411f21b..f96aea77ae 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "mixins/border-radius";
-@use "variables";
+@use "setup/variables";
 
 //
 // Base styles
diff --git a/scss/_badge.scss b/scss/_badge.scss
index 802c9629ab..3d6946373e 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -1,6 +1,6 @@
 @use "mixins/border-radius";
 @use "mixins/gradients";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // Base class
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 1a0ad49bf5..17bc4ec977 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -1,6 +1,6 @@
 @use "functions";
 @use "mixins/border-radius";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 .breadcrumb {
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index 9fdba871fb..0a9664c3bb 100644
--- a/scss/_button-group.scss
+++ b/scss/_button-group.scss
@@ -1,6 +1,6 @@
 @use "mixins/border-radius";
 @use "mixins/box-shadow";
-@use "variables";
+@use "setup/variables";
 
 // Make the div behave like a button
 .btn-group,
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 18ad4c6746..c387d9a2ac 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -1,10 +1,9 @@
-@use "functions";
 @use "mixins/border-radius";
 @use "mixins/box-shadow";
 @use "mixins/buttons";
 @use "mixins/gradients";
 @use "mixins/transition";
-@use "variables";
+@use "setup" as *;
 @use "vendor/rfs";
 
 //
@@ -13,77 +12,77 @@
 
 .btn {
   // scss-docs-start btn-css-vars
-  --#{variables.$prefix}btn-padding-x: #{variables.$btn-padding-x};
-  --#{variables.$prefix}btn-padding-y: #{variables.$btn-padding-y};
-  --#{variables.$prefix}btn-font-family: #{variables.$btn-font-family};
-  @include rfs.rfs(variables.$btn-font-size, --#{variables.$prefix}btn-font-size);
-  --#{variables.$prefix}btn-font-weight: #{variables.$btn-font-weight};
-  --#{variables.$prefix}btn-line-height: #{variables.$btn-line-height};
-  --#{variables.$prefix}btn-color: #{variables.$btn-color};
-  --#{variables.$prefix}btn-bg: transparent;
-  --#{variables.$prefix}btn-border-width: #{variables.$btn-border-width};
-  --#{variables.$prefix}btn-border-color: transparent;
-  --#{variables.$prefix}btn-border-radius: #{variables.$btn-border-radius};
-  --#{variables.$prefix}btn-hover-border-color: transparent;
-  --#{variables.$prefix}btn-box-shadow: #{variables.$btn-box-shadow};
-  --#{variables.$prefix}btn-disabled-opacity: #{variables.$btn-disabled-opacity};
-  --#{variables.$prefix}btn-focus-box-shadow: 0 0 0 #{variables.$btn-focus-width} rgba(var(--#{variables.$prefix}btn-focus-shadow-rgb), .5);
+  --#{$prefix}btn-padding-x: #{$btn-padding-x};
+  --#{$prefix}btn-padding-y: #{$btn-padding-y};
+  --#{$prefix}btn-font-family: #{$btn-font-family};
+  @include rfs.rfs($btn-font-size, --#{$prefix}btn-font-size);
+  --#{$prefix}btn-font-weight: #{$btn-font-weight};
+  --#{$prefix}btn-line-height: #{$btn-line-height};
+  --#{$prefix}btn-color: #{$btn-color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-width: #{$btn-border-width};
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-border-radius: #{$btn-border-radius};
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
   // scss-docs-end btn-css-vars
 
   display: inline-block;
-  padding: var(--#{variables.$prefix}btn-padding-y) var(--#{variables.$prefix}btn-padding-x);
-  font-family: var(--#{variables.$prefix}btn-font-family);
-  @include rfs.font-size(var(--#{variables.$prefix}btn-font-size));
-  font-weight: var(--#{variables.$prefix}btn-font-weight);
-  line-height: var(--#{variables.$prefix}btn-line-height);
-  color: var(--#{variables.$prefix}btn-color);
+  padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
+  font-family: var(--#{$prefix}btn-font-family);
+  @include rfs.font-size(var(--#{$prefix}btn-font-size));
+  font-weight: var(--#{$prefix}btn-font-weight);
+  line-height: var(--#{$prefix}btn-line-height);
+  color: var(--#{$prefix}btn-color);
   text-align: center;
-  text-decoration: if(variables.$link-decoration == none, null, none);
-  white-space: variables.$btn-white-space;
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: $btn-white-space;
   vertical-align: middle;
-  cursor: if(variables.$enable-button-pointers, pointer, null);
+  cursor: if($enable-button-pointers, pointer, null);
   user-select: none;
-  border: var(--#{variables.$prefix}btn-border-width) solid var(--#{variables.$prefix}btn-border-color);
-  @include border-radius.border-radius(var(--#{variables.$prefix}btn-border-radius));
-  @include gradients.gradient-bg(var(--#{variables.$prefix}btn-bg));
-  @include box-shadow.box-shadow(var(--#{variables.$prefix}btn-box-shadow));
-  @include transition.transition(variables.$btn-transition);
+  border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
+  @include border-radius.border-radius(var(--#{$prefix}btn-border-radius));
+  @include gradients.gradient-bg(var(--#{$prefix}btn-bg));
+  @include box-shadow.box-shadow(var(--#{$prefix}btn-box-shadow));
+  @include transition.transition($btn-transition);
 
   &:hover {
-    color: var(--#{variables.$prefix}btn-hover-color);
-    text-decoration: if(variables.$link-hover-decoration == underline, none, null);
-    background-color: var(--#{variables.$prefix}btn-hover-bg);
-    border-color: var(--#{variables.$prefix}btn-hover-border-color);
+    color: var(--#{$prefix}btn-hover-color);
+    text-decoration: if($link-hover-decoration == underline, none, null);
+    background-color: var(--#{$prefix}btn-hover-bg);
+    border-color: var(--#{$prefix}btn-hover-border-color);
   }
 
   .btn-check + &:hover {
     // override for the checkbox/radio buttons
-    color: var(--#{variables.$prefix}btn-color);
-    background-color: var(--#{variables.$prefix}btn-bg);
-    border-color: var(--#{variables.$prefix}btn-border-color);
+    color: var(--#{$prefix}btn-color);
+    background-color: var(--#{$prefix}btn-bg);
+    border-color: var(--#{$prefix}btn-border-color);
   }
 
   &:focus-visible {
-    color: var(--#{variables.$prefix}btn-hover-color);
-    @include gradients.gradient-bg(var(--#{variables.$prefix}btn-hover-bg));
-    border-color: var(--#{variables.$prefix}btn-hover-border-color);
+    color: var(--#{$prefix}btn-hover-color);
+    @include gradients.gradient-bg(var(--#{$prefix}btn-hover-bg));
+    border-color: var(--#{$prefix}btn-hover-border-color);
     outline: 0;
     // Avoid using mixin so we can pass custom focus shadow properly
-    @if variables.$enable-shadows {
-      box-shadow: var(--#{variables.$prefix}btn-box-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
     } @else {
-      box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
   }
 
   .btn-check:focus-visible + & {
-    border-color: var(--#{variables.$prefix}btn-hover-border-color);
+    border-color: var(--#{$prefix}btn-hover-border-color);
     outline: 0;
     // Avoid using mixin so we can pass custom focus shadow properly
-    @if variables.$enable-shadows {
-      box-shadow: var(--#{variables.$prefix}btn-box-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
     } @else {
-      box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
   }
 
@@ -92,41 +91,41 @@
   &:first-child:active,
   &.active,
   &.show {
-    color: var(--#{variables.$prefix}btn-active-color);
-    background-color: var(--#{variables.$prefix}btn-active-bg);
+    color: var(--#{$prefix}btn-active-color);
+    background-color: var(--#{$prefix}btn-active-bg);
     // Remove CSS gradients if they're enabled
-    background-image: if(variables.$enable-gradients, none, null);
-    border-color: var(--#{variables.$prefix}btn-active-border-color);
-    @include box-shadow.box-shadow(var(--#{variables.$prefix}btn-active-shadow));
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$prefix}btn-active-border-color);
+    @include box-shadow.box-shadow(var(--#{$prefix}btn-active-shadow));
 
     &:focus-visible {
       // Avoid using mixin so we can pass custom focus shadow properly
-      @if variables.$enable-shadows {
-        box-shadow: var(--#{variables.$prefix}btn-active-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
+      @if $enable-shadows {
+        box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
       } @else {
-        box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
+        box-shadow: var(--#{$prefix}btn-focus-box-shadow);
       }
     }
   }
 
   .btn-check:checked:focus-visible + & {
     // Avoid using mixin so we can pass custom focus shadow properly
-    @if variables.$enable-shadows {
-      box-shadow: var(--#{variables.$prefix}btn-active-shadow), var(--#{variables.$prefix}btn-focus-box-shadow);
+    @if $enable-shadows {
+      box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
     } @else {
-      box-shadow: var(--#{variables.$prefix}btn-focus-box-shadow);
+      box-shadow: var(--#{$prefix}btn-focus-box-shadow);
     }
   }
 
   &:disabled,
   &.disabled,
   fieldset:disabled & {
-    color: var(--#{variables.$prefix}btn-disabled-color);
+    color: var(--#{$prefix}btn-disabled-color);
     pointer-events: none;
-    background-color: var(--#{variables.$prefix}btn-disabled-bg);
-    background-image: if(variables.$enable-gradients, none, null);
-    border-color: var(--#{variables.$prefix}btn-disabled-border-color);
-    opacity: var(--#{variables.$prefix}btn-disabled-opacity);
+    background-color: var(--#{$prefix}btn-disabled-bg);
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--#{$prefix}btn-disabled-border-color);
+    opacity: var(--#{$prefix}btn-disabled-opacity);
     @include box-shadow.box-shadow(none);
   }
 }
@@ -137,25 +136,25 @@
 //
 
 // scss-docs-start btn-variant-loops
-@each $color, $value in variables.$theme-colors {
+@each $color, $value in $theme-colors {
   .btn-#{$color} {
     @if $color == "light" {
       @include buttons.button-variant(
         $value,
         $value,
-        $hover-background: functions.shade-color($value, variables.$btn-hover-bg-shade-amount),
-        $hover-border: functions.shade-color($value, variables.$btn-hover-border-shade-amount),
-        $active-background: functions.shade-color($value, variables.$btn-active-bg-shade-amount),
-        $active-border: functions.shade-color($value, variables.$btn-active-border-shade-amount)
+        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+        $active-background: shade-color($value, $btn-active-bg-shade-amount),
+        $active-border: shade-color($value, $btn-active-border-shade-amount)
       );
     } @else if $color == "dark" {
       @include buttons.button-variant(
         $value,
         $value,
-        $hover-background: functions.tint-color($value, variables.$btn-hover-bg-tint-amount),
-        $hover-border: functions.tint-color($value, variables.$btn-hover-border-tint-amount),
-        $active-background: functions.tint-color($value, variables.$btn-active-bg-tint-amount),
-        $active-border: functions.tint-color($value, variables.$btn-active-border-tint-amount)
+        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+        $active-background: tint-color($value, $btn-active-bg-tint-amount),
+        $active-border: tint-color($value, $btn-active-border-tint-amount)
       );
     } @else {
       @include buttons.button-variant($value, $value);
@@ -163,7 +162,7 @@
   }
 }
 
-@each $color, $value in variables.$theme-colors {
+@each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
     @include buttons.button-outline-variant($value);
   }
@@ -177,35 +176,35 @@
 
 // Make a button look and behave like a link
 .btn-link {
-  --#{variables.$prefix}btn-font-weight: #{variables.$font-weight-normal};
-  --#{variables.$prefix}btn-color: #{variables.$btn-link-color};
-  --#{variables.$prefix}btn-bg: transparent;
-  --#{variables.$prefix}btn-border-color: transparent;
-  --#{variables.$prefix}btn-hover-color: #{variables.$btn-link-hover-color};
-  --#{variables.$prefix}btn-hover-border-color: transparent;
-  --#{variables.$prefix}btn-active-color: #{variables.$btn-link-hover-color};
-  --#{variables.$prefix}btn-active-border-color: transparent;
-  --#{variables.$prefix}btn-disabled-color: #{variables.$btn-link-disabled-color};
-  --#{variables.$prefix}btn-disabled-border-color: transparent;
-  --#{variables.$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
-  --#{variables.$prefix}btn-focus-shadow-rgb: #{variables.$btn-link-focus-shadow-rgb};
+  --#{$prefix}btn-font-weight: #{$font-weight-normal};
+  --#{$prefix}btn-color: #{$btn-link-color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-active-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-active-border-color: transparent;
+  --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
+  --#{$prefix}btn-disabled-border-color: transparent;
+  --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
+  --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
 
-  text-decoration: variables.$link-decoration;
-  @if variables.$enable-gradients {
+  text-decoration: $link-decoration;
+  @if $enable-gradients {
     background-image: none;
   }
 
   &:hover,
   &:focus-visible {
-    text-decoration: variables.$link-hover-decoration;
+    text-decoration: $link-hover-decoration;
   }
 
   &:focus-visible {
-    color: var(--#{variables.$prefix}btn-color);
+    color: var(--#{$prefix}btn-color);
   }
 
   &:hover {
-    color: var(--#{variables.$prefix}btn-hover-color);
+    color: var(--#{$prefix}btn-hover-color);
   }
 
   // No need for an active state here
@@ -217,9 +216,9 @@
 //
 
 .btn-lg {
-  @include buttons.button-size(variables.$btn-padding-y-lg, variables.$btn-padding-x-lg, variables.$btn-font-size-lg, variables.$btn-border-radius-lg);
+  @include buttons.button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
 }
 
 .btn-sm {
-  @include buttons.button-size(variables.$btn-padding-y-sm, variables.$btn-padding-x-sm, variables.$btn-font-size-sm, variables.$btn-border-radius-sm);
+  @include buttons.button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
 }
diff --git a/scss/_card.scss b/scss/_card.scss
index 8897445ee0..19c4085c8d 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -1,7 +1,7 @@
 @use "mixins/border-radius";
 @use "mixins/box-shadow";
 @use "mixins/breakpoints";
-@use "variables";
+@use "setup/variables";
 
 //
 // Base styles
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 3a12313fdd..5a1ba666da 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -2,7 +2,7 @@
 @use "mixins/clearfix";
 @use "mixins/color-mode";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 
 // Notes on the classes:
 //
diff --git a/scss/_close.scss b/scss/_close.scss
index cde2347f71..c8d48c7272 100644
--- a/scss/_close.scss
+++ b/scss/_close.scss
@@ -1,7 +1,7 @@
 @use "functions";
 @use "mixins/border-radius";
 @use "mixins/color-mode";
-@use "variables";
+@use "setup/variables";
 
 // Transparent background and border properties included for button version.
 // iOS requires the button element instead of an anchor tag.
diff --git a/scss/_containers.scss b/scss/_containers.scss
index 628c475c65..d025074a9c 100644
--- a/scss/_containers.scss
+++ b/scss/_containers.scss
@@ -1,6 +1,6 @@
 @use "mixins/breakpoints";
 @use "mixins/container";
-@use "variables";
+@use "setup/variables";
 
 // Container widths
 //
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 74374c39fc..09178b4ba3 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -4,7 +4,7 @@
 @use "mixins/breakpoints";
 @use "mixins/caret";
 @use "mixins/gradients";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // The dropdown wrapper (`<div>`)
diff --git a/scss/_functions.scss b/scss/_functions.scss
index d6f804b562..e69de29bb2 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -1,312 +0,0 @@
-@use "sass:color";
-@use "sass:list";
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-@use "sass:string";
-// @use "variables";
-
-// Bootstrap functions
-//
-// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
-
-// Ascending
-// Used to evaluate Sass maps like our grid breakpoints.
-@mixin assert-ascending($map, $map-name) {
-  $prev-key: null;
-  $prev-num: null;
-  @each $key, $num in $map {
-    @if $prev-num == null or math.unit($num) == "%" or math.unit($prev-num) == "%" {
-      // Do nothing
-    } @else if not math.compatible($prev-num, $num) {
-      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-    } @else if $prev-num >= $num {
-      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-    }
-    $prev-key: $key;
-    $prev-num: $num;
-  }
-}
-
-// Starts at zero
-// Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
-  @if list.length($map) > 0 {
-    $values: map.values($map);
-    $first-value: list.nth($values, 1);
-    @if $first-value != 0 {
-      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
-    }
-  }
-}
-
-// Colors
-@function to-rgb($value) {
-  @return color.red($value), color.green($value), color.blue($value);
-}
-
-// stylelint-disable scss/dollar-variable-pattern
-@function rgba-css-var($identifier, $target) {
-  @if $identifier == "body" and $target == "bg" {
-    @return rgba(var(--#{variables.$prefix}#{$identifier}-bg-rgb), var(--#{variables.$prefix}#{$target}-opacity));
-  } @if $identifier == "body" and $target == "text" {
-    @return rgba(var(--#{variables.$prefix}#{$identifier}-color-rgb), var(--#{variables.$prefix}#{$target}-opacity));
-  } @else {
-    @return rgba(var(--#{variables.$prefix}#{$identifier}-rgb), var(--#{variables.$prefix}#{$target}-opacity));
-  }
-}
-
-@function map-loop($map, $func, $args...) {
-  $_map: ();
-
-  @each $key, $value in $map {
-    // allow to pass the $key and $value of the map as an function argument
-    $_args: ();
-    @each $arg in $args {
-      $_args: list.append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
-    }
-
-    $_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
-  }
-
-  @return $_map;
-}
-// stylelint-enable scss/dollar-variable-pattern
-
-@function varify($list) {
-  $result: null;
-  @each $entry in $list {
-    $result: list.append($result, var(--#{variables.$prefix}#{$entry}), space);
-  }
-  @return $result;
-}
-
-// Internal Bootstrap function to turn maps into its negative variant.
-// It prefixes the keys with `n` and makes the value negative.
-@function negativify-map($map) {
-  $result: ();
-  @each $key, $value in $map {
-    @if $key != 0 {
-      $result: map.merge($result, ("n" + $key: (-$value)));
-    }
-  }
-  @return $result;
-}
-
-// Get multiple keys from a sass map
-@function map-get-multiple($map, $values) {
-  $result: ();
-  @each $key, $value in $map {
-    @if (list.index($values, $key) != null) {
-      $result: map.merge($result, ($key: $value));
-    }
-  }
-  @return $result;
-}
-
-// Merge multiple maps
-@function map-merge-multiple($maps...) {
-  $merged-maps: ();
-
-  @each $map in $maps {
-    $merged-maps: map.merge($merged-maps, $map);
-  }
-  @return $merged-maps;
-}
-
-// Replace `$search` with `$replace` in `$string`
-// Used on our SVG icon backgrounds for custom forms.
-//
-// @author Kitty Giraudel
-// @param {String} $string - Initial string
-// @param {String} $search - Substring to replace
-// @param {String} $replace ('') - New value
-// @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
-  $index: string.index($string, $search);
-
-  @if $index {
-    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
-
-// See https://codepen.io/kevinweber/pen/dXWoRw
-//
-// Requires the use of quotes around data URIs.
-
-@function escape-svg($string) {
-  @if string.index($string, "data:image/svg+xml") {
-    @each $char, $encoded in variables.$escaped-characters {
-      // Do not escape the url brackets
-      @if string.index($string, "url(") == 1 {
-        $string: url("#{str-replace(string.slice($string, 6, -3), $char, $encoded)}");
-      } @else {
-        $string: str-replace($string, $char, $encoded);
-      }
-    }
-  }
-
-  @return $string;
-}
-
-// Color contrast
-// See https://github.com/twbs/bootstrap/pull/30168
-
-// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
-// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
-$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
-
-@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
-  $foregrounds: $color-contrast-light, $color-contrast-dark, variables.$white, variables.$black;
-  $max-ratio: 0;
-  $max-ratio-color: null;
-
-  @each $color in $foregrounds {
-    $contrast-ratio: contrast-ratio($background, $color);
-    @if $contrast-ratio > $min-contrast-ratio {
-      @return $color;
-    } @else if $contrast-ratio > $max-ratio {
-      $max-ratio: $contrast-ratio;
-      $max-ratio-color: $color;
-    }
-  }
-
-  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
-
-  @return $max-ratio-color;
-}
-
-@function contrast-ratio($background, $foreground: variables.$color-contrast-light) {
-  $l1: luminance($background);
-  $l2: luminance(opaque($background, $foreground));
-
-  @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
-}
-
-// Return WCAG2.1 relative luminance
-// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
-// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
-@function luminance($color) {
-  $rgb: (
-    "r": color.red($color),
-    "g": color.green($color),
-    "b": color.blue($color)
-  );
-
-  @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), list.nth($_luminance-list, $value + 1));
-    $rgb: map.merge($rgb, ($name: $value));
-  }
-
-  @return (map.get($rgb, "r") * .2126) + (map.get($rgb, "g") * .7152) + (map.get($rgb, "b") * .0722);
-}
-
-// Return opaque color
-// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
-@function opaque($background, $foreground) {
-  @return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
-}
-
-// mdo-do: Replace tint-color and shade-color with color.adjust(COLOR, $lightness: %).
-
-// scss-docs-start color-functions
-// Tint a color: mix a color with white
-@function tint-color($color, $weight) {
-  @return color.mix(white, $color, $weight);
-}
-
-// Shade a color: mix a color with black
-@function shade-color($color, $weight) {
-  @return color.mix(black, $color, $weight);
-}
-
-// Shade the color if the weight is positive, else tint it
-@function shift-color($color, $weight) {
-  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
-}
-// scss-docs-end color-functions
-
-// Return valid calc
-// @function add($value1, $value2, $return-calc: true) {
-//   @if $value1 == null {
-//     @return $value2;
-//   }
-
-//   @if $value2 == null {
-//     @return $value1;
-//   }
-
-//   @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-//     @return $value1 + $value2;
-//   }
-
-//   @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
-// }
-
-// @function subtract($value1, $value2, $return-calc: true) {
-//   @if $value1 == null and $value2 == null {
-//     @return null;
-//   }
-
-//   @if $value1 == null {
-//     @return -$value2;
-//   }
-
-//   @if $value2 == null {
-//     @return $value1;
-//   }
-
-//   @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-//     @return $value1 - $value2;
-//   }
-
-//   @if type-of($value2) != number {
-//     $value2: unquote("(") + $value2 + unquote(")");
-//   }
-
-//   @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
-// }
-
-@function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: math.abs($dividend);
-  $divisor: math.abs($divisor);
-  @if $dividend == 0 {
-    @return 0;
-  }
-  @if $divisor == 0 {
-    @error "Cannot divide by 0";
-  }
-  $remainder: $dividend;
-  $result: 0;
-  $factor: 10;
-  @while ($remainder > 0 and $precision >= 0) {
-    $quotient: 0;
-    @while ($remainder >= $divisor) {
-      $remainder: $remainder - $divisor;
-      $quotient: $quotient + 1;
-    }
-    $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
-    $remainder: $remainder * 10;
-    $precision: $precision - 1;
-    @if ($precision < 0 and $remainder >= $divisor * 5) {
-      $result: $result + 1;
-    }
-  }
-  $result: $result * $factor * $sign;
-  $dividend-unit: math.unit($dividend);
-  $divisor-unit: math.unit($divisor);
-  $unit-map: (
-    "px": 1px,
-    "rem": 1rem,
-    "em": 1em,
-    "%": 1%
-  );
-  @if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
-    $result: $result * map.get($unit-map, $dividend-unit);
-  }
-  @return $result;
-}
diff --git a/scss/_grid.scss b/scss/_grid.scss
index fa39489bf5..60d5e010ec 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -1,5 +1,5 @@
 @use "mixins/grid";
-@use "variables";
+@use "setup/variables";
 
 // Row
 //
diff --git a/scss/_images.scss b/scss/_images.scss
index 26d627f6de..1ac3e98d3d 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -1,7 +1,7 @@
 @use "mixins/border-radius";
 @use "mixins/box-shadow";
 @use "mixins/image";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // Responsive images (ensure images don't scale beyond their parents)
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 40d95fc196..bbb035a468 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "mixins/border-radius";
 @use "mixins/breakpoints";
-@use "variables";
+@use "setup/variables";
 
 // Base class
 //
diff --git a/scss/_maps.scss b/scss/_maps.scss
index f35e1db918..795f7ca42d 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -2,7 +2,7 @@
 @use "setup/variables" as *;
 @use "setup/functions" as *;
 // @use "functions";
-// @use "variables";
+// @use "setup/variables";
 
 // Re-assigned maps
 //
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 3b39de0d05..a41873fb5e 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -4,7 +4,7 @@
 @use "mixins/box-shadow";
 @use "mixins/breakpoints";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 
 // stylelint-disable function-disallowed-list
 
diff --git a/scss/_nav.scss b/scss/_nav.scss
index d52c1a18ee..23599021fc 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -1,7 +1,7 @@
 @use "mixins/border-radius";
 @use "mixins/gradients";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // Base class
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 50c65b3c4e..3a245912fa 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -7,7 +7,7 @@
 @use "mixins/deprecate";
 @use "mixins/gradients";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // Navbar
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 9a08262cb9..b133522f27 100644
--- a/scss/_offcanvas.scss
+++ b/scss/_offcanvas.scss
@@ -3,7 +3,7 @@
 @use "mixins/box-shadow";
 @use "mixins/breakpoints";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 
 // stylelint-disable function-disallowed-list
 
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index 7295208ec6..5536e05f29 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -3,7 +3,7 @@
 @use "mixins/lists";
 @use "mixins/pagination";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 .pagination {
diff --git a/scss/_placeholders.scss b/scss/_placeholders.scss
index 2bee991b88..b1778368be 100644
--- a/scss/_placeholders.scss
+++ b/scss/_placeholders.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use "setup/variables";
 
 .placeholder {
   display: inline-block;
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 8a37b1038d..6932b2fb11 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -1,7 +1,7 @@
 @use "mixins/border-radius";
 @use "mixins/box-shadow";
 @use "mixins/reset-text";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 .popover {
diff --git a/scss/_progress.scss b/scss/_progress.scss
index 4036fa28e9..4e1230bdd2 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -2,7 +2,7 @@
 @use "mixins/box-shadow";
 @use "mixins/gradients";
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // Disable animation if transitions are disabled
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 85395400ab..498f0f159f 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -1,5 +1,5 @@
 @use "mixins/border-radius";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
diff --git a/scss/_spinners.scss b/scss/_spinners.scss
index 059dff0077..dae065f2b1 100644
--- a/scss/_spinners.scss
+++ b/scss/_spinners.scss
@@ -1,4 +1,4 @@
-@use "variables";
+@use "setup/variables";
 
 //
 // Rotating border
diff --git a/scss/_tables.scss b/scss/_tables.scss
index aa92050ae7..0345a2ca87 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "mixins/breakpoints";
 @use "mixins/table-variants";
-@use "variables";
+@use "setup/variables";
 
 //
 // Basic Bootstrap table
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 93a0f4a71b..bec94f350b 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -1,5 +1,5 @@
 @use "mixins/border-radius";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 .toast {
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index a5e579dc57..9aa065c4c8 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -1,7 +1,7 @@
 @use "mixins/border-radius";
 @use "mixins/deprecate";
 @use "mixins/reset-text";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
 
 // Base class
diff --git a/scss/_transitions.scss b/scss/_transitions.scss
index 3b37c8392f..c536376818 100644
--- a/scss/_transitions.scss
+++ b/scss/_transitions.scss
@@ -1,5 +1,5 @@
 @use "mixins/transition";
-@use "variables";
+@use "setup/variables";
 
 .fade {
   @include transition.transition(variables.$transition-fade);
diff --git a/scss/_type.scss b/scss/_type.scss
index 48f51659bd..d523c481dc 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -1,6 +1,7 @@
 @use "mixins/lists";
-@use "variables";
+@use "setup/variables";
 @use "vendor/rfs";
+@use "reboot";
 
 //
 // Headings
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index fba70c6be1..860e504130 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "functions";
 @use "maps";
-@use "variables";
+@use "setup/variables";
 
 // Utilities
 
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index aa9c6cb510..237b6c4fc8 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -16,14 +16,14 @@
 
 // Layout & components
 @use "root";
-// @use "reboot";
-// @use "type";
-// @use "images";
-// @use "containers";
-// @use "grid";
-// @use "tables";
-// @use "forms";
-// @use "buttons";
+@use "reboot";
+@use "type";
+@use "images";
+@use "containers";
+@use "grid";
+@use "tables";
+@use "forms";
+@use "buttons";
 // @use "transitions";
 // @use "dropdown";
 // @use "button-group";
diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index 7fd032b68a..5ada388bdd 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -1,6 +1,6 @@
 @use "../mixins/border-radius";
 @use "../mixins/transition";
-@use "../variables";
+@use "../setup/variables";
 
 .form-floating {
   position: relative;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 1d8d8a0202..ed1ef8f4e1 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -1,8 +1,7 @@
-@use "../functions";
 @use "../mixins/border-radius";
 @use "../mixins/color-mode";
 @use "../mixins/transition";
-@use "../variables";
+@use "../setup" as *;
 
 //
 // Check/radio
@@ -10,101 +9,101 @@
 
 .form-check {
   display: block;
-  min-height: variables.$form-check-min-height;
-  padding-left: variables.$form-check-padding-start;
-  margin-bottom: variables.$form-check-margin-bottom;
+  min-height: $form-check-min-height;
+  padding-left: $form-check-padding-start;
+  margin-bottom: $form-check-margin-bottom;
 
   .form-check-input {
     float: left;
-    margin-left: variables.$form-check-padding-start * -1;
+    margin-left: $form-check-padding-start * -1;
   }
 }
 
 .form-check-reverse {
-  padding-right: variables.$form-check-padding-start;
+  padding-right: $form-check-padding-start;
   padding-left: 0;
   text-align: right;
 
   .form-check-input {
     float: right;
-    margin-right: variables.$form-check-padding-start * -1;
+    margin-right: $form-check-padding-start * -1;
     margin-left: 0;
   }
 }
 
 .form-check-input {
-  --#{variables.$prefix}form-check-bg: #{variables.$form-check-input-bg};
+  --#{$prefix}form-check-bg: #{$form-check-input-bg};
 
   flex-shrink: 0;
-  width: variables.$form-check-input-width;
-  height: variables.$form-check-input-width;
-  margin-top: (variables.$line-height-base - variables.$form-check-input-width) * .5; // line-height minus check height
+  width: $form-check-input-width;
+  height: $form-check-input-width;
+  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
   vertical-align: top;
   appearance: none;
-  background-color: var(--#{variables.$prefix}form-check-bg);
-  background-image: var(--#{variables.$prefix}form-check-bg-image);
+  background-color: var(--#{$prefix}form-check-bg);
+  background-image: var(--#{$prefix}form-check-bg-image);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
-  border: variables.$form-check-input-border;
+  border: $form-check-input-border;
   print-color-adjust: exact; // Keep themed appearance for print
-  @include transition.transition(variables.$form-check-transition);
+  @include transition.transition($form-check-transition);
 
   &[type="checkbox"] {
-    @include border-radius.border-radius(variables.$form-check-input-border-radius);
+    @include border-radius.border-radius($form-check-input-border-radius);
   }
 
   &[type="radio"] {
     // stylelint-disable-next-line property-disallowed-list
-    border-radius: variables.$form-check-radio-border-radius;
+    border-radius: $form-check-radio-border-radius;
   }
 
   &:active {
-    filter: variables.$form-check-input-active-filter;
+    filter: $form-check-input-active-filter;
   }
 
   &:focus {
-    border-color: variables.$form-check-input-focus-border;
+    border-color: $form-check-input-focus-border;
     outline: 0;
-    box-shadow: variables.$form-check-input-focus-box-shadow;
+    box-shadow: $form-check-input-focus-box-shadow;
   }
 
   &:checked {
-    background-color: variables.$form-check-input-checked-bg-color;
-    border-color: variables.$form-check-input-checked-border-color;
+    background-color: $form-check-input-checked-bg-color;
+    border-color: $form-check-input-checked-border-color;
 
     &[type="checkbox"] {
-      @if variables.$enable-gradients {
-        --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-checked-bg-image)}, var(--#{variables.$prefix}gradient);
+      @if $enable-gradients {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-checked-bg-image)};
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
       }
     }
 
     &[type="radio"] {
-      @if variables.$enable-gradients {
-        --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-radio-checked-bg-image)}, var(--#{variables.$prefix}gradient);
+      @if $enable-gradients {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-radio-checked-bg-image)};
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
       }
     }
   }
 
   &[type="checkbox"]:indeterminate {
-    background-color: variables.$form-check-input-indeterminate-bg-color;
-    border-color: variables.$form-check-input-indeterminate-border-color;
+    background-color: $form-check-input-indeterminate-bg-color;
+    border-color: $form-check-input-indeterminate-border-color;
 
-    @if variables.$enable-gradients {
-      --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-indeterminate-bg-image)}, var(--#{variables.$prefix}gradient);
+    @if $enable-gradients {
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
     } @else {
-      --#{variables.$prefix}form-check-bg-image: #{functions.escape-svg(variables.$form-check-input-indeterminate-bg-image)};
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
     }
   }
 
   &:disabled {
     pointer-events: none;
     filter: none;
-    opacity: variables.$form-check-input-disabled-opacity;
+    opacity: $form-check-input-disabled-opacity;
   }
 
   // Use disabled attribute in addition of :disabled pseudo-class
@@ -113,14 +112,14 @@
   &:disabled {
     ~ .form-check-label {
       cursor: default;
-      opacity: variables.$form-check-label-disabled-opacity;
+      opacity: $form-check-label-disabled-opacity;
     }
   }
 }
 
 .form-check-label {
-  color: variables.$form-check-label-color;
-  cursor: variables.$form-check-label-cursor;
+  color: $form-check-label-color;
+  cursor: $form-check-label-cursor;
 }
 
 //
@@ -128,39 +127,39 @@
 //
 
 .form-switch {
-  padding-left: variables.$form-switch-padding-start;
+  padding-left: $form-switch-padding-start;
 
   .form-check-input {
-    --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-bg-image)};
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
 
-    width: variables.$form-switch-width;
-    margin-left: variables.$form-switch-padding-start * -1;
-    background-image: var(--#{variables.$prefix}form-switch-bg);
+    width: $form-switch-width;
+    margin-left: $form-switch-padding-start * -1;
+    background-image: var(--#{$prefix}form-switch-bg);
     background-position: left center;
-    @include border-radius.border-radius(variables.$form-switch-border-radius, 0);
-    @include transition.transition(variables.$form-switch-transition);
+    @include border-radius.border-radius($form-switch-border-radius, 0);
+    @include transition.transition($form-switch-transition);
 
     &:focus {
-      --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-focus-bg-image)};
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
     }
 
     &:checked {
-      background-position: variables.$form-switch-checked-bg-position;
+      background-position: $form-switch-checked-bg-position;
 
-      @if variables.$enable-gradients {
-        --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-checked-bg-image)}, var(--#{variables.$prefix}gradient);
+      @if $enable-gradients {
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
       } @else {
-        --#{variables.$prefix}form-switch-bg: #{functions.escape-svg(variables.$form-switch-checked-bg-image)};
+        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
       }
     }
   }
 
   &.form-check-reverse {
-    padding-right: variables.$form-switch-padding-start;
+    padding-right: $form-switch-padding-start;
     padding-left: 0;
 
     .form-check-input {
-      margin-right: variables.$form-switch-padding-start * -1;
+      margin-right: $form-switch-padding-start * -1;
       margin-left: 0;
     }
   }
@@ -168,7 +167,7 @@
 
 .form-check-inline {
   display: inline-block;
-  margin-right: variables.$form-check-inline-margin-end;
+  margin-right: $form-check-inline-margin-end;
 }
 
 .btn-check {
@@ -181,15 +180,15 @@
     + .btn {
       pointer-events: none;
       filter: none;
-      opacity: variables.$form-check-btn-check-disabled-opacity;
+      opacity: $form-check-btn-check-disabled-opacity;
     }
   }
 }
 
-@if variables.$enable-dark-mode {
+@if $enable-dark-mode {
   @include color-mode.color-mode(dark) {
     .form-switch .form-check-input:not(:checked):not(:focus) {
-      --#{variables.$prefix}form-switch-bg: #{functions.escape-svg($form-switch-bg-image-dark)};
+      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
     }
   }
 }
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 3f3d8323a8..03b078f9e7 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -3,7 +3,7 @@
 @use "../mixins/box-shadow";
 @use "../mixins/gradients";
 @use "../mixins/transition";
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 //
diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
index 86ceb04aa3..c408af0b6f 100644
--- a/scss/forms/_form-range.scss
+++ b/scss/forms/_form-range.scss
@@ -2,7 +2,7 @@
 @use "../mixins/box-shadow";
 @use "../mixins/gradients";
 @use "../mixins/transition";
-@use "../variables";
+@use "../setup/variables";
 
 // Range
 //
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 92e70d22f6..7adca06ed7 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -1,9 +1,8 @@
-@use "../functions";
 @use "../mixins/border-radius";
 @use "../mixins/box-shadow";
 @use "../mixins/color-mode";
 @use "../mixins/transition";
-@use "../variables";
+@use "../setup" as *;
 @use "../vendor/rfs";
 
 // Select
@@ -12,77 +11,77 @@
 // https://primer.github.io/.
 
 .form-select {
-  --#{variables.$prefix}form-select-bg-img: #{functions.escape-svg(variables.$form-select-indicator)};
+  --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
 
   display: block;
   width: 100%;
-  padding: variables.$form-select-padding-y variables.$form-select-indicator-padding variables.$form-select-padding-y variables.$form-select-padding-x;
-  font-family: variables.$form-select-font-family;
-  @include rfs.font-size(variables.$form-select-font-size);
-  font-weight: variables.$form-select-font-weight;
-  line-height: variables.$form-select-line-height;
-  color: variables.$form-select-color;
+  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
+  font-family: $form-select-font-family;
+  @include rfs.font-size($form-select-font-size);
+  font-weight: $form-select-font-weight;
+  line-height: $form-select-line-height;
+  color: $form-select-color;
   appearance: none;
-  background-color: variables.$form-select-bg;
-  background-image: var(--#{variables.$prefix}form-select-bg-img), var(--#{variables.$prefix}form-select-bg-icon, none);
+  background-color: $form-select-bg;
+  background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
   background-repeat: no-repeat;
-  background-position: variables.$form-select-bg-position;
-  background-size: variables.$form-select-bg-size;
-  border: variables.$form-select-border-width solid variables.$form-select-border-color;
-  @include border-radius.border-radius(variables.$form-select-border-radius, 0);
-  @include box-shadow.box-shadow(variables.$form-select-box-shadow);
-  @include transition.transition(variables.$form-select-transition);
+  background-position: $form-select-bg-position;
+  background-size: $form-select-bg-size;
+  border: $form-select-border-width solid $form-select-border-color;
+  @include border-radius.border-radius($form-select-border-radius, 0);
+  @include box-shadow.box-shadow($form-select-box-shadow);
+  @include transition.transition($form-select-transition);
 
   &:focus {
-    border-color: variables.$form-select-focus-border-color;
+    border-color: $form-select-focus-border-color;
     outline: 0;
-    @if variables.$enable-shadows {
-      @include box-shadow.box-shadow(variables.$form-select-box-shadow, variables.$form-select-focus-box-shadow);
+    @if $enable-shadows {
+      @include box-shadow.box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
     } @else {
       // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: variables.$form-select-focus-box-shadow;
+      box-shadow: $form-select-focus-box-shadow;
     }
   }
 
   &[multiple],
   &[size]:not([size="1"]) {
-    padding-right: variables.$form-select-padding-x;
+    padding-right: $form-select-padding-x;
     background-image: none;
   }
 
   &:disabled {
-    color: variables.$form-select-disabled-color;
-    background-color: variables.$form-select-disabled-bg;
-    border-color: variables.$form-select-disabled-border-color;
+    color: $form-select-disabled-color;
+    background-color: $form-select-disabled-bg;
+    border-color: $form-select-disabled-border-color;
   }
 
   // Remove outline from select box in FF
   &:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 variables.$form-select-color;
+    text-shadow: 0 0 0 $form-select-color;
   }
 }
 
 .form-select-sm {
-  padding-top: variables.$form-select-padding-y-sm;
-  padding-bottom: variables.$form-select-padding-y-sm;
-  padding-left: variables.$form-select-padding-x-sm;
-  @include rfs.font-size(variables.$form-select-font-size-sm);
-  @include border-radius.border-radius(variables.$form-select-border-radius-sm);
+  padding-top: $form-select-padding-y-sm;
+  padding-bottom: $form-select-padding-y-sm;
+  padding-left: $form-select-padding-x-sm;
+  @include rfs.font-size($form-select-font-size-sm);
+  @include border-radius.border-radius($form-select-border-radius-sm);
 }
 
 .form-select-lg {
-  padding-top: variables.$form-select-padding-y-lg;
-  padding-bottom: variables.$form-select-padding-y-lg;
-  padding-left: variables.$form-select-padding-x-lg;
-  @include rfs.font-size(variables.$form-select-font-size-lg);
-  @include border-radius.border-radius(variables.$form-select-border-radius-lg);
+  padding-top: $form-select-padding-y-lg;
+  padding-bottom: $form-select-padding-y-lg;
+  padding-left: $form-select-padding-x-lg;
+  @include rfs.font-size($form-select-font-size-lg);
+  @include border-radius.border-radius($form-select-border-radius-lg);
 }
 
-@if variables.$enable-dark-mode {
+@if $enable-dark-mode {
   @include color-mode.color-mode(dark) {
     .form-select {
-      --#{variables.$prefix}form-select-bg-img: #{functions.escape-svg($form-select-indicator-dark)};
+      --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
     }
   }
 }
diff --git a/scss/forms/_form-text.scss b/scss/forms/_form-text.scss
index 4da63f44b9..cb8abe2df9 100644
--- a/scss/forms/_form-text.scss
+++ b/scss/forms/_form-text.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 //
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index db0ac80c4c..9776089d4f 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "sass:string";
 @use "../mixins/border-radius";
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 //
diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index 1a26eb2c6c..c6be8f7362 100644
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 //
diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index 372fb7aa49..f913c1258d 100644
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -1,5 +1,5 @@
 @use "../mixins/forms";
-@use "../variables";
+@use "../setup/variables";
 
 // Form validation
 //
diff --git a/scss/helpers/_color-bg.scss b/scss/helpers/_color-bg.scss
index adbc31911d..e5394280e7 100644
--- a/scss/helpers/_color-bg.scss
+++ b/scss/helpers/_color-bg.scss
@@ -1,5 +1,5 @@
 @use "../functions";
-@use "../variables";
+@use "../setup/variables";
 
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in variables.$theme-colors {
diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index 74307d2592..aa6d539317 100644
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -1,5 +1,5 @@
 @use "../functions";
-@use "../variables";
+@use "../setup/variables";
 
 // All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
 @each $color, $value in variables.$theme-colors {
diff --git a/scss/helpers/_focus-ring.scss b/scss/helpers/_focus-ring.scss
index 7f9a25a42e..f310b59c29 100644
--- a/scss/helpers/_focus-ring.scss
+++ b/scss/helpers/_focus-ring.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 .focus-ring:focus {
   outline: 0;
diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss
index 49aa757a97..c30fa857b7 100644
--- a/scss/helpers/_icon-link.scss
+++ b/scss/helpers/_icon-link.scss
@@ -1,5 +1,5 @@
 @use "../mixins/transition";
-@use "../variables";
+@use "../setup/variables";
 
 .icon-link {
   display: inline-flex;
diff --git a/scss/helpers/_position.scss b/scss/helpers/_position.scss
index 37544e9499..d792d69d46 100644
--- a/scss/helpers/_position.scss
+++ b/scss/helpers/_position.scss
@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "../mixins/breakpoints";
-@use "../variables";
+@use "../setup/variables";
 
 // Shorthand
 
diff --git a/scss/helpers/_ratio.scss b/scss/helpers/_ratio.scss
index b11f102e81..969871682d 100644
--- a/scss/helpers/_ratio.scss
+++ b/scss/helpers/_ratio.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 // Credit: Nicolas Gallagher and SUIT CSS.
 
diff --git a/scss/helpers/_stretched-link.scss b/scss/helpers/_stretched-link.scss
index f31ae8f618..a538fe06af 100644
--- a/scss/helpers/_stretched-link.scss
+++ b/scss/helpers/_stretched-link.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 //
 // Stretched link
diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss
index 462192386c..8b07e05878 100644
--- a/scss/helpers/_vr.scss
+++ b/scss/helpers/_vr.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 .vr {
   display: inline-block;
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index 3809934a35..e97b5730ac 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -1,6 +1,6 @@
 @use "sass:list";
 @use "sass:meta";
-@use "../variables";
+@use "../setup/variables";
 
 // stylelint-disable property-disallowed-list
 // Single side border-radius
diff --git a/scss/mixins/_box-shadow.scss b/scss/mixins/_box-shadow.scss
index 2fc140e59d..d7757f98aa 100644
--- a/scss/mixins/_box-shadow.scss
+++ b/scss/mixins/_box-shadow.scss
@@ -1,5 +1,5 @@
 @use "sass:list";
-@use "../variables";
+@use "../setup/variables";
 
 @mixin box-shadow($shadow...) {
   @if variables.$enable-shadows {
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 0ca37485c6..e0091e8766 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -1,6 +1,6 @@
 @use "sass:list";
 @use "sass:map";
-@use "../variables";
+@use "../setup/variables";
 
 // Breakpoint viewport sizes and media queries.
 //
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index c6a283d586..89907edd85 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -1,6 +1,5 @@
 @use "sass:color";
-@use "../functions";
-@use "../variables";
+@use "../setup" as *;
 @use "../vendor/rfs";
 
 // Button variants
@@ -12,64 +11,64 @@
 @mixin button-variant(
   $background,
   $border,
-  $color: functions.color-contrast($background),
-  $hover-background: if($color == variables.$color-contrast-light, functions.shade-color($background, variables.$btn-hover-bg-shade-amount), functions.tint-color($background, variables.$btn-hover-bg-tint-amount)),
-  $hover-border: if($color == variables.$color-contrast-light, functions.shade-color($border, variables.$btn-hover-border-shade-amount), functions.tint-color($border, variables.$btn-hover-border-tint-amount)),
-  $hover-color: functions.color-contrast($hover-background),
-  $active-background: if($color == variables.$color-contrast-light, functions.shade-color($background, variables.$btn-active-bg-shade-amount), functions.tint-color($background, variables.$btn-active-bg-tint-amount)),
-  $active-border: if($color == variables.$color-contrast-light, functions.shade-color($border, variables.$btn-active-border-shade-amount), functions.tint-color($border, variables.$btn-active-border-tint-amount)),
-  $active-color: functions.color-contrast($active-background),
+  $color: color-contrast($background),
+  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+  $hover-color: color-contrast($hover-background),
+  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  $active-color: color-contrast($active-background),
   $disabled-background: $background,
   $disabled-border: $border,
-  $disabled-color: functions.color-contrast($disabled-background)
+  $disabled-color: color-contrast($disabled-background)
 ) {
-  --#{variables.$prefix}btn-color: #{$color};
-  --#{variables.$prefix}btn-bg: #{$background};
-  --#{variables.$prefix}btn-border-color: #{$border};
-  --#{variables.$prefix}btn-hover-color: #{$hover-color};
-  --#{variables.$prefix}btn-hover-bg: #{$hover-background};
-  --#{variables.$prefix}btn-hover-border-color: #{$hover-border};
-  --#{variables.$prefix}btn-focus-shadow-rgb: #{functions.to-rgb(color.mix($color, $border, 15%))};
-  --#{variables.$prefix}btn-active-color: #{$active-color};
-  --#{variables.$prefix}btn-active-bg: #{$active-background};
-  --#{variables.$prefix}btn-active-border-color: #{$active-border};
-  --#{variables.$prefix}btn-active-shadow: #{variables.$btn-active-box-shadow};
-  --#{variables.$prefix}btn-disabled-color: #{$disabled-color};
-  --#{variables.$prefix}btn-disabled-bg: #{$disabled-background};
-  --#{variables.$prefix}btn-disabled-border-color: #{$disabled-border};
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$disabled-background};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
 }
 // scss-docs-end btn-variant-mixin
 
 // scss-docs-start btn-outline-variant-mixin
 @mixin button-outline-variant(
   $color,
-  $color-hover: functions.color-contrast($color),
+  $color-hover: color-contrast($color),
   $active-background: $color,
   $active-border: $color,
-  $active-color: functions.color-contrast($active-background)
+  $active-color: color-contrast($active-background)
 ) {
-  --#{variables.$prefix}btn-color: #{$color};
-  --#{variables.$prefix}btn-border-color: #{$color};
-  --#{variables.$prefix}btn-hover-color: #{$color-hover};
-  --#{variables.$prefix}btn-hover-bg: #{$active-background};
-  --#{variables.$prefix}btn-hover-border-color: #{$active-border};
-  --#{variables.$prefix}btn-focus-shadow-rgb: #{functions.to-rgb($color)};
-  --#{variables.$prefix}btn-active-color: #{$active-color};
-  --#{variables.$prefix}btn-active-bg: #{$active-background};
-  --#{variables.$prefix}btn-active-border-color: #{$active-border};
-  --#{variables.$prefix}btn-active-shadow: #{variables.$btn-active-box-shadow};
-  --#{variables.$prefix}btn-disabled-color: #{$color};
-  --#{variables.$prefix}btn-disabled-bg: transparent;
-  --#{variables.$prefix}btn-disabled-border-color: #{$color};
-  --#{variables.$prefix}gradient: none;
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-border-color: #{$color};
+  --#{$prefix}btn-hover-color: #{$color-hover};
+  --#{$prefix}btn-hover-bg: #{$active-background};
+  --#{$prefix}btn-hover-border-color: #{$active-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$color};
+  --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-border-color: #{$color};
+  --#{$prefix}gradient: none;
 }
 // scss-docs-end btn-outline-variant-mixin
 
 // scss-docs-start btn-size-mixin
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --#{variables.$prefix}btn-padding-y: #{$padding-y};
-  --#{variables.$prefix}btn-padding-x: #{$padding-x};
-  @include rfs.rfs($font-size, --#{variables.$prefix}btn-font-size);
-  --#{variables.$prefix}btn-border-radius: #{$border-radius};
+  --#{$prefix}btn-padding-y: #{$padding-y};
+  --#{$prefix}btn-padding-x: #{$padding-x};
+  @include rfs.rfs($font-size, --#{$prefix}btn-font-size);
+  --#{$prefix}btn-border-radius: #{$border-radius};
 }
 // scss-docs-end btn-size-mixin
diff --git a/scss/mixins/_caret.scss b/scss/mixins/_caret.scss
index 2f1a1e1472..c1b508dabb 100644
--- a/scss/mixins/_caret.scss
+++ b/scss/mixins/_caret.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 // scss-docs-start caret-mixins
 @mixin caret-down($width: variables.$caret-width) {
diff --git a/scss/mixins/_container.scss b/scss/mixins/_container.scss
index 1073ce3ab2..28062e811d 100644
--- a/scss/mixins/_container.scss
+++ b/scss/mixins/_container.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 // Container mixins
 
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 608b6e5d00..e1c2e1834e 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -1,8 +1,7 @@
-@use "../functions";
-@use "../variables";
 @use "../vendor/rfs";
 @use "border-radius";
 @use "box-shadow";
+@use "../setup" as *;
 
 // This mixin uses an `if()` technique to be compatible with Dart Sass
 // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
@@ -25,17 +24,17 @@
   $state,
   $color,
   $icon,
-  $tooltip-color: functions.color-contrast($color),
-  $tooltip-bg-color: rgba($color, variables.$form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 variables.$input-btn-focus-blur variables.$input-focus-width rgba($color, variables.$input-btn-focus-color-opacity),
+  $tooltip-color: color-contrast($color),
+  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
   $border-color: $color
 ) {
   .#{$state}-feedback {
     display: none;
     width: 100%;
-    margin-top: variables.$form-feedback-margin-top;
-    @include rfs.font-size(variables.$form-feedback-font-size);
-    font-style: variables.$form-feedback-font-style;
+    margin-top: $form-feedback-margin-top;
+    @include rfs.font-size($form-feedback-font-size);
+    font-style: $form-feedback-font-style;
     color: $color;
   }
 
@@ -45,13 +44,13 @@
     z-index: 5;
     display: none;
     max-width: 100%; // Contain to parent when possible
-    padding: variables.$form-feedback-tooltip-padding-y variables.$form-feedback-tooltip-padding-x;
+    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
     margin-top: .1rem;
-    @include rfs.font-size(variables.$form-feedback-tooltip-font-size);
-    line-height: variables.$form-feedback-tooltip-line-height;
+    @include rfs.font-size($form-feedback-tooltip-font-size);
+    line-height: $form-feedback-tooltip-line-height;
     color: $tooltip-color;
     background-color: $tooltip-bg-color;
-    @include border-radius.border-radius(variables.$form-feedback-tooltip-border-radius);
+    @include border-radius.border-radius($form-feedback-tooltip-border-radius);
   }
 
   @include form-validation-state-selector($state) {
@@ -65,18 +64,18 @@
     @include form-validation-state-selector($state) {
       border-color: $border-color;
 
-      @if variables.$enable-validation-icons {
-        padding-right: variables.$input-height-inner;
-        background-image: functions.escape-svg($icon);
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-image: escape-svg($icon);
         background-repeat: no-repeat;
-        background-position: right variables.$input-height-inner-quarter center;
-        background-size: variables.$input-height-inner-half variables.$input-height-inner-half;
+        background-position: right $input-height-inner-quarter center;
+        background-size: $input-height-inner-half $input-height-inner-half;
       }
 
       &:focus {
         border-color: $border-color;
-        @if variables.$enable-shadows {
-          @include box-shadow.box-shadow(variables.$input-box-shadow, $focus-box-shadow);
+        @if $enable-shadows {
+          @include box-shadow.box-shadow($input-box-shadow, $focus-box-shadow);
         } @else {
           // Avoid using mixin so we can pass custom focus shadow properly
           box-shadow: $focus-box-shadow;
@@ -88,9 +87,9 @@
   // stylelint-disable-next-line selector-no-qualifying-type
   textarea.form-control {
     @include form-validation-state-selector($state) {
-      @if variables.$enable-validation-icons {
-        padding-right: variables.$input-height-inner;
-        background-position: top variables.$input-height-inner-quarter right variables.$input-height-inner-quarter;
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
       }
     }
   }
@@ -99,20 +98,20 @@
     @include form-validation-state-selector($state) {
       border-color: $border-color;
 
-      @if variables.$enable-validation-icons {
+      @if $enable-validation-icons {
         &:not([multiple]):not([size]),
         &:not([multiple])[size="1"] {
-          --#{variables.$prefix}form-select-bg-icon: #{functions.escape-svg($icon)};
-          padding-right: variables.$form-select-feedback-icon-padding-end;
-          background-position: variables.$form-select-bg-position, variables.$form-select-feedback-icon-position;
-          background-size: variables.$form-select-bg-size, variables.$form-select-feedback-icon-size;
+          --#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
+          padding-right: $form-select-feedback-icon-padding-end;
+          background-position: $form-select-bg-position, $form-select-feedback-icon-position;
+          background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
       }
 
       &:focus {
         border-color: $border-color;
-        @if variables.$enable-shadows {
-          @include box-shadow.box-shadow(variables.$form-select-box-shadow, $focus-box-shadow);
+        @if $enable-shadows {
+          @include box-shadow.box-shadow($form-select-box-shadow, $focus-box-shadow);
         } @else {
           // Avoid using mixin so we can pass custom focus shadow properly
           box-shadow: $focus-box-shadow;
@@ -123,8 +122,8 @@
 
   .form-control-color {
     @include form-validation-state-selector($state) {
-      @if variables.$enable-validation-icons {
-        width: calc(#{variables.$form-color-width} + #{variables.$input-height-inner});
+      @if $enable-validation-icons {
+        width: calc(#{$form-color-width} + #{$input-height-inner});
       }
     }
   }
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index 6f38e58df8..287cfa9b1a 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 // Gradients
 
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index d0645075ca..d0ac0d828c 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -1,10 +1,9 @@
 @use "sass:map";
 @use "sass:math";
 @use "sass:meta";
-// @use "../setup" as *;
-// @use "../maps";
-// @use "../setup/variables";
-// @use "breakpoints";
+@use "../setup" as *;
+@use "../maps";
+@use "breakpoints";
 
 // Grid system
 //
diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss
index a68311997a..26aacf4156 100644
--- a/scss/mixins/_pagination.scss
+++ b/scss/mixins/_pagination.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 // Pagination
diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss
index aa5f8ab92e..142140295c 100644
--- a/scss/mixins/_reset-text.scss
+++ b/scss/mixins/_reset-text.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../setup/variables";
 
 @mixin reset-text {
   font-family: variables.$font-family-base;
diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss
index 40cec1e6e5..2dfea0c0cb 100644
--- a/scss/mixins/_table-variants.scss
+++ b/scss/mixins/_table-variants.scss
@@ -1,29 +1,28 @@
 @use "sass:color";
 @use "sass:math";
-@use "../functions";
-@use "../variables";
+@use "../setup" as *;
 
 // scss-docs-start table-variant
 @mixin table-variant($state, $background) {
   .table-#{$state} {
-    $color: functions.color-contrast(functions.opaque(variables.$body-bg, $background));
-    $hover-bg: color.mix($color, $background, math.percentage(variables.$table-hover-bg-factor));
-    $striped-bg: color.mix($color, $background, math.percentage(variables.$table-striped-bg-factor));
-    $active-bg: color.mix($color, $background, math.percentage(variables.$table-active-bg-factor));
-    $table-border-color: color.mix($color, $background, math.percentage(variables.$table-border-factor));
+    $color: color-contrast(opaque($body-bg, $background));
+    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+    $table-border-color: mix($color, $background, percentage($table-border-factor));
 
-    --#{variables.$prefix}table-color: #{$color};
-    --#{variables.$prefix}table-bg: #{$background};
-    --#{variables.$prefix}table-border-color: #{$table-border-color};
-    --#{variables.$prefix}table-striped-bg: #{$striped-bg};
-    --#{variables.$prefix}table-striped-color: #{functions.color-contrast($striped-bg)};
-    --#{variables.$prefix}table-active-bg: #{$active-bg};
-    --#{variables.$prefix}table-active-color: #{functions.color-contrast($active-bg)};
-    --#{variables.$prefix}table-hover-bg: #{$hover-bg};
-    --#{variables.$prefix}table-hover-color: #{functions.color-contrast($hover-bg)};
+    --#{$prefix}table-color: #{$color};
+    --#{$prefix}table-bg: #{$background};
+    --#{$prefix}table-border-color: #{$table-border-color};
+    --#{$prefix}table-striped-bg: #{$striped-bg};
+    --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
+    --#{$prefix}table-active-bg: #{$active-bg};
+    --#{$prefix}table-active-color: #{color-contrast($active-bg)};
+    --#{$prefix}table-hover-bg: #{$hover-bg};
+    --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
 
-    color: var(--#{variables.$prefix}table-color);
-    border-color: var(--#{variables.$prefix}table-border-color);
+    color: var(--#{$prefix}table-color);
+    border-color: var(--#{$prefix}table-border-color);
   }
 }
-// scss-docs-end table-variant
+// scss-docs-end table-variant
\ No newline at end of file
diff --git a/scss/mixins/_transition.scss b/scss/mixins/_transition.scss
index db8688c028..261e4e6bc5 100644
--- a/scss/mixins/_transition.scss
+++ b/scss/mixins/_transition.scss
@@ -1,5 +1,5 @@
 @use "sass:list";
-@use "../variables";
+@use "../setup/variables";
 
 // stylelint-disable property-disallowed-list
 @mixin transition($transition...) {
diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index a673cc096a..a30ab02960 100644
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -2,7 +2,7 @@
 @use "sass:map";
 @use "sass:meta";
 @use "sass:string";
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 // Utility generator
diff --git a/scss/setup/_functions.scss b/scss/setup/_functions.scss
index c8d5968434..ba46cc9f98 100644
--- a/scss/setup/_functions.scss
+++ b/scss/setup/_functions.scss
@@ -317,4 +317,4 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
     $result: $result * map.get($unit-map, $dividend-unit);
   }
   @return $result;
-}
+}
\ No newline at end of file
diff --git a/scss/setup/_variables.scss b/scss/setup/_variables.scss
index 24bc3572e4..34ed1b1696 100644
--- a/scss/setup/_variables.scss
+++ b/scss/setup/_variables.scss
@@ -1,6 +1,6 @@
 @use "sass:color";
 @use "sass:string";
-@use "functions";
+@use "functions" as *;
 
 // Variables
 //
@@ -847,7 +847,8 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color:     $gray-600 !default;
-$btn-link-focus-shadow-rgb:   to-rgb(color.mix(functions.color-contrast($link-color), $link-color, 15%)) !default;
+// $btn-link-focus-shadow-rgb:   to-rgb(color.mix(functions.color-contrast($link-color), $link-color, 15%)) !default;
+$btn-link-focus-shadow-rgb:   #fd0 !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;
diff --git a/scss/utilities/_api.scss b/scss/utilities/_api.scss
index 96471c7b97..84a5c31b5e 100644
--- a/scss/utilities/_api.scss
+++ b/scss/utilities/_api.scss
@@ -3,7 +3,7 @@
 @use "../mixins/breakpoints";
 @use "../mixins/utilities" as mixins-utilities;
 @use "../utilities";
-@use "../variables";
+@use "../setup/variables";
 @use "../vendor/rfs";
 
 // Loop over each breakpoint