:root {
  /* ==================== COLORS ==================== */
  --color-white:#fff;
  --color-light: #F1F1F1;   
  --color-primary: #007BFF;
  --color-primary-alt: #FFA800;   
  --color-secondary: #6C757D;
  --color-success: #52c41a;      /* для успешных действий */
  --color-dark: #212121;

  --color-primary-hover:#005eff;
  --color-primary-alt-hover: #ff8400;
  --color-secondary-hover:#4f565c;

  --color-secondary-opacity: rgba(108, 117, 125, 0.3);
  --color-dark-opacity: rgba(33, 33, 33, 0.7);

  /* ==================== TYPOGRAPHY ==================== */
  --font-heading: 'Inter', sans-serif; /* шрифт заголовков */
  --font-mono: 'Roboto Mono', monospace; /* для кода, счетчиков, монет */
  
  --font-size-xs: 12px;  /* мелкий текст, подписи */
  --font-size-sm: 14px;  /* текст форм, подсказки */
  --font-size-md: 18px;  /* основной текст */
  --font-size-lg: 20px;  /* подзаголовки */
  --font-size-xl: 24px;  /* заголовки H3-H2 */
  --font-size-xxl: 32px; /* заголовки H1 */
  --font-size-xxxl: 40px; /* заголовки H1 */

  --line-height-sm: 1.2;  /* для мелких шрифтов */
  --line-height-md: 1.5;  /* основной текст */
  --line-height-lg: 1.8;  /* для заголовков/блоков */

  /* ==================== LAYOUT / SPACING ==================== */
  --container-width: 1472px;   /* макс ширина контейнера */
  --container-padding: 20px;   /* паддинг контейнера по бокам */
  
  --spacing-xs: 4px;   /* минимальные отступы */
  --spacing-sm: 8px;   /* маленькие отступы */
  --spacing-md: 16px;  /* стандартные отступы */
  --spacing-lg: 24px;  /* большие отступы */
  --spacing-xl: 32px;  /* крупные отступы */
  --spacing-xxl: 48px; /* огромные отступы, секции */

  /* ==================== BORDER RADIUS ==================== */
  --radius-sm: 8px;    /* маленькие скругления, кнопки */
  --radius-md: 12px;    /* карточки, модалки */
  --radius-lg: 16px;   /* большие элементы, секции */
  --radius-mlg: 20px;   /* большие элементы, секции */
  --radius-slg: 24px;   /* большие элементы, секции */

  /* ==================== SHADOWS ==================== */
  --shadow-sm: 0 1px 3px var(--color-shadow);
  --shadow-md: 0 4px 6px var(--color-shadow);
  --shadow-lg: 0 10px 20px var(--color-shadow);

  /* ==================== TRANSITIONS ==================== */
  --transition-fast: 0.2s ease-in-out;
  --transition-medium: 0.4s ease-in-out;
  --transition-slow: 0.6s ease-in-out;
}