/* LIKE — единая публичная типографика.
   Onest Variable: локальный шрифт с кириллицей и латиницей.
   Для интерфейса используется необходимый диапазон насыщенности 400–700. */

@font-face {
  font-family: "Onest";
  src: url("../assets/fonts/onest/onest-variable.woff2?v=cb4d777c") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Единственная каноническая цепочка шрифтов проекта. */
  --like-font-family: "Onest", "Segoe UI", Arial, sans-serif;

  /* Совместимые алиасы для уже существующих компонентов. */
  --like-font-body: var(--like-font-family);
  --like-font-heading: var(--like-font-family);
  --like-font-display: var(--like-font-family);
  --like-font-condensed: var(--like-font-family);
  --like-font-text: var(--like-font-family);
  --font-body: var(--like-font-family);
  --font-head: var(--like-font-family);

  --fs-base: 16px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --like-primary-title-size: clamp(40px, 3.05vw, 48px);
  --like-section-hero-title-size: clamp(54px, 5.55vw, 96px);
  --lh-body: 1.55;
  --lh-head: 1.12;
  --ls-head: -.01em;
}

body {
  font-family: var(--like-font-family);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.page-title {
  font-family: var(--like-font-heading);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-transform: none;
  overflow-wrap: break-word;
}

h1,
.h1 { font-size: var(--fs-h1); }
h2,
.h2 { font-size: var(--fs-h2); }
h3,
.h3 { font-size: var(--fs-h3); }
h4,
.h4 { font-size: var(--fs-h4); }

b,
strong,
.subhead { font-weight: 700; }

.btn,
.button,
.badge,
.chip {
  font-family: var(--like-font-display);
  letter-spacing: .01em;
}

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

@media (max-width: 1240px) {
  :root {
    --like-primary-title-size: clamp(36px, 3.5vw, 43px);
  }
}

@media (max-width: 1180px) {
  :root {
    --like-primary-title-size: clamp(42px, 6.5vw, 62px);
  }
}

@media (max-width: 760px) {
  :root {
    --fs-h1: 38px;
    --fs-h2: 31px;
    --fs-h3: 25px;
    --fs-h4: 21px;
    --like-primary-title-size: clamp(36px, 11vw, 48px);
    --like-section-hero-title-size: clamp(46px, 13vw, 66px);
  }
}

@media (max-width: 390px) {
  :root {
    --like-primary-title-size: 34px;
    --like-section-hero-title-size: 43px;
  }
}