:root {
  // CSS Variable naming: [prefix][use-case or element name][__state (hover, active, ...)]
  // *** Design
  --#{$CSS_VAR_PFX}border-width: #{$BORDER_WIDTH};
  --#{$CSS_VAR_PFX}border-radius: #{$BORDER_RADIUS};
  --#{$CSS_VAR_PFX}hover-brightness: #{$HOVER_BRIGHTNESS};
  --#{$CSS_VAR_PFX}backdrop-opacity: #{$BACKDROP_OPACITY};

  // *** Typography
  --#{$CSS_VAR_PFX}max-font-size: #{$MAX_FONT_SIZE};
  --#{$CSS_VAR_PFX}min-font-size: #{$MIN_FONT_SIZE};

  --#{$CSS_VAR_PFX}primary-font-family: #{$PRIMARY_FONT_FAMILY};
  --#{$CSS_VAR_PFX}heading-font-family: #{$HEADING_FONT_FAMILY};
  --#{$CSS_VAR_PFX}code-font-family: #{$CODE_FONT_FAMILY};

  --#{$CSS_VAR_PFX}base-line-height: #{$BASE_LINE_HEIGHT};
  --#{$CSS_VAR_PFX}small-line-height: #{$SMALL_LINE_HEIGHT};
  --#{$CSS_VAR_PFX}large-line-height: #{$LARGE_LINE_HEIGHT};

  --#{$CSS_VAR_PFX}medium-font-weight: #{$MEDIUM_FONT_WEIGHT};
  --#{$CSS_VAR_PFX}bold-font-weight: #{$BOLD_FONT_WEIGHT};
  --#{$CSS_VAR_PFX}extra-bold-font-weight: #{$EXTRA_BOLD_FONT_WEIGHT};

  --#{$CSS_VAR_PFX}body-text-align: #{$BODY_TEXT_ALIGN};

  --#{$CSS_VAR_PFX}heading-font-style: #{$HEADING_FONT_STYLE};
  --#{$CSS_VAR_PFX}heading-font-weight: #{$HEADING_FONT_WEIGHT};
  --#{$CSS_VAR_PFX}heading-mb: #{$HEADING_MARGIN_BOTTOM};

  --#{$CSS_VAR_PFX}paragraph-mb: #{$PARAGRAPH_MARGIN_BOTTOM};

  --#{$CSS_VAR_PFX}link-decoration: #{$LINK_DECORATION};
  --#{$CSS_VAR_PFX}link-decoration__hover: #{$LINK_DECORATION_HOVER};
  --#{$CSS_VAR_PFX}link-decoration__focus: #{$LINK_DECORATION_FOCUS};

  // *** Colors
  --#{$CSS_VAR_PFX}bg-color: #{$BG_COLOR};
  --#{$CSS_VAR_PFX}bg-color-dark: #{$BG_COLOR_2};
  --#{$CSS_VAR_PFX}bg-color-darker: #{$BG_COLOR_3};
  --#{$CSS_VAR_PFX}bg-color-darkest: #{$BG_COLOR_4};

  --#{$CSS_VAR_PFX}txt-color: #{$TXT_COLOR};
  --#{$CSS_VAR_PFX}txt-color-light: #{$TXT_COLOR_LIGHT};
  --#{$CSS_VAR_PFX}txt-color-dark: #{$TXT_COLOR_DARK};
  --#{$CSS_VAR_PFX}txt-color-inverted: #{$TXT_COLOR_INVERTED};
  --#{$CSS_VAR_PFX}heading-color: #{$HEADING_COLOR};

  @each $name, $colors in $PALETTE {
    // Palette include basic colors, states [danger, warning ...] and accent color with shade and tint
    @each $type, $color in $colors {
      --#{$CSS_VAR_PFX + 'color-' + $name + "-" + $type}: #{$color};
    }
  }

  --#{$CSS_VAR_PFX}tap-highlight-color: #{$TAP_HIGHLIGHT_COLOR};

  --#{$CSS_VAR_PFX}link-color: #{$LINK_COLOR};
  --#{$CSS_VAR_PFX}link-color__hover: #{$LINK_COLOR_HOVER};
  --#{$CSS_VAR_PFX}link-color__focus: #{$LINK_COLOR_FOCUS};

  // *** Icons
  --#{$CSS_VAR_PFX}arrow-down-icon: #{$ARROW_DOWN_ICON};
  --#{$CSS_VAR_PFX}blockquote-icon: #{$BLOCKQUOTE_ICON};
  --#{$CSS_VAR_PFX}close-icon: #{$CLOSE_ICON};
  --#{$CSS_VAR_PFX}eye-icon: #{$EYE_ICON};
  --#{$CSS_VAR_PFX}search-icon: #{$SEARCH_ICON};
  --#{$CSS_VAR_PFX}select-icon: #{$SELECT_ICON};

  // *** Motion
  --#{$CSS_VAR_PFX}simple-transition: #{$SIMPLE_TRANSITION};
  --#{$CSS_VAR_PFX}bouncing-transition: #{$BOUNCING_TRANSITION};
  --#{$CSS_VAR_PFX}long-transition: #{$LONG_TRANSITION};
}