/**
 * Style v4 Typography
 * -----------------------------------------------------------------------------
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

// font-family
$inter: 'Inter', sans-serif;

%font-bold {
  font-family: $inter;
  font-weight: 700;
}
%font-semibold {
  font-family: $inter;
  font-weight: 600;
}
%font-medium {
  font-family: $inter;
  font-weight: 500;
}
%font-regular {
  font-family: $inter;
  font-weight: 400;
}

// region heading
%font-title {
  font-size: 2.5rem;
  line-height: 3rem;
  letter-spacing: -0.055rem;
  @extend %font-semibold;
}
%font-heading-1 {
  font-size: 1.5rem;
  line-height: 1.75rem;
  letter-spacing: -0.0285rem;
  @extend %font-semibold;
}
%font-heading-2 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  letter-spacing: -0.01575rem;
  @extend %font-semibold;
}
%font-heading-3 {
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.011rem;
  @extend %font-semibold;
}
%font-heading-4 {
  font-size: 0.875rem;
  line-height: 1rem;
  letter-spacing: unset;
  @extend %font-semibold;
}
%font-heading-5 {
  font-size: 0.8125rem;
  line-height: 16px;
  letter-spacing: unset;
  @extend %font-semibold;
}
%font-heading-6 {
  font-size: 0.75rem;
  line-height: 0.75rem;
  letter-spacing: 0;
  @extend %font-semibold;
}
// endregion

// region body
%font-body-1 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.00525rem;
  @extend %font-regular;
}
%font-body-2 {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  letter-spacing: -0.00244rem;
  @extend %font-regular;
}
// endregion

// region subtitle
%font-subtitle-1 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.00525rem;
  @extend %font-medium;
}
%font-subtitle-2 {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  letter-spacing: -0.00244rem;
  @extend %font-medium;
}
// endregion

// region chart
%font-chart-1 {
  font-size: 1.5rem;
  line-height: 1.5rem;
  letter-spacing: -0.015rem;
  @extend %font-bold;
}
%font-chart-2 {
  font-size: 1.25rem;
  line-height: 1.25rem;
  letter-spacing: -0.0125rem;
  @extend %font-bold;
}
// endregion


// region other
%font-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.00875rem;
  @extend %font-semibold;
}
%font-overline {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.045rem;
  text-transform: uppercase;
  @extend %font-medium;
}
%font-caption {
  font-size: 0.75rem;
  line-height: 1rem;
  @extend %font-regular;
}
%font-table-label {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  letter-spacing: 0.00813rem;
  @extend %font-semibold;
}
%font-input-label {
  font-size: 0.8125rem;
  line-height: 1rem;
  letter-spacing: 0.00813rem;
  @extend %font-medium;
}
%font-tab-label1 {
  font-size: 0.875rem;
  line-height: 1rem;
  @extend %font-medium;
}
%font-tab-label2 {
  font-size: 0.875rem;
  line-height: 1rem;
  @extend %font-bold;
}
%font-chip-label {
  font-size: 0.75rem;
  line-height: 1rem;
  @extend %font-semibold;
}
// endregion

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.font-title {
  @extend %font-title;
}

.font-heading-1 {
  @extend %font-heading-1;
}

.font-heading-2 {
  @extend %font-heading-2;
}

.font-heading-3 {
  @extend %font-heading-3;
}

.font-heading-4 {
  @extend %font-heading-4;
}

.font-heading-5 {
  @extend %font-heading-5;
}

.font-heading-6 {
  @extend %font-heading-6;
}

.font-body-1 {
  @extend %font-body-1;
}

.font-body-2 {
  @extend %font-body-2;
}

.font-subtitle-1 {
  @extend %font-subtitle-1;
}

.font-subtitle-2 {
  @extend %font-subtitle-2;
}

.font-chart-1 {
  @extend %font-chart-1;
}

.font-chart-2 {
  @extend %font-chart-2;
}

.font-button {
  @extend %font-button;
}

.font-overline {
  @extend %font-overline;
}

.font-caption {
  @extend %font-caption;
}

.font-table-label {
  @extend %font-table-label;
}

.font-input-label {
  @extend %font-input-label;
}

.font-tab-label1 {
  @extend %font-tab-label1;
}

.font-tab-label2 {
  @extend %font-tab-label2;
}

.font-chip-label {
  @extend %font-chip-label;
}