diff --git a/source/css/alerts.css b/source/css/alerts.css
index 0ef8b149d..026a22e64 100644
--- a/source/css/alerts.css
+++ b/source/css/alerts.css
@@ -1,50 +1,4 @@
 /*! Alerts */
-:root {
-  --alert-border-radius: var(--component-border-radius);
-  --alert-border-width: 1px;
-  --alert-padding-x: var(--component-padding-x);
-  --alert-padding-y: var(--component-padding-y);
-
-  /* Default */
-  --alert-bg-color: color(var(--state-primary) tint(75%));
-  --alert-color: color(var(--state-primary) lightness(25%));
-  --alert-border-color: color(var(--alert-bg-color) shade(5%));
-
-  /* Secondary */
-  --alert-bg-color-secondary: color(var(--state-secondary) tint(75%));
-  --alert-color-secondary: color(var(--state-secondary) lightness(25%));
-  --alert-border-color-secondary: color(var(--alert-bg-color-secondary) shade(5%));
-
-  /* Success */
-  --alert-bg-color-success: color(var(--state-success) tint(75%));
-  --alert-color-success: color(var(--state-success) lightness(25%));
-  --alert-border-color-success: color(var(--alert-bg-color-success) shade(5%));
-
-  /* Info */
-  --alert-bg-color-info: color(var(--state-info) tint(75%));
-  --alert-color-info: color(var(--state-info) lightness(25%));
-  --alert-border-color-info: color(var(--alert-bg-color-info) shade(5%));
-
-  /* Warning */
-  --alert-bg-color-warning: color(var(--state-warning) tint(75%));
-  --alert-color-warning: color(var(--state-warning) lightness(25%));
-  --alert-border-color-warning: color(var(--alert-bg-color-warning) shade(5%));
-
-  /* Danger */
-  --alert-bg-color-danger: color(var(--state-danger) tint(75%));
-  --alert-color-danger: color(var(--state-danger) lightness(25%));
-  --alert-border-color-danger: color(var(--alert-bg-color-danger) shade(5%));
-
-  /* Light */
-  --alert-bg-color-light: color(var(--state-light) tint(75%));
-  --alert-color-light: color(var(--state-dark) lightness(50%));
-  --alert-border-color-light: color(var(--alert-bg-color-light) shade(5%));
-
-  /* Dark */
-  --alert-bg-color-dark: color(var(--state-dark) tint(75%));
-  --alert-color-dark: color(var(--state-light) lightness(25%));
-  --alert-border-color-dark: color(var(--alert-bg-color-dark) shade(5%));
-}
 
 .alert {
   color: var(--alert-color);
diff --git a/source/css/badges.css b/source/css/badges.css
index 26d9f2e37..08b0a740c 100644
--- a/source/css/badges.css
+++ b/source/css/badges.css
@@ -1,42 +1,4 @@
 /*! Badges */
-:root {
-  --badge-font-size: .8em; /* ems for relative sizing */
-  --badge-border-radius: 1em;  /* ems for relative sizing */
-  --badge-focus-width: var(--input-focus-width);
-  --badge-speed: var(--component-speed);
-
-  /* Default */
-  --badge-color: var(--color-white);
-  --badge-bg-color: var(--state-primary);
-
-  /* Secondary */
-  --badge-color-secondary: var(--color-white);
-  --badge-bg-color-secondary: var(--state-secondary);
-
-  /* Success */
-  --badge-color-success: var(--color-white);
-  --badge-bg-color-success: var(--state-success);
-
-  /* Info */
-  --badge-color-info: var(--color-white);
-  --badge-bg-color-info: var(--state-info);
-
-  /* Warning */
-  --badge-color-warning: var(--color-white);
-  --badge-bg-color-warning: var(--state-warning);
-
-  /* Danger */
-  --badge-color-danger: var(--color-white);
-  --badge-bg-color-danger: var(--state-danger);
-
-  /* Light */
-  --badge-color-light: var(--state-dark);
-  --badge-bg-color-light: var(--state-light);
-
-  /* Dark */
-  --badge-color-dark: var(--state-light);
-  --badge-bg-color-dark: var(--state-dark);
-}
 
 .badge {
   font-size: var(--badge-font-size);
diff --git a/source/css/buttons.css b/source/css/buttons.css
index b732163b9..6f1bab79c 100644
--- a/source/css/buttons.css
+++ b/source/css/buttons.css
@@ -1,56 +1,4 @@
 /*! Buttons */
-:root {
-  --button-height-xs: var(--input-height-xs);
-  --button-height-sm: var(--input-height-sm);
-  --button-height: var(--input-height);
-  --button-height-lg: var(--input-height-lg);
-  --button-height-xl: var(--input-height-xl);
-  --button-font-size-xs: var(--input-font-size-xs);
-  --button-font-size-sm: var(--input-font-size-sm);
-  --button-font-size: var(--input-font-size);
-  --button-font-size-lg: var(--input-font-size-lg);
-  --button-font-size-xl: var(--input-font-size-xl);
-  --button-font-family: var(--input-font-family);
-  --button-font-weight: var(--input-font-weight);
-  --button-border-radius: var(--component-border-radius);
-  --button-border-width: var(--component-border-width);
-  --button-focus-width: var(--input-focus-width);
-  --button-speed: var(--component-speed);
-  --button-loader-size: 1em;
-  --button-loader-border-width: .15em;
-
-  /* Default */
-  --button-color: var(--color-white);
-  --button-bg-color: var(--state-primary);
-
-  /* Secondary */
-  --button-color-secondary: var(--color-white);
-  --button-bg-color-secondary: var(--state-secondary);
-
-  /* Success */
-  --button-color-success: var(--color-white);
-  --button-bg-color-success: var(--state-success);
-
-  /* Info */
-  --button-color-info: var(--color-white);
-  --button-bg-color-info: var(--state-info);
-
-  /* Warning */
-  --button-color-warning: var(--color-white);
-  --button-bg-color-warning: var(--state-warning);
-
-  /* Danger */
-  --button-color-danger: var(--color-white);
-  --button-bg-color-danger: var(--state-danger);
-
-  /* Light */
-  --button-color-light: var(--state-dark);
-  --button-bg-color-light: color(var(--state-light) shade(10%));
-
-  /* Dark */
-  --button-color-dark: var(--state-light);
-  --button-bg-color-dark: color(var(--state-dark) tint(10%));
-}
 
 button,
 .button {
diff --git a/source/css/content.css b/source/css/content.css
index 3da068913..25fb5a27c 100644
--- a/source/css/content.css
+++ b/source/css/content.css
@@ -1,67 +1,8 @@
 /*! Content */
-:root {
-  --body-bg-color: var(--color-white);
-  --body-color: var(--color-black);
-  --font-family: var(--font-system);
-  --font-size: 1rem; /* Most browsers use a default font size of 16px */
-  --font-size-big: 1.25rem;
-  --font-size-small: .875rem;
-  --font-weight-light: 300;
-  --font-weight: 400;
-  --font-weight-bold: 700;
-  --line-height: 1.5;
 
-  --code-font-size: 90%;
-  --code-color: var(--color-black);
-  --code-border-radius: var(--component-border-radius);
-  --code-bg-color: var(--component-bg-color);
-  --code-padding-x: calc(var(--font-size) * .4);
-  --code-padding-y: calc(var(--font-size) * .2);
-
-  --headings-font-family: var(--font-system);
-  --headings-font-weight: var(--font-weight-light);
-  --headings-line-height: 1.1;
-  --headings-margin-bottom: .5rem;
-  --headings-color: inherit;
-  --headings-font-size-h1: 2.5rem;
-  --headings-font-size-h2: 2rem;
-  --headings-font-size-h3: 1.75rem;
-  --headings-font-size-h4: 1.5rem;
-  --headings-font-size-h5: 1.25rem;
-  --headings-font-size-h6: 1rem;
-
-  --hr-border-width: 1px;
-  --hr-border-color: var(--component-border-color);
-  --hr-margin-x: 0;
-  --hr-margin-y: 2rem;
-
-  --kbd-font-size: 90%;
-  --kbd-color: var(--color-white);
-  --kbd-border-radius: var(--component-border-radius);
-  --kbd-bg-color: var(--color-black);
-  --kbd-padding-x: calc(var(--font-size) * .4);
-  --kbd-padding-y: calc(var(--font-size) * .2);
-
-  --link-color: var(--state-primary);
-  --link-text-decoration: none;
-  --link-color-hover: var(--link-color);
-  --link-text-decoration-hover: underline;
-
-  --mark-color: inherit;
-  --mark-bg-color: var(--color-yellow);
-  --mark-padding-x: calc(var(--font-size) * .4);
-  --mark-padding-y: calc(var(--font-size) * .2);
-
-  --placeholder-color: var(--state-secondary);
-
-  --pre-color: var(--code-color);
-  --pre-border-radius: var(--component-border-radius);
-  --pre-bg-color: var(--code-bg-color);
-  --pre-max-height: none;
-
-  --selection-color: var(--color-white);
-  --selection-bg-color: var(--state-primary);
-}
+/***************************************************************************************************
+* Resets
+***************************************************************************************************/
 
 /* Box sizing reset */
 html {
@@ -74,7 +15,7 @@ html {
   box-sizing: inherit;
 }
 
-/* Hidden property polyfill */
+/* Hidden property reset */
 [hidden] {
   display: none !important;
 }
diff --git a/source/css/dropdowns.css b/source/css/dropdowns.css
index b895dcf15..103c6df4f 100644
--- a/source/css/dropdowns.css
+++ b/source/css/dropdowns.css
@@ -1,24 +1,4 @@
 /*! Dropdowns */
-:root {
-  --dropdown-min-width: 10rem;
-  --dropdown-max-width: 25rem;
-  --dropdown-max-height: none;
-  --dropdown-border-color: var(--component-border-color);
-  --dropdown-border-radius: var(--component-border-radius);
-  --dropdown-border-width: var(--component-border-width);
-  --dropdown-color: var(--body-color);
-  --dropdown-color-hover: var(--color-white);
-  --dropdown-bg-color: var(--color-white);
-  --dropdown-bg-color-hover: var(--state-primary);
-  --dropdown-box-shadow: var(--component-box-shadow-outer);
-  --dropdown-divider-color: var(--component-border-color);
-  --dropdown-divider-width: var(--component-border-width);
-  --dropdown-padding-x: 1rem;
-  --dropdown-padding-y: .25rem;
-  --dropdown-offset-x: 0;
-  --dropdown-offset-y: 1px;
-  --dropdown-z-index: 100;
-}
 
 .dropdown {
   position: relative;
diff --git a/source/css/forms.css b/source/css/forms.css
index dce497a5d..62ff5a5c9 100644
--- a/source/css/forms.css
+++ b/source/css/forms.css
@@ -1,50 +1,4 @@
 /*! Forms */
-:root {
-  --input-height-xs: 1.25rem;
-  --input-height-sm: 1.75rem;
-  --input-height: 2.25rem;
-  --input-height-lg: 2.75rem;
-  --input-height-xl: 3.25rem;
-  --input-font-size-xs: .7rem;
-  --input-font-size-sm: .8rem;
-  --input-font-size: 1rem;
-  --input-font-size-lg: 1.25rem;
-  --input-font-size-xl: 1.5rem;
-  --input-font-family: inherit;
-  --input-font-weight: inherit;
-  --input-color: var(--body-color);
-  --input-border-color: var(--component-border-color);
-  --input-border-color-focus: var(--state-primary);
-  --input-border-width: 1px;
-  --input-border-radius: var(--component-border-radius);
-  --input-bg-color: var(--color-white);
-  --input-box-shadow: var(--component-box-shadow-inner);
-  --input-readonly-bg-color: var(--component-bg-color);
-  --input-focus-width: 2px;
-  --input-speed: var(--component-speed);
-
-  --input-addon-bg-color: var(--component-bg-color);
-  --input-addon-color: var(--state-secondary);
-
-  --input-range-track-height: .5rem;
-  --input-range-track-color: var(--component-bg-color);
-  --input-range-track-box-shadow: var(--component-box-shadow-inner);
-  --input-range-thumb-height: 1.25rem;
-  --input-range-thumb-color: var(--state-primary);
-
-  --input-invalid-color: var(--state-danger);
-  --input-invalid-border-color: var(--state-danger);
-  --input-valid-color: var(--state-success);
-  --input-valid-border-color: var(--state-success);
-
-  --fieldset-border-color: var(--component-border-color);
-  --fieldset-border-width: var(--component-border-width);
-  --fieldset-border-radius: var(--component-border-radius);
-  --fieldset-padding-x: 2rem;
-  --fieldset-padding-y: 1.5rem;
-
-  --label-color: inherit;
-}
 
 fieldset {
   border: solid var(--fieldset-border-width) var(--fieldset-border-color);
diff --git a/source/css/grid.css b/source/css/grid.css
index 1c349d1e2..fc4b2b9fe 100644
--- a/source/css/grid.css
+++ b/source/css/grid.css
@@ -7,14 +7,6 @@
 
   Licensed under the MIT license.
 */
-:root {
-  --container-max-width-sm: 540px;
-  --container-max-width-md: 720px;
-  --container-max-width-lg: 960px;
-  --container-max-width-xl: 1140px;
-
-  --grid-gutter-width: 2rem;
-}
 
 /* Containers */
 .container,
diff --git a/source/css/loaders.css b/source/css/loaders.css
index b974cae9c..bb1e859cc 100644
--- a/source/css/loaders.css
+++ b/source/css/loaders.css
@@ -1,51 +1,4 @@
 /*! Loaders */
-:root {
-  --loader-thickness: .2rem;
-  --loader-thickness-xs: calc(var(--loader-thickness) / 2);
-  --loader-thickness-sm: calc(var(--loader-thickness) / 1.5);
-  --loader-thickness-lg: calc(var(--loader-thickness) * 1.5);
-  --loader-thickness-xl: calc(var(--loader-thickness) * 2);
-  --loader-size-xs: var(--input-height-xs);
-  --loader-size-sm: var(--input-height-sm);
-  --loader-size: var(--input-height);
-  --loader-size-lg: var(--input-height-lg);
-  --loader-size-xl: var(--input-height-xl);
-  --loader-speed: 750ms;
-  --loader-margin-x: .5em;
-  --loader-margin-y: 0;
-
-  /* Default */
-  --loader-color: var(--state-primary);
-  --loader-bg-color: color(var(--state-primary) lightness(90%));
-
-  /* Secondary */
-  --loader-color-secondary: var(--state-secondary);
-  --loader-bg-color-secondary: color(var(--state-secondary) lightness(90%));
-
-  /* Success */
-  --loader-color-success: var(--state-success);
-  --loader-bg-color-success: color(var(--state-success) lightness(90%));
-
-  /* Info */
-  --loader-color-info: var(--state-info);
-  --loader-bg-color-info: color(var(--state-info) lightness(90%));
-
-  /* Warning */
-  --loader-color-warning: var(--state-warning);
-  --loader-bg-color-warning: color(var(--state-warning) lightness(90%));
-
-  /* Danger */
-  --loader-color-danger: var(--state-danger);
-  --loader-bg-color-danger: color(var(--state-danger) lightness(90%));
-
-  /* Light */
-  --loader-color-light: var(--state-light);
-  --loader-bg-color-light: color(var(--state-light) lightness(90%));
-
-  /* Dark */
-  --loader-color-dark: var(--state-dark);
-  --loader-bg-color-dark: color(var(--state-dark) lightness(90%));
-}
 
 .loader {
   width: var(--loader-size);
diff --git a/source/css/progress-bars.css b/source/css/progress-bars.css
index 46e0e5d42..8ca8f9fc9 100644
--- a/source/css/progress-bars.css
+++ b/source/css/progress-bars.css
@@ -1,23 +1,4 @@
 /*! Progress Bars */
-:root {
-  --progress-height: var(--input-height);
-  --progress-height-xs: var(--input-height-xs);
-  --progress-height-sm: var(--input-height-sm);
-  --progress-height-lg: var(--input-height-lg);
-  --progress-height-xl: var(--input-height-xl);
-  --progress-font-size: var(--input-font-size);
-  --progress-font-size-xs: var(--input-font-size-xs);
-  --progress-font-size-sm: var(--input-font-size-sm);
-  --progress-font-size-lg: var(--input-font-size-lg);
-  --progress-font-size-xl: var(--input-font-size-xl);
-  --progress-color: var(--color-white);
-  --progress-bg-color: var(--component-bg-color);
-  --progress-bar-color: var(--state-primary);
-  --progress-border-radius: var(--component-border-radius);
-  --progress-box-shadow: var(--component-box-shadow-inner);
-  --progress-speed: var(--component-speed);
-  --progress-speed-indeterminate: 3s;
-}
 
 .progress {
   position: relative;
diff --git a/source/css/switches.css b/source/css/switches.css
index d82185b10..00c0814da 100644
--- a/source/css/switches.css
+++ b/source/css/switches.css
@@ -1,61 +1,4 @@
 /*! Switches */
-:root {
-  --switch-height: calc(var(--input-height) * .75);
-  --switch-height-xs: calc(var(--input-height-xs) * .75);
-  --switch-height-sm: calc(var(--input-height-sm) * .75);
-  --switch-height-lg: calc(var(--input-height-lg) * .75);
-  --switch-height-xl: calc(var(--input-height-xl) * .75);
-  --switch-font-size: var(--input-font-size);
-  --switch-font-size-xs: var(--input-font-size-xs);
-  --switch-font-size-sm: var(--input-font-size-sm);
-  --switch-font-size-lg: var(--input-font-size-lg);
-  --switch-font-size-xl: var(--input-font-size-xl);
-  --switch-border-radius: var(--switch-height);
-  --switch-thumb-border-radius: 50%;
-  --switch-thumb-spacing: 2px;
-  --switch-focus-width: var(--input-focus-width);
-  --switch-speed: var(--component-speed);
-
-  /* Default */
-  --switch-color: var(--state-primary);
-  --switch-bg-color: var(--component-border-color);
-  --switch-thumb-color: var(--color-white);
-
-  /* Secondary */
-  --switch-color-secondary: var(--state-secondary);
-  --switch-bg-color-secondary: var(--component-border-color);
-  --switch-thumb-color-secondary: var(--color-white);
-
-  /* Success */
-  --switch-color-success: var(--state-success);
-  --switch-bg-color-success: var(--component-border-color);
-  --switch-thumb-color-success: var(--color-white);
-
-  /* Info */
-  --switch-color-info: var(--state-info);
-  --switch-bg-color-info: var(--component-border-color);
-  --switch-thumb-color-info: var(--color-white);
-
-  /* Warning */
-  --switch-color-warning: var(--state-warning);
-  --switch-bg-color-warning: var(--component-border-color);
-  --switch-thumb-color-warning: var(--color-white);
-
-  /* Danger */
-  --switch-color-danger: var(--state-danger);
-  --switch-bg-color-danger: var(--component-border-color);
-  --switch-thumb-color-danger: var(--color-white);
-
-  /* Light */
-  --switch-color-light: color(var(--state-light) shade(25%));
-  --switch-bg-color-light: color(var(--state-light) shade(10%));
-  --switch-thumb-color-light: var(--color-white);
-
-  /* Dark */
-  --switch-color-dark: color(var(--state-dark) tint(10%));
-  --switch-bg-color-dark: color(var(--state-dark) tint(25%));
-  --switch-thumb-color-dark: var(--color-white);
-}
 
 .switch {
   font-size: var(--switch-font-size);
diff --git a/source/css/tables.css b/source/css/tables.css
index b6dfc8c20..981c01006 100644
--- a/source/css/tables.css
+++ b/source/css/tables.css
@@ -1,15 +1,4 @@
 /*! Tables */
-:root {
-  --table-bg-color: var(--color-white);
-  --table-border-color: var(--component-border-color);
-  --table-border-width: var(--component-border-width);
-  --table-header-bg-color: transparent;
-  --table-spacing-x: .75rem;
-  --table-spacing-y: .5rem;
-  --table-hover-color: var(--color-white);
-  --table-hover-bg-color: var(--state-primary);
-  --table-stripe-bg-color: var(--component-bg-color);
-}
 
 table {
   width: 100%;
diff --git a/source/css/tabs.css b/source/css/tabs.css
index 3a8c5ff4d..135224563 100644
--- a/source/css/tabs.css
+++ b/source/css/tabs.css
@@ -1,25 +1,4 @@
 /*! Tabs */
-:root {
-  --tab-bg-color: var(--body-bg-color);
-  --tab-bg-color-hover: var(--body-bg-color);
-  --tab-bg-color-active: var(--link-color);
-  --tab-bg-color-disabled: var(--body-bg-color);
-  --tab-border-radius: var(--component-border-radius);
-  --tab-color: var(--link-color);
-  --tab-color-hover: var(--link-color-hover);
-  --tab-color-active: var(--color-white);
-  --tab-color-disabled: var(--state-secondary);
-  --tab-padding-x: var(--component-padding-x);
-  --tab-padding-y: calc(var(--component-padding-y) / 2);
-  --tab-focus-width: var(--input-focus-width);
-  --tab-speed: var(--component-speed);
-
-  --tab-pane-border-color: var(--component-border-color);
-  --tab-pane-border-radius: var(--component-border-radius);
-  --tab-pane-border-width: var(--component-border-width);
-  --tab-pane-padding-x: var(--component-padding-x);
-  --tab-pane-padding-y: var(--component-padding-y);
-}
 
 .tabs {
   width: 100%;
diff --git a/source/css/utilities.css b/source/css/utilities.css
index d5c03be0f..66d1cefca 100644
--- a/source/css/utilities.css
+++ b/source/css/utilities.css
@@ -1,11 +1,4 @@
 /*! Utilties */
-:root {
-  --spacing-xs: .5rem;
-  --spacing-sm: 1rem;
-  --spacing-md: 1.5rem;
-  --spacing-lg: 2rem;
-  --spacing-xl: 2.5rem;
-}
 
 /***************************************************************************************************
 * Text utilities
diff --git a/source/css/variables.css b/source/css/variables.css
index b5df313c6..688b37ef5 100644
--- a/source/css/variables.css
+++ b/source/css/variables.css
@@ -1,5 +1,8 @@
-/* Core variables */
 :root {
+  /*************************************************************************************************
+  * Core variables
+  *************************************************************************************************/
+
   /* Fonts */
   --font-sans-serif: sans-serif;
   --font-serif: serif;
@@ -45,6 +48,480 @@
   --component-speed: .1s;
   --component-box-shadow-inner: inset 0 1px 1px rgba(0, 0, 0, .05);
   --component-box-shadow-outer: 0 1px 0 rgba(0, 0, 0, .05);
+
+  /*************************************************************************************************
+  * Alerts
+  *************************************************************************************************/
+
+  --alert-border-radius: var(--component-border-radius);
+  --alert-border-width: 1px;
+  --alert-padding-x: var(--component-padding-x);
+  --alert-padding-y: var(--component-padding-y);
+
+  /* Default */
+  --alert-bg-color: color(var(--state-primary) tint(75%));
+  --alert-color: color(var(--state-primary) lightness(25%));
+  --alert-border-color: color(var(--alert-bg-color) shade(5%));
+
+  /* Secondary */
+  --alert-bg-color-secondary: color(var(--state-secondary) tint(75%));
+  --alert-color-secondary: color(var(--state-secondary) lightness(25%));
+  --alert-border-color-secondary: color(var(--alert-bg-color-secondary) shade(5%));
+
+  /* Success */
+  --alert-bg-color-success: color(var(--state-success) tint(75%));
+  --alert-color-success: color(var(--state-success) lightness(25%));
+  --alert-border-color-success: color(var(--alert-bg-color-success) shade(5%));
+
+  /* Info */
+  --alert-bg-color-info: color(var(--state-info) tint(75%));
+  --alert-color-info: color(var(--state-info) lightness(25%));
+  --alert-border-color-info: color(var(--alert-bg-color-info) shade(5%));
+
+  /* Warning */
+  --alert-bg-color-warning: color(var(--state-warning) tint(75%));
+  --alert-color-warning: color(var(--state-warning) lightness(25%));
+  --alert-border-color-warning: color(var(--alert-bg-color-warning) shade(5%));
+
+  /* Danger */
+  --alert-bg-color-danger: color(var(--state-danger) tint(75%));
+  --alert-color-danger: color(var(--state-danger) lightness(25%));
+  --alert-border-color-danger: color(var(--alert-bg-color-danger) shade(5%));
+
+  /* Light */
+  --alert-bg-color-light: color(var(--state-light) tint(75%));
+  --alert-color-light: color(var(--state-dark) lightness(50%));
+  --alert-border-color-light: color(var(--alert-bg-color-light) shade(5%));
+
+  /* Dark */
+  --alert-bg-color-dark: color(var(--state-dark) tint(75%));
+  --alert-color-dark: color(var(--state-light) lightness(25%));
+  --alert-border-color-dark: color(var(--alert-bg-color-dark) shade(5%));
+
+  /*************************************************************************************************
+  * Badges
+  *************************************************************************************************/
+
+  --badge-font-size: .8em; /* ems for relative sizing */
+  --badge-border-radius: 1em;  /* ems for relative sizing */
+  --badge-focus-width: var(--input-focus-width);
+  --badge-speed: var(--component-speed);
+
+  /* Default */
+  --badge-color: var(--color-white);
+  --badge-bg-color: var(--state-primary);
+
+  /* Secondary */
+  --badge-color-secondary: var(--color-white);
+  --badge-bg-color-secondary: var(--state-secondary);
+
+  /* Success */
+  --badge-color-success: var(--color-white);
+  --badge-bg-color-success: var(--state-success);
+
+  /* Info */
+  --badge-color-info: var(--color-white);
+  --badge-bg-color-info: var(--state-info);
+
+  /* Warning */
+  --badge-color-warning: var(--color-white);
+  --badge-bg-color-warning: var(--state-warning);
+
+  /* Danger */
+  --badge-color-danger: var(--color-white);
+  --badge-bg-color-danger: var(--state-danger);
+
+  /* Light */
+  --badge-color-light: var(--state-dark);
+  --badge-bg-color-light: var(--state-light);
+
+  /* Dark */
+  --badge-color-dark: var(--state-light);
+  --badge-bg-color-dark: var(--state-dark);
+
+  /*************************************************************************************************
+  * Buttons
+  *************************************************************************************************/
+
+  --button-height-xs: var(--input-height-xs);
+  --button-height-sm: var(--input-height-sm);
+  --button-height: var(--input-height);
+  --button-height-lg: var(--input-height-lg);
+  --button-height-xl: var(--input-height-xl);
+  --button-font-size-xs: var(--input-font-size-xs);
+  --button-font-size-sm: var(--input-font-size-sm);
+  --button-font-size: var(--input-font-size);
+  --button-font-size-lg: var(--input-font-size-lg);
+  --button-font-size-xl: var(--input-font-size-xl);
+  --button-font-family: var(--input-font-family);
+  --button-font-weight: var(--input-font-weight);
+  --button-border-radius: var(--component-border-radius);
+  --button-border-width: var(--component-border-width);
+  --button-focus-width: var(--input-focus-width);
+  --button-speed: var(--component-speed);
+  --button-loader-size: 1em;
+  --button-loader-border-width: .15em;
+
+  /* Default */
+  --button-color: var(--color-white);
+  --button-bg-color: var(--state-primary);
+
+  /* Secondary */
+  --button-color-secondary: var(--color-white);
+  --button-bg-color-secondary: var(--state-secondary);
+
+  /* Success */
+  --button-color-success: var(--color-white);
+  --button-bg-color-success: var(--state-success);
+
+  /* Info */
+  --button-color-info: var(--color-white);
+  --button-bg-color-info: var(--state-info);
+
+  /* Warning */
+  --button-color-warning: var(--color-white);
+  --button-bg-color-warning: var(--state-warning);
+
+  /* Danger */
+  --button-color-danger: var(--color-white);
+  --button-bg-color-danger: var(--state-danger);
+
+  /* Light */
+  --button-color-light: var(--state-dark);
+  --button-bg-color-light: color(var(--state-light) shade(10%));
+
+  /* Dark */
+  --button-color-dark: var(--state-light);
+  --button-bg-color-dark: color(var(--state-dark) tint(10%));
+
+  /*************************************************************************************************
+  * Content
+  *************************************************************************************************/
+
+  --body-bg-color: var(--color-white);
+  --body-color: var(--color-black);
+  --font-family: var(--font-system);
+  --font-size: 1rem; /* Most browsers use a default font size of 16px */
+  --font-size-big: 1.25rem;
+  --font-size-small: .875rem;
+  --font-weight-light: 300;
+  --font-weight: 400;
+  --font-weight-bold: 700;
+  --line-height: 1.5;
+
+  --code-font-size: 90%;
+  --code-color: var(--color-black);
+  --code-border-radius: var(--component-border-radius);
+  --code-bg-color: var(--component-bg-color);
+  --code-padding-x: calc(var(--font-size) * .4);
+  --code-padding-y: calc(var(--font-size) * .2);
+
+  --headings-font-family: var(--font-system);
+  --headings-font-weight: var(--font-weight-light);
+  --headings-line-height: 1.1;
+  --headings-margin-bottom: .5rem;
+  --headings-color: inherit;
+  --headings-font-size-h1: 2.5rem;
+  --headings-font-size-h2: 2rem;
+  --headings-font-size-h3: 1.75rem;
+  --headings-font-size-h4: 1.5rem;
+  --headings-font-size-h5: 1.25rem;
+  --headings-font-size-h6: 1rem;
+
+  --hr-border-width: 1px;
+  --hr-border-color: var(--component-border-color);
+  --hr-margin-x: 0;
+  --hr-margin-y: 2rem;
+
+  --kbd-font-size: 90%;
+  --kbd-color: var(--color-white);
+  --kbd-border-radius: var(--component-border-radius);
+  --kbd-bg-color: var(--color-black);
+  --kbd-padding-x: calc(var(--font-size) * .4);
+  --kbd-padding-y: calc(var(--font-size) * .2);
+
+  --link-color: var(--state-primary);
+  --link-text-decoration: none;
+  --link-color-hover: var(--link-color);
+  --link-text-decoration-hover: underline;
+
+  --mark-color: inherit;
+  --mark-bg-color: var(--color-yellow);
+  --mark-padding-x: calc(var(--font-size) * .4);
+  --mark-padding-y: calc(var(--font-size) * .2);
+
+  --placeholder-color: var(--state-secondary);
+
+  --pre-color: var(--code-color);
+  --pre-border-radius: var(--component-border-radius);
+  --pre-bg-color: var(--code-bg-color);
+  --pre-max-height: none;
+
+  --selection-color: var(--color-white);
+  --selection-bg-color: var(--state-primary);
+
+  /*************************************************************************************************
+  * Dropdowns
+  *************************************************************************************************/
+
+  --dropdown-min-width: 10rem;
+  --dropdown-max-width: 25rem;
+  --dropdown-max-height: none;
+  --dropdown-border-color: var(--component-border-color);
+  --dropdown-border-radius: var(--component-border-radius);
+  --dropdown-border-width: var(--component-border-width);
+  --dropdown-color: var(--body-color);
+  --dropdown-color-hover: var(--color-white);
+  --dropdown-bg-color: var(--color-white);
+  --dropdown-bg-color-hover: var(--state-primary);
+  --dropdown-box-shadow: var(--component-box-shadow-outer);
+  --dropdown-divider-color: var(--component-border-color);
+  --dropdown-divider-width: var(--component-border-width);
+  --dropdown-padding-x: 1rem;
+  --dropdown-padding-y: .25rem;
+  --dropdown-offset-x: 0;
+  --dropdown-offset-y: 1px;
+  --dropdown-z-index: 100;
+
+  /*************************************************************************************************
+  * Forms
+  *************************************************************************************************/
+
+  --input-height-xs: 1.25rem;
+  --input-height-sm: 1.75rem;
+  --input-height: 2.25rem;
+  --input-height-lg: 2.75rem;
+  --input-height-xl: 3.25rem;
+  --input-font-size-xs: .7rem;
+  --input-font-size-sm: .8rem;
+  --input-font-size: 1rem;
+  --input-font-size-lg: 1.25rem;
+  --input-font-size-xl: 1.5rem;
+  --input-font-family: inherit;
+  --input-font-weight: inherit;
+  --input-color: var(--body-color);
+  --input-border-color: var(--component-border-color);
+  --input-border-color-focus: var(--state-primary);
+  --input-border-width: 1px;
+  --input-border-radius: var(--component-border-radius);
+  --input-bg-color: var(--color-white);
+  --input-box-shadow: var(--component-box-shadow-inner);
+  --input-readonly-bg-color: var(--component-bg-color);
+  --input-focus-width: 2px;
+  --input-speed: var(--component-speed);
+
+  --input-addon-bg-color: var(--component-bg-color);
+  --input-addon-color: var(--state-secondary);
+
+  --input-range-track-height: .5rem;
+  --input-range-track-color: var(--component-bg-color);
+  --input-range-track-box-shadow: var(--component-box-shadow-inner);
+  --input-range-thumb-height: 1.25rem;
+  --input-range-thumb-color: var(--state-primary);
+
+  --input-invalid-color: var(--state-danger);
+  --input-invalid-border-color: var(--state-danger);
+  --input-valid-color: var(--state-success);
+  --input-valid-border-color: var(--state-success);
+
+  --fieldset-border-color: var(--component-border-color);
+  --fieldset-border-width: var(--component-border-width);
+  --fieldset-border-radius: var(--component-border-radius);
+  --fieldset-padding-x: 2rem;
+  --fieldset-padding-y: 1.5rem;
+
+  --label-color: inherit;
+
+  /*************************************************************************************************
+  * Grid
+  *************************************************************************************************/
+
+  --container-max-width-sm: 540px;
+  --container-max-width-md: 720px;
+  --container-max-width-lg: 960px;
+  --container-max-width-xl: 1140px;
+
+  --grid-gutter-width: 2rem;
+
+  /*************************************************************************************************
+  * Loaders
+  *************************************************************************************************/
+
+  --loader-thickness: .2rem;
+  --loader-thickness-xs: calc(var(--loader-thickness) / 2);
+  --loader-thickness-sm: calc(var(--loader-thickness) / 1.5);
+  --loader-thickness-lg: calc(var(--loader-thickness) * 1.5);
+  --loader-thickness-xl: calc(var(--loader-thickness) * 2);
+  --loader-size-xs: var(--input-height-xs);
+  --loader-size-sm: var(--input-height-sm);
+  --loader-size: var(--input-height);
+  --loader-size-lg: var(--input-height-lg);
+  --loader-size-xl: var(--input-height-xl);
+  --loader-speed: 750ms;
+  --loader-margin-x: .5em;
+  --loader-margin-y: 0;
+
+  /* Default */
+  --loader-color: var(--state-primary);
+  --loader-bg-color: color(var(--state-primary) lightness(90%));
+
+  /* Secondary */
+  --loader-color-secondary: var(--state-secondary);
+  --loader-bg-color-secondary: color(var(--state-secondary) lightness(90%));
+
+  /* Success */
+  --loader-color-success: var(--state-success);
+  --loader-bg-color-success: color(var(--state-success) lightness(90%));
+
+  /* Info */
+  --loader-color-info: var(--state-info);
+  --loader-bg-color-info: color(var(--state-info) lightness(90%));
+
+  /* Warning */
+  --loader-color-warning: var(--state-warning);
+  --loader-bg-color-warning: color(var(--state-warning) lightness(90%));
+
+  /* Danger */
+  --loader-color-danger: var(--state-danger);
+  --loader-bg-color-danger: color(var(--state-danger) lightness(90%));
+
+  /* Light */
+  --loader-color-light: var(--state-light);
+  --loader-bg-color-light: color(var(--state-light) lightness(90%));
+
+  /* Dark */
+  --loader-color-dark: var(--state-dark);
+  --loader-bg-color-dark: color(var(--state-dark) lightness(90%));
+
+  /*************************************************************************************************
+  * Progress Bars
+  *************************************************************************************************/
+
+  --progress-height: var(--input-height);
+  --progress-height-xs: var(--input-height-xs);
+  --progress-height-sm: var(--input-height-sm);
+  --progress-height-lg: var(--input-height-lg);
+  --progress-height-xl: var(--input-height-xl);
+  --progress-font-size: var(--input-font-size);
+  --progress-font-size-xs: var(--input-font-size-xs);
+  --progress-font-size-sm: var(--input-font-size-sm);
+  --progress-font-size-lg: var(--input-font-size-lg);
+  --progress-font-size-xl: var(--input-font-size-xl);
+  --progress-color: var(--color-white);
+  --progress-bg-color: var(--component-bg-color);
+  --progress-bar-color: var(--state-primary);
+  --progress-border-radius: var(--component-border-radius);
+  --progress-box-shadow: var(--component-box-shadow-inner);
+  --progress-speed: var(--component-speed);
+  --progress-speed-indeterminate: 3s;
+
+  /*************************************************************************************************
+  * Switches
+  *************************************************************************************************/
+
+  --switch-height: calc(var(--input-height) * .75);
+  --switch-height-xs: calc(var(--input-height-xs) * .75);
+  --switch-height-sm: calc(var(--input-height-sm) * .75);
+  --switch-height-lg: calc(var(--input-height-lg) * .75);
+  --switch-height-xl: calc(var(--input-height-xl) * .75);
+  --switch-font-size: var(--input-font-size);
+  --switch-font-size-xs: var(--input-font-size-xs);
+  --switch-font-size-sm: var(--input-font-size-sm);
+  --switch-font-size-lg: var(--input-font-size-lg);
+  --switch-font-size-xl: var(--input-font-size-xl);
+  --switch-border-radius: var(--switch-height);
+  --switch-thumb-border-radius: 50%;
+  --switch-thumb-spacing: 2px;
+  --switch-focus-width: var(--input-focus-width);
+  --switch-speed: var(--component-speed);
+
+  /* Default */
+  --switch-color: var(--state-primary);
+  --switch-bg-color: var(--component-border-color);
+  --switch-thumb-color: var(--color-white);
+
+  /* Secondary */
+  --switch-color-secondary: var(--state-secondary);
+  --switch-bg-color-secondary: var(--component-border-color);
+  --switch-thumb-color-secondary: var(--color-white);
+
+  /* Success */
+  --switch-color-success: var(--state-success);
+  --switch-bg-color-success: var(--component-border-color);
+  --switch-thumb-color-success: var(--color-white);
+
+  /* Info */
+  --switch-color-info: var(--state-info);
+  --switch-bg-color-info: var(--component-border-color);
+  --switch-thumb-color-info: var(--color-white);
+
+  /* Warning */
+  --switch-color-warning: var(--state-warning);
+  --switch-bg-color-warning: var(--component-border-color);
+  --switch-thumb-color-warning: var(--color-white);
+
+  /* Danger */
+  --switch-color-danger: var(--state-danger);
+  --switch-bg-color-danger: var(--component-border-color);
+  --switch-thumb-color-danger: var(--color-white);
+
+  /* Light */
+  --switch-color-light: color(var(--state-light) shade(25%));
+  --switch-bg-color-light: color(var(--state-light) shade(10%));
+  --switch-thumb-color-light: var(--color-white);
+
+  /* Dark */
+  --switch-color-dark: color(var(--state-dark) tint(10%));
+  --switch-bg-color-dark: color(var(--state-dark) tint(25%));
+  --switch-thumb-color-dark: var(--color-white);
+
+  /*************************************************************************************************
+  * Tables
+  *************************************************************************************************/
+
+  --table-bg-color: var(--color-white);
+  --table-border-color: var(--component-border-color);
+  --table-border-width: var(--component-border-width);
+  --table-header-bg-color: transparent;
+  --table-spacing-x: .75rem;
+  --table-spacing-y: .5rem;
+  --table-hover-color: var(--color-white);
+  --table-hover-bg-color: var(--state-primary);
+  --table-stripe-bg-color: var(--component-bg-color);
+
+  /*************************************************************************************************
+  * Tabs
+  *************************************************************************************************/
+
+  --tab-bg-color: var(--body-bg-color);
+  --tab-bg-color-hover: var(--body-bg-color);
+  --tab-bg-color-active: var(--link-color);
+  --tab-bg-color-disabled: var(--body-bg-color);
+  --tab-border-radius: var(--component-border-radius);
+  --tab-color: var(--link-color);
+  --tab-color-hover: var(--link-color-hover);
+  --tab-color-active: var(--color-white);
+  --tab-color-disabled: var(--state-secondary);
+  --tab-padding-x: var(--component-padding-x);
+  --tab-padding-y: calc(var(--component-padding-y) / 2);
+  --tab-focus-width: var(--input-focus-width);
+  --tab-speed: var(--component-speed);
+
+  --tab-pane-border-color: var(--component-border-color);
+  --tab-pane-border-radius: var(--component-border-radius);
+  --tab-pane-border-width: var(--component-border-width);
+  --tab-pane-padding-x: var(--component-padding-x);
+  --tab-pane-padding-y: var(--component-padding-y);
+
+  /*************************************************************************************************
+  * Utilities
+  *************************************************************************************************/
+
+  --spacing-xs: .5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 1.5rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 2.5rem;
 }
 
 /* Core breakpoints */