@use 'themes';
@use 'colors';
@use 'spacing';
@use 'typography';
@use 'ui';

:root {
  // Colors
  @each $color, $value in colors.$grays {
    --#{$color}-color: #{$value};
  }
  // Spacings
  @each $spacing, $value in spacing.$spacings {
    --spacing-#{$spacing}: #{$value};
  }
  // Fonts
  @each $font, $value in typography.$font-families {
    --font-#{$font}: #{$value};
  }
  // Font weights
  @each $weight, $value in typography.$font-weights {
    --font-weight-#{$weight}: #{$value};
  }
  // Typography
  @each $size, $value in typography.$font-size-scale {
    --#{$size}-font-size: #{$value};
  }
  // Line heights
  @each $line-height, $value in typography.$line-heights {
    --#{$line-height}: #{$value};
  }
  // Icons
  @each $icon, $value in ui.$icons {
    --icon-#{$icon}: #{$value};
  }
  // Border radius
  @each $border-radius, $value in ui.$ui-border-radius {
    --#{$border-radius}: #{$value};
  }
}