@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/commissioner-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/commissioner-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/golos-text-cyrillic-400-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/golos-text-latin-400-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-display: "Commissioner", Arial, sans-serif;
  --font-body: "Golos Text", Arial, sans-serif;
  --type-display: clamp(36px, 4.6vw, 62px);
  --type-h1: clamp(32px, 3vw, 38px);
  --type-h2: clamp(27px, 3vw, 38px);
  --type-h3: clamp(20px, 2vw, 28px);
  --type-h4: 20px;
  --type-h5: 17px;
  --type-h6: 14px;
  --type-body-lg: 16px;
  --type-body: 16px;
  --type-body-sm: 14px;
  --type-label: 11px;
  --type-button: 16px;
  --leading-heading: 1.08;
  --tracking-heading: -.035em;
  --leading-body: 1.55;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-heading: 700;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}

body :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

body h1 { font-size: var(--type-h1); }
body h2 { font-size: var(--type-h2); }
body h3 { font-size: var(--type-h3); }
body h4 { font-size: var(--type-h4); }
body h5 { font-size: var(--type-h5); }
body h6 { font-size: var(--type-h6); }

button,
input,
select,
textarea {
  font-family: var(--font-body);
}

:where(.catalog-card__price, .house-price, .spec-row span:last-child, .brief-price) {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 680px) {
  :root {
    --type-display: clamp(32px, 9vw, 42px);
    --type-h1: clamp(30px, 8.5vw, 34px);
    --type-h2: clamp(26px, 7.5vw, 34px);
    --type-h3: clamp(20px, 5.8vw, 24px);
    --type-body-lg: 16px;
    --type-body: 16px;
  }
}