/* Manrope — свой хостинг. Урезан до кириллицы, латиницы, цифр и пунктуации
   (209 глифов, ~15 КБ на начертание). Раньше грузился с fonts.googleapis.com
   цепочкой и блокировал отрисовку. НЕ возвращать сюда Google. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700.woff2') format('woff2');
}

:root {
  /* Colors */
  --color-blue: #487BF1;
  --color-blue-light: #5C8FFF;
  --color-blue-light-2: #5285FB;
  --color-blue-light-text: #98CBFF;
  --color-red: #EE3F58;
  --color-red-hover: #D0213A;
  --color-white: #FFFFFF;
  --color-black: #1C1C1C;
  --color-grey-bg: #ECECEC;
  --color-grey-border: #D8D8D8;
  --color-grey-text: #979797;
  --color-grey-text-2: #616161;
  --color-footer-bg: #F3F3F3;

  /* Typography */
  --font-family: 'Manrope', sans-serif;

  /* Font sizes */
  --font-size-h1-desktop: 60px;
  --font-size-h2-desktop: 44px;
  --font-size-h3-desktop: 28px;
  --font-size-display: 120px;
  --font-size-body: 16px;
  --font-size-subtitle: 20px;
  --font-size-caption: 14px;

  /* Font weights */
  --font-weight-bold: 700;
  --font-weight-medium: 500;

  /* Line heights */
  --line-height-h1: 64px;
  --line-height-h2: 48px;
  --line-height-h3: 32px;
  --line-height-display: 120px;
  --line-height-body: 24px;
  --line-height-subtitle: 28px;
  --line-height-caption: 14px;

  /* Letter spacing */
  --letter-spacing-h1: -0.02em;
  --letter-spacing-badge: 0.04em;

  /* Border radius */
  --radius-lg: 32px;
  --radius-lg-mobile: 24px;
  --radius-card: 16px;
  --radius-sm: 6px;
  --radius-btn: 8px;
  --radius-badge: 32px;

  /* Mobile typography */
  --font-size-h1-mobile: 28px;
  --line-height-h1-mobile: 32px;
  --letter-spacing-h1-mobile: -0.02em;
  --font-size-h2-mobile: 24px;
  --line-height-h2-mobile: 28px;
  --font-size-h3-mobile: 20px;
  --line-height-h3-mobile: 24px;
  --font-size-body-mobile: 12px;
  --line-height-body-mobile: 20px;
  --font-size-subtitle-mobile: 14px;
  --line-height-subtitle-mobile: 22px;
  --font-size-xs-mobile: 10px;
  --line-height-xs-mobile: 18px;
}