/* Дизайн-система из Figma */

:root {
  /* Цвета */
  --color-black: #101010;
  --color-white: #FFFFFF;
  --color-background: #F2F2F2;
  --color-dark-gray: #7E7E7E;
  --color-light-gray: #DDDDDD;
  --color-text: #0b1114;
  --color-hover-black: #282828;

  /* Типографика - шрифт */
  --font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Display 2xl */
  --font-display-2xl-size: 72px;
  --font-display-2xl-line: 90px;
  --font-display-2xl-weight: 600;

  /* Display XL */
  --font-display-xl-size: 60px;
  --font-display-xl-line: 72px;
  --font-display-xl-weight: 500;

  /* Display L */
  --font-display-l-size: 48px;
  --font-display-l-line: 60px;
  --font-display-l-weight: 500;

  /* Display M */
  --font-display-m-size: 36px;
  --font-display-m-line: 44px;
  --font-display-m-weight: 500;

  /* Display S */
  --font-display-s-size: 32px;
  --font-display-s-line: 40px;
  --font-display-s-weight: 500;

  /* Display XS */
  --font-display-xs-size: 24px;
  --font-display-xs-line: 32px;
  --font-display-xs-weight: 400;
  --font-display-xs-semibold-weight: 600;

  /* Text XL */
  --font-text-xl-size: 20px;
  --font-text-xl-line: 30px;
  --font-text-xl-weight: 400;

  /* Text L */
  --font-text-l-size: 16px;
  --font-text-l-line: 24px;
  --font-text-l-weight: 400;
  --font-text-l-medium-weight: 500;

  /* Text M */
  --font-text-m-size: 14px;
  --font-text-m-line: 20px;
  --font-text-m-weight: 400;
  --font-text-m-medium-weight: 500;

  /* Text S */
  --font-text-s-size: 12px;
  --font-text-s-line: 18px;
  --font-text-s-weight: 400;
  --font-text-s-medium-weight: 500;

  /* Letter spacing */
  --letter-spacing: -0.02em;

  /* Отступы */
  --spacing-xs: 8px;
  --spacing-s: 12px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-5xl: 80px;
  --spacing-6xl: 96px;

  /* Border radius */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;

  /* Контейнер */
  --container-max-width: 1440px;
  --container-padding: 80px;

  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1440px;
}

/* Импорт шрифта Onest */
@font-face {
  font-family: 'Onest';
  src: url('https://fonts.cdnfonts.com/css/onest') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* Базовые стили типографики */
body {
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-white);
  letter-spacing: var(--letter-spacing);
}

/* Утилиты для типографики */
.display-2xl {
  font-size: var(--font-display-2xl-size);
  line-height: var(--font-display-2xl-line);
  font-weight: var(--font-display-2xl-weight);
  letter-spacing: var(--letter-spacing);
}

.display-xl {
  font-size: var(--font-display-xl-size);
  line-height: var(--font-display-xl-line);
  font-weight: var(--font-display-xl-weight);
  letter-spacing: var(--letter-spacing);
}

.display-l {
  font-size: var(--font-display-l-size);
  line-height: var(--font-display-l-line);
  font-weight: var(--font-display-l-weight);
  letter-spacing: var(--letter-spacing);
}

.display-m {
  font-size: var(--font-display-m-size);
  line-height: var(--font-display-m-line);
  font-weight: var(--font-display-m-weight);
  letter-spacing: var(--letter-spacing);
}

.display-s {
  font-size: var(--font-display-s-size);
  line-height: var(--font-display-s-line);
  font-weight: var(--font-display-s-weight);
  letter-spacing: var(--letter-spacing);
}

.display-xs {
  font-size: var(--font-display-xs-size);
  line-height: var(--font-display-xs-line);
  font-weight: var(--font-display-xs-weight);
  letter-spacing: var(--letter-spacing);
}

.display-xs-semibold {
  font-size: var(--font-display-xs-size);
  line-height: var(--font-display-xs-line);
  font-weight: var(--font-display-xs-semibold-weight);
  letter-spacing: var(--letter-spacing);
}

.text-xl {
  font-size: var(--font-text-xl-size);
  line-height: var(--font-text-xl-line);
  font-weight: var(--font-text-xl-weight);
  letter-spacing: var(--letter-spacing);
}

.text-l {
  font-size: var(--font-text-l-size);
  line-height: var(--font-text-l-line);
  font-weight: var(--font-text-l-weight);
  letter-spacing: var(--letter-spacing);
}

.text-l-medium {
  font-size: var(--font-text-l-size);
  line-height: var(--font-text-l-line);
  font-weight: var(--font-text-l-medium-weight);
  letter-spacing: var(--letter-spacing);
}

.text-m {
  font-size: var(--font-text-m-size);
  line-height: var(--font-text-m-line);
  font-weight: var(--font-text-m-weight);
  letter-spacing: var(--letter-spacing);
}

.text-m-medium {
  font-size: var(--font-text-m-size);
  line-height: var(--font-text-m-line);
  font-weight: var(--font-text-m-medium-weight);
  letter-spacing: var(--letter-spacing);
}

.text-s {
  font-size: var(--font-text-s-size);
  line-height: var(--font-text-s-line);
  font-weight: var(--font-text-s-weight);
  letter-spacing: var(--letter-spacing);
}

.text-s-medium {
  font-size: var(--font-text-s-size);
  line-height: var(--font-text-s-line);
  font-weight: var(--font-text-s-medium-weight);
  letter-spacing: var(--letter-spacing);
}