@use "./variables" as *;

:root {
  interpolate-size: allow-keywords;

  --spacer: #{$spacer};

  --html-color: #{$html-color};
  --html-line-height: #{$html-line-height};
  --html-font-family: #{$html-font-family};
  --html-font-size: #{$html-font-size};

  --body-background: #{$body-background};

  --headings-color: #{$headings-color};

  --box-shadow-small: #{$box-shadow-small};
  --box-shadow-medium: #{$box-shadow-medium};
  --box-shadow-large: #{$box-shadow-large};

  --border-color-main: #{$border-color-main};
  --border-color-hover-main: #{$border-color-hover-main};
  --border-color-active-main: #{$border-color-active-main};
  --border-color-focus-main: #{$border-color-focus-main};
  --border-color-disabled-main: #{$border-color-disabled-main};

  @each $key, $value in $grays {
    --#{$key}: #{$value};
  }

  @each $key, $value in $all-colors {
    --#{$key}: #{$value};
  }

  @each $key, $value in $zindexes {
    --zindex-#{$key}: #{$value};
  }

  @each $key, $value in $font-sizes {
    --font-size-#{$key}: #{$value};
  }

  @each $key, $value in $heading-font-sizes {
    --h#{$key}-font-size: #{$value};
  }

  @each $key, $value in $border-radii {
    --border-radius-#{$key}: #{$value};
  }

  @each $name, $value in $breakpoints {
    --breakpoint-#{$name}: #{$value};
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}