:root {
  /* Цвета */
  --color-text-main: #1b1b1b;
  --color-text-light: #6b6b6b;
  --color-text-inverse: #fff;
  --color-primary: #ed1846;
  --color-secondary: #12a9e1;
  --color-lk: #7e7cee;
  --color-bg: #fff;
  --color-bg-grey: #fdfdfd;
  --color-bg-dark-grey: #f1f1f1;
  --color-border: #cfcfcf;
  --color-critical: #de3030;
  --color-add: #4eb856;

  /* Типографика */
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Nunito', sans-serif;

  /* Breakpoints (документация; используются в media queries как числа) */
  /* mobile: 768px, tablet: 1024px, desktop: 1280px */

  /* Spacing — 4px grid */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-base: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-4xl: 48px;
  --spacing-5xl: 64px;

  /* Typography */
  --text-xs: 1.1rem;
  --text-sm: 1.3rem;
  --text-base: 1.4rem;
  --text-md: 1.6rem;
  --text-lg: 1.8rem;
  --text-xl: 2.0rem;
  --text-2xl: 2.4rem;
  --text-3xl: 3.2rem;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* Радиусы */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}