@use "../common/utils" as *;
@use "../common/mixins" as *;

body {
    font-family: var(--font-family-body);
    font-weight: 500;
    color: rgba(var(--color-body), 1);
}

label {
    color: rgba(var(--color-body), 1);
}

body,
input,
button,
select,
option,
address,
label,
a {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-normal);
    font-size: calc-rem(12px);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-weight: 500;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
p,
.paragraph {
    margin: 0 0 calc-rem(20px) 0;
    line-height: 1.8;
}

h1, .h1 {
    font-size: clamp-font(38px, 62px);
    line-height: 0.9;
}

h2, .h2 {
    font-size: clamp-font(20px, 25px);
    line-height: 1.1;
    margin-bottom: calc-rem(20px);
}

h3, .h3 {
    font-size: clamp-font(14px, 18px);
}

h4, .h4 {
    font-size: calc-rem(20px);
}

h5, .h5 {
    font-size: calc-rem(18px);
}

h6, .h6 {
    font-size: calc-rem(16px);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    letter-spacing: calc-rem(0.5px);
    font-family: var(--font-family-headings);
    color: rgba(var(--color-headings), 1);
    text-transform: var(--text-transform-headings);
    font-weight: var(--font-weight-extra-bold);
    font-variation-settings: var(--font-variation-settings-extended-bold);
}

p{
    font-size: clamp-font(12px, 14px);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
strong {
    font-weight: var(--font-weight-bold);
}
