/* ============================================================
   Адаптивные токены :root по ширине viewport.
   Базовые значения в tokens.scss без @media — для ≥1921px и эталона 1920;
   здесь max-width-ступени: 1920, 1600, 1536, 1440, 1366, 1280, 1024, 768,
   480, 414, 402, 390, 375, 360, 320.
   ============================================================ */

@media (max-width: $bp-1920) {
  :root {
    --container-padding: clamp(20px, 6.2vw, 119px);
    --layout-edge-space: clamp(20px, 5.5vw, 168px);
    --layout-edge-space-wide: clamp(24px, 6.25vw, 160px);
    --layout-edge-space-medium: clamp(24px, 5.75vw, 144px);
  }
}

@media (max-width: $bp-1600) {
  :root {
    --font-size-48: clamp(36px, 2.65vw, 48px);
    --font-size-56: clamp(40px, 3.05vw, 56px);
    --font-size-58: clamp(42px, 3.2vw, 58px);
    --font-size-59: clamp(42px, 3.25vw, 59px);
  }
}

@media (max-width: $bp-1536) {
  :root {
    --font-size-48: clamp(34px, 2.5vw, 48px);
    --font-size-56: clamp(38px, 2.95vw, 56px);
    --font-size-58: clamp(40px, 3.05vw, 58px);
    --font-size-59: clamp(40px, 3.1vw, 59px);
  }
}

@media (max-width: $bp-1440) {
  :root {
    --font-size-48: clamp(32px, 2.35vw, 48px);
    --font-size-56: clamp(36px, 2.8vw, 56px);
    --font-size-58: clamp(38px, 2.9vw, 58px);
    --font-size-59: clamp(38px, 2.95vw, 59px);
  }
}

@media (max-width: $bp-1366) {
  :root {
    --font-size-48: clamp(30px, 2.2vw, 48px);
    --font-size-56: clamp(34px, 2.65vw, 56px);
    --font-size-58: clamp(36px, 2.75vw, 58px);
    --font-size-59: clamp(36px, 2.8vw, 59px);
  }
}

@media (max-width: $bp-1280) {
  :root {
    --font-size-48: clamp(28px, 2.05vw, 48px);
    --font-size-56: clamp(32px, 2.5vw, 56px);
    --font-size-58: clamp(34px, 2.6vw, 58px);
    --font-size-59: clamp(34px, 2.65vw, 59px);
    --font-size-28: clamp(22px, 1.75vw, 28px);
    --font-size-lg: clamp(22px, 1.75vw, 28px);
    --font-size-xl: clamp(22px, 1.75vw, 28px);
  }
}

@media (max-width: $bp-1024) {
  :root {
    --container-padding: clamp(16px, 3.5vw, 28px);
    --space-4xl: clamp(40px, 5vw, 56px);
    --space-3xl: clamp(32px, 4vw, 48px);
  }
}

@media (max-width: $bp-768) {
  :root {
    --container-padding: clamp(16px, 4.2vw, 24px);
    --font-size-48: clamp(26px, 5.2vw, 40px);
    --font-size-56: clamp(28px, 5.5vw, 44px);
    --font-size-58: clamp(28px, 5.6vw, 46px);
    --font-size-59: clamp(28px, 5.6vw, 46px);
    --font-size-24: clamp(16px, 2.8vw, 22px);
    --font-size-28: clamp(15px, 2.6vw, 24px);
    --font-size-lg: clamp(15px, 2.6vw, 24px);
    --font-size-xl: clamp(15px, 2.6vw, 24px);
    --leading-date: clamp(32px, 8vw, 52px);
  }
}

@media (max-width: $bp-480) {
  :root {
    --container-padding: clamp(14px, 4vw, 20px);
    --font-size-48: clamp(22px, 6.5vw, 32px);
    --font-size-56: clamp(24px, 6.8vw, 34px);
    --font-size-58: clamp(24px, 7vw, 36px);
    --font-size-59: clamp(24px, 7vw, 36px);
    --font-size-24: clamp(15px, 3.6vw, 20px);
    --font-size-28: clamp(14px, 3.4vw, 22px);
    --font-size-lg: clamp(14px, 3.4vw, 22px);
    --font-size-xl: clamp(14px, 3.4vw, 22px);
    --font-size-sm: clamp(13px, 3.1vw, 18px);
    --font-size-base: clamp(13px, 3.1vw, 18px);
    --leading-date: clamp(28px, 9vw, 44px);
  }
}

@media (max-width: $bp-414) {
  :root {
    --font-size-48: clamp(21px, 6.2vw, 30px);
    --font-size-56: clamp(22px, 6.5vw, 32px);
    --font-size-58: clamp(22px, 6.6vw, 34px);
    --font-size-59: clamp(22px, 6.6vw, 34px);
  }
}

/* Узкие ширины популярных iPhone и Android-устройств. */
@media (max-width: $bp-402) {
  :root {
    --container-padding: clamp(14px, 3.85vw, 18px);
    --font-size-48: 26px;
    --font-size-56: 28px;
    --font-size-58: 30px;
    --font-size-59: 28px;
    --font-size-24: 16px;
    --font-size-28: 15px;
    --font-size-lg: 15px;
    --font-size-xl: 15px;
    --font-size-sm: 14px;
    --font-size-base: 14px;
    --leading-date: 34px;
    --space-4xl: 40px;
    --space-3xl: 32px;
    --space-2xl: 28px;
  }
}

@media (max-width: $bp-390) {
  :root {
    --font-size-48: 25px;
    --font-size-56: 27px;
    --font-size-58: 29px;
    --font-size-59: 27px;
  }
}

@media (max-width: $bp-375) {
  :root {
    --font-size-48: 24px;
    --font-size-56: 26px;
    --font-size-58: 28px;
    --font-size-59: 26px;
    --container-padding: clamp(12px, 4vw, 18px);
  }
}

@media (max-width: $bp-360) {
  :root {
    --font-size-48: 23px;
    --font-size-56: 25px;
    --font-size-58: 27px;
    --font-size-59: 25px;
  }
}

@media (max-width: $bp-320) {
  :root {
    --font-size-48: 21px;
    --font-size-56: 23px;
    --font-size-58: 25px;
    --font-size-59: 23px;
    --container-padding: 12px;
    --leading-date: 30px;
  }
}