/* Manrope — свой хостинг. Урезан до кириллицы, латиницы, цифр и пунктуации
   (209 глифов, 15 КБ на начертание). Раньше грузился с fonts.googleapis.com
   цепочкой из трёх файлов и блокировал отрисовку на 780 мс.
   Если понадобятся редкие символы — пересобрать набор, а не возвращать 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-black: #1C1C1C;
  --color-red: #B43E41;
  --color-red-hover: #962023;
  --color-black-hover: #3A3A3A;
  --color-white: #FFFFFF;
  --color-grey-text: #979797;
  --color-grey-bg: #F3F3F3;
  --color-blue: #0077FF;

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

  /* H1 Desktop */
  --font-size-h1: 3.75rem;       /* 60px */
  --font-weight-h1: 700;
  --line-height-h1: 4rem;         /* 64px */
  --letter-spacing-h1: -1.2px;

  /* H1 Mobile */
  --font-size-h1-mobile: 1.75rem; /* 28px */
  --line-height-h1-mobile: 2rem;  /* 32px */
  --letter-spacing-h1-mobile: -0.56px;

  /* H2 Desktop */
  --font-size-h2: 2.75rem;        /* 44px */
  --line-height-h2: 3rem;         /* 48px */

  /* H2 Mobile */
  --font-size-h2-mobile: 1.5rem;  /* 24px */
  --line-height-h2-mobile: 1.75rem; /* 28px */

  /* H3 Desktop */
  --font-size-h3: 1.75rem;        /* 28px */
  --line-height-h3: 2rem;         /* 32px */

  /* H3 Mobile */
  --font-size-h3-mobile: 1.25rem; /* 20px */
  --line-height-h3-mobile: 1.5rem; /* 24px */

  /* Stat value Desktop */
  --font-size-stat: 2.75rem;      /* 44px */
  --line-height-stat: 2.75rem;    /* 44px */

  /* Stat value Mobile */
  --font-size-stat-mobile: 2.25rem;   /* 36px */
  --line-height-stat-mobile: 2.25rem; /* 36px */

  /* Body / Caption */
  --font-size-body: 1.25rem;      /* 20px */
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-body: 1.75rem;    /* 28px */
  --line-height-caption: 1.25rem; /* 20px */

  /* Small text */
  --font-size-small: 0.875rem;    /* 14px */
  --line-height-small: 1.375rem;  /* 22px */

  /* XS text */
  --font-size-xs: 0.75rem;        /* 12px */

  /* 2XS text */
  --font-size-2xs: 0.625rem;      /* 10px */
  --line-height-2xs: 1.125rem;    /* 18px */

  /* Button text */
  --font-size-btn: 1rem;          /* 16px */
  --line-height-btn: 1rem;        /* 16px */

  /* Border radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-popup-mobile: 24px;
  --radius-lg: 32px;

  /* Steps */
  --color-grey-text-2: #616161;
  --color-green: #4CAF50;
  --color-green-light: #E9F7E9;
  --color-red-light: #F9F2F3;

  /* H4 Desktop */
  --font-size-h4: 1.5rem;         /* 24px */
  --line-height-h4: 1.75rem;      /* 28px */

  /* CTA */
  --color-gold: #FFCF88;
  --color-gold-hover: #E1B16A;

  /* Results */
  --font-size-sum: 2.5rem;        /* 40px */
  --line-height-sum: 3rem;        /* 48px */
  --color-grey-border-2: #D8D8D8;

  /* Quiz */
  --color-quiz-bg: #B43E41;
  --color-quiz-progress-track: #C05355;
  --color-quiz-counter: #E09A9C;
  --color-quiz-border: #D8D8D8;
}