:root {
  // colors
  @each $steller-color-name, $steller-color-value in $steller-colors {
    --color-#{$steller-color-name}: #{inspect($steller-color-value)};
  }

  @each $steller-font-family-name, $steller-font-family-value in $steller-font-families {
    --font-family-#{$steller-font-family-name}: #{inspect($steller-font-family-value)};
  }

  @each $steller-font-size-name, $steller-font-size-value in $steller-font-sizes {
    --font-size-#{$steller-font-size-name}: #{inspect($steller-font-size-value)};
  }

  @each $steller-font-weight-name, $steller-font-weight-value in $steller-font-weights {
    --font-weight-#{$steller-font-weight-name}: #{inspect($steller-font-weight-value)};
  }

  @each $steller-leading-name, $steller-leading-value in $steller-leadings {
    --leading-#{$steller-leading-name}: #{inspect($steller-leading-value)};
  }

  @each $steller-letter-spacing-name, $steller-letter-spacing-value in $steller-letter-spacings {
    --letter-spacing-#{$steller-letter-spacing-name}: #{inspect($steller-letter-spacing-value)};
  }

  // breakpoints
  @each $steller-breakpoint-name, $steller-breakpoint-value in $steller-breakpoints {
    --breakpoint-#{$steller-breakpoint-name}: #{inspect($steller-breakpoint-value)};
  }

  // container
  --container-width: #{inspect($steller-container-width)};

  // grid
  --grid-columns: #{inspect($steller-grid-columns)};

  @each $steller-column-gutter-name, $steller-column-gutter-value in $steller-column-gutters {
    --column-gutter-#{$steller-column-gutter-name}: #{inspect($steller-column-gutter-value)};
  }

  @each $steller-row-gutter-name, $steller-row-gutter-value in $steller-row-gutters {
    --row-gutter-#{$steller-row-gutter-name}: #{inspect($steller-row-gutter-value)};
  }

  // spacing
  @each $steller-spacing-name, $steller-spacing-value in $steller-spacings {
    --spacing-#{$steller-spacing-name}: #{inspect($steller-spacing-value)};
  }

  // borders
  @each $steller-border-radius-name, $steller-border-radius-value in $steller-border-radiuses {
    --border-radius-#{$steller-border-radius-name}: #{inspect($steller-border-radius-value)};
  }

  // spacing
  @each $steller-border-width-name, $steller-border-width-value in $steller-border-widths {
    --border-width-#{$steller-border-width-name}: #{inspect($steller-border-width-value)};
  }

  // motion
  @each $steller-speed-name, $steller-speed-value in $steller-durations {
    --speed-#{$steller-speed-name}: #{inspect($steller-speed-value)};
  }

  // effects
  @each $steller-box-shadow-name, $steller-box-shadow-value in $steller-box-shadows {
    --box-shadow-#{$steller-box-shadow-name}: #{inspect($steller-box-shadow-value)};
  }
}