:root {

  // Colors
  //
  // Generate palettes for full colors, grays, and theme colors.

  @each $color, $value in $colors {
    --#{$prefix}#{$color}: #{$value};
  }

  @each $color, $value in $grays {
    --#{$prefix}gray-#{$color}: #{$value};
  }

  --#{$prefix}white-rgb: #{to-rgb($white)};
  --#{$prefix}black-rgb: #{to-rgb($black)};
  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

  // Fonts

  // Note: Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  //
  --#{$prefix}font-base: #{inspect($font-family-base)};
  --#{$prefix}font-heading: #{inspect($font-family-heading)};
  --#{$prefix}font-code: #{inspect($font-family-code)};
  --#{$prefix}font-sans: #{inspect($font-family-sans)};

  // Root and body
  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }

  --#{$prefix}body-font-size: #{$font-size-base};
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};

  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }

  --#{$prefix}link-color: #{$link-color};
  --#{$prefix}link-hover-color: #{$link-hover-color};

  --#{$prefix}body-bg: #{$body-bg};

  --#{$prefix}border-radius: #{$border-radius};
  --#{$prefix}border-radius-sm: #{$border-radius-sm};
  --#{$prefix}border-radius-lg: #{$border-radius-lg};
  --#{$prefix}border-radius-xl: #{$border-radius-xl};
  --#{$prefix}border-radius-pill: #{$border-radius-pill};
  // scss-docs-end root-border-var

  --#{$prefix}tooltip-border-radius: #{$tooltip-radius};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-font-size: #{$tooltip-font-size};
  --#{$prefix}tooltip-font-family: #{$tooltip-font-family};
  --#{$prefix}tooltip-font-style: #{$tooltip-font-style};

  // Aspect Ratio

  @each $key, $ratio in $aspect-ratios {
    --#{$prefix}aspect-ratio: #{$ratio};
  }

  --#{$prefix}ratio-bg-color: $aspect-ratio-bg-color;

  // SVG Icons

  --#{$prefix}svg-color: currentColor;
  --#{$prefix}svg-width: 1.4;

  --#{$prefix}svg-plus: #{url(icon-plus())};
  --#{$prefix}svg-minus: #{url(icon-minus())};
  --#{$prefix}svg-check: #{url(icon-check())};
  --#{$prefix}svg-cross: #{url(icon-cross())};
  --#{$prefix}svg-square: #{url(icon-square())};
  --#{$prefix}svg-arrow: #{url(icon-arrow())};
  --#{$prefix}svg-menu: #{url(icon-menu())};
  --#{$prefix}svg-image: #{url(icon-image())};
  --#{$prefix}svg-search: #{url(icon-search())};
  --#{$prefix}svg-delete: #{url(icon-delete())};
  --#{$prefix}svg-bell: #{url(icon-bell())};

  --#{$prefix}icon-switch: #{url(icon-square($form-switch-color, calc($form-switch-width / 2)))};
}