//
// CSS Variables
// --------------------------------------------------
:root {
  //Colors
  @each $name, $color in $base-palette {
    --#{$name}-color: #{$color};
  }

  --white-color: #{$white-base};
  --black-color: #{$black-base};
  --medium-gray-color: #{$medium-gray-base};
  --light-gray-color: #{$light-gray-base};
  --gray-color: #{$gray-base};
  --dark-gray-color: #{$dark-gray-base};

  //Font
  --body-font: #{$base-font-family};
  --title-font: #{$title-font-family};

  //HR
  --hr-margin: #{$hr-margin};
  --hr-padding: #{$hr-padding-class};

  //Breakpoint size
  @each $-size, $-val in $breakpoints {
    --breakpoint-#{$-size}: #{$-val};
  }
}