@use '../variables' as variables;

:root {
  @each $color, $value in variables.$colors {
    --#{$color}: #{$value};
  }

  @each $color, $value in variables.$grays {
    --#{$color}: #{$value};
  }

  @each $color, $value in variables.$social-colors {
    --#{$color}: #{$value};
  }

  --input-btn-focus-color: #{variables.$input-btn-focus-color};
  --input-btn-focus-box-shadow: #{variables.$input-btn-focus-box-shadow};
  --form-label-color: #{variables.$form-label-color};
  --input-plaintext-color: #{variables.$input-plaintext-color};

  // body

  --body-bg: #{variables.$body-bg};
  --body-color: #{variables.$body-color};
  --body-text-align: #{variables.$body-text-align};

  // border

  --border-color: #{variables.$border-color};
  --border-color-hover: #{variables.$border-color-hover};
  --border-width: #{variables.$border-width};

  // border radius

  --border-radius-sm: #{variables.$border-radius-sm};
  --border-radius: #{variables.$border-radius};
  --border-radius-lg: #{variables.$border-radius-lg};

  // box shadow

  --box-shadow-sm: #{variables.$box-shadow-sm};
  --box-shadow: #{variables.$box-shadow};
  --box-shadow-lg: #{variables.$box-shadow-lg};

  // code / pre

  --code-color: #{variables.$code-color};
  --code-font-size: #{variables.$code-font-size};
  --pre-color: #{variables.$pre-color};

  // dt

  --dt-font-weight: #{variables.$dt-font-weight};

  // hr

  --hr-color: #{variables.$hr-color};
  --hr-height: #{variables.$hr-height};
  --hr-margin-y: #{variables.$hr-margin-y};
  --hr-opacity: #{variables.$hr-opacity};

  // kbd

  --kbd-bg: #{variables.$kbd-bg};
  --kbd-color: #{variables.$kbd-color};
  --kbd-font-size: #{variables.$kbd-font-size};
  --kbd-padding-x: #{variables.$kbd-padding-x};
  --kbd-padding-y: #{variables.$kbd-padding-y};
  --nested-kbd-font-weight: #{variables.$nested-kbd-font-weight};

  // legend

  --legend-font-size: #{variables.$legend-font-size};
  --legend-font-weight: #{variables.$legend-font-weight};
  --legend-margin-bottom: #{variables.$legend-margin-bottom};

  // link

  --link-color: #{variables.$link-color};
  --link-decoration: #{variables.$link-decoration};
  --link-hover-color: #{variables.$link-hover-color};
  --link-hover-decoration: #{variables.$link-hover-decoration};

  // list

  --list-item-margin-bottom: #{variables.$list-item-margin-bottom};
  --list-margin-bottom: #{variables.$list-margin-bottom};
  --list-padding-left: #{variables.$list-padding-left};

  // mark

  --mark-bg: #{variables.$mark-bg};
  --mark-padding: #{variables.$mark-padding};

  // paragraph

  --paragraph-margin-bottom: #{variables.$paragraph-margin-bottom};

  // typography

  --font-family-base: #{variables.$font-family-base};
  --font-family-monospace: #{variables.$font-family-monospace};
  --font-family-sans-serif: #{variables.$font-family-sans-serif};
  --font-family-serif: #{variables.$font-family-serif};

  --font-size-base: #{variables.$font-size-base};
  --font-size-xs: #{variables.$font-size-xs};
  --font-size-sm: #{variables.$font-size-sm};
  --font-size-lg: #{variables.$font-size-lg};
  --font-size-xl: #{variables.$font-size-xl};

  --font-weight-base: #{variables.$font-weight-normal};
  --font-weight-light: #{variables.$font-weight-light};
  --font-weight-normal: #{variables.$font-weight-normal};
  --font-weight-semi-bold: #{variables.$font-weight-semi-bold};
  --font-weight-bold: #{variables.$font-weight-bold};
  --font-weight-extra-bold: #{variables.$font-weight-extra-bold};

  --h1-font-size: #{variables.$h1-font-size};
  --h2-font-size: #{variables.$h2-font-size};
  --h3-font-size: #{variables.$h3-font-size};
  --h4-font-size: #{variables.$h4-font-size};
  --h5-font-size: #{variables.$h5-font-size};
  --h6-font-size: #{variables.$h6-font-size};

  --headings-font-family: #{variables.$headings-font-family};
  --headings-font-style: #{variables.$headings-font-style};
  --headings-font-weight: #{variables.$headings-font-weight};
  --headings-line-height: #{variables.$headings-line-height};
  --headings-margin-bottom: #{variables.$headings-margin-bottom};

  --display1-size: #{variables.$display1-size};
  --display2-size: #{variables.$display2-size};
  --display3-size: #{variables.$display3-size};
  --display4-size: #{variables.$display4-size};

  --display1-weight: #{variables.$display1-weight};
  --display2-weight: #{variables.$display2-weight};
  --display3-weight: #{variables.$display3-weight};
  --display4-weight: #{variables.$display4-weight};

  --display-line-height: #{variables.$display-line-height};

  --letter-spacing-normal: #{variables.$letter-spacing-normal};
  --letter-spacing-lg: #{variables.$letter-spacing-lg};

  --line-height-sm: #{variables.$line-height-sm};
  --line-height-base: #{variables.$line-height-base};
  --line-height-lg: #{variables.$line-height-lg};

  --small-font-size: #{variables.$small-font-size};
}