:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
    --#{$variable-prefix}#{$color}: #{$value};
  }

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

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

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

  // Root and body
  --#{$variable-prefix}root-font-size: #{$font-size-root};
  --#{$variable-prefix}body-font: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-color: #{$body-color};
  --#{$variable-prefix}body-bg: #{$body-bg};

  // Layout
  --#{$variable-prefix}grid-columns: #{$grid-columns};
  --#{$variable-prefix}grid-gutter-width: #{$grid-gutter-width};

  // Spacing
  // TODO: Ideally we'd size these values based on the CSS var instead of the Sass map, so they'd be live updating, but TBD on feasibility
  --#{$variable-prefix}spacer: #{$spacer};
  @each $size, $value in $spacers {
    --#{$variable-prefix}spacer-#{$size}: #{$value};
  }
}