$font-prefix: '';

$font-config-h: (
  h1: (
    font-size: 24px,
    line-height: 32px,
    font-weight: 500,
  ),
  h2: (
    font-size: 20px,
    line-height: 28px,
    font-weight: 500,
  ),
  h3: (
    font-size: 18px,
    line-height: 24px,
    font-weight: 500,
  ),

  h4: (
    font-size: 14px,
    line-height: 20px,
    font-weight: 500,
  ),
  h5: (
    font-size: 12px,
    line-height: 16px,
    font-weight: 500,
  ),
  h6: (
    font-size: 10px,
    line-height: 12px,
    font-weight: 500,
  ),
);

$font-config-body: (
  'p-large': (
    font-size: 16px,
    line-height: 22px,
  ),
  'p-medium': (
    font-size: 14px,
    line-height: 20px,
  ),
  'p-small': (
    font-size: 12px,
    line-height: 16px,
  ),
  'p-mini': (
    font-size: 10px,
    line-height: 14px,
  ),
  'p-tiny': (
    font-size: 8px,
    line-height: 10px,
  ),
);

%h {
  font-style: normal;
  // letter-spacing: -0.02rem;letter-spacingletter-spacingletter-spacingletter-spacingletter-spacing
  margin: 0;
}

@each $selector, $value in $font-config-h {
  #{$selector},
  .#{$selector},
  %#{$selector} {
    @extend %h;
    @each $prop-name, $prop-value in $value {
      --#{$selector}-#{$prop-name}: #{$prop-value};
      #{$prop-name}: var(--#{$selector}-#{$prop-name});
    }
  }
}
@each $selector, $value in $font-config-body {
  .#{$selector},
  %#{$selector} {
    @each $prop-name, $prop-value in $value {
      --#{$selector}-#{$prop-name}: #{$prop-value};
      #{$prop-name}: var(--#{$selector}-#{$prop-name});
    }
  }
}