:root {
  /* ===== Базовый индекс ===== */
  --index: calc(1vw + 1vh);
  /* ===== Цветовая схема ===== */
  color-scheme: light dark;
  /* ===== Размеры ===== */
  --grid-width: 1140px;
  --grid-width-sm: 900px;
  --grid-gutter: 1rem;
  --aside-width: 220px;
  --content-max-width: 640px;
  --header-el: 40px;

  /* === Базовые размеры текста === */
  --font-base: clamp(1rem, 1rem + 0.015vw, 1.125rem); /* ≈ 16–18px */
  --font-small: clamp(0.875rem, 0.81rem + 0.011vw, 1rem); /* ≈ 14–16px */
  --font-caption: clamp(0.75rem, 0.685rem + 0.011vw, 0.875rem); /* ≈ 12–14px */
  --font: "Brutal", sans-serif; /* ≈ от 16px до 18px */
  /* === Заголовки === */
  --font-h1: clamp(2rem, 1.223rem + 0.134vw, 3.5rem); /* ≈ 32–56px */
  --font-h2: clamp(1.75rem, 1.232rem + 0.089vw, 2.75rem); /* ≈ 28–44px */
  --font-h3: clamp(1.5rem, 1.241rem + 0.045vw, 2rem); /* ≈ 24–32px */
  --font-h4: clamp(1.25rem, 1.121rem + 0.022vw, 1.5rem); /* ≈ 20–24px */
  --font-h5: clamp(1.125rem, 1.06rem + 0.011vw, 1.25rem); /* ≈ 18–20px */
  --font-h6: clamp(1rem, 0.935rem + 0.011vw, 1.125rem); /* ≈ 16–18px */

  /* === Типографический ритм === */
  --text-font-size: 1.2rem;

  --text-line-height: 1.6;
  --text-line-height-tight: 1.3;

  --text-space-sm: 0.75rem; /* ~12px */
  --text-space-md: 1rem; /* ~16px */
  --text-space-lg: 1.5rem; /* ~24px */
  --text-space-xl: 2rem; /* ~32px */

  /* ===== Отступы ===== */
  --space-xs: clamp(0.25rem, 0.2rem + 0.3vw, 0.5rem); /* от 4px до 8px */
  --space-sm: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem); /* от 8px до 12px */
  --space-md: clamp(1rem, 0.8rem + 0.6vw, 1.5rem); /* от 16px до 24px */
  --space-lg: clamp(2rem, 1.5rem + 1vw, 3rem); /* от 32px до 48px */
  --column-gap: 0.5rem;
  --row-gap: 0.5rem;
  /* ===== Анимация  ===== */
  --transition: 300ms ease-out;
  /* ===== Кнопки  ===== */
  --button-font-size: clamp(0.875rem, 0.875rem + 0.3vw, 0.95rem);
  --button-padding-x: clamp(0.625rem, 0.625rem + 0.3vw, 1.125rem);
  --button-padding-y: clamp(0.5rem, 0.5rem + 0.3vw, 0.625rem);
  /* ===== Скругление  ===== */
  --radius: 0.5rem;
  --radius-md: 1.375rem;
  --radius-max: 100%;
  /* ===== Цвета  ===== */
  --color-dark: #23272e;
  --color-darker: #1a1e24;

  --color-light: #b5babd;
  --color-white: #edf1f3;
  --color-accent: #1e90ff;
  --color-danger: #ff4444;
  --color-success: #00cc66;
  --color-muted: #848d92;
  --color-dark-fade: rgb(35 39 46 / 65%);
  --color-accent-fade: rgb(30 144 255 / 45%);
  --color-danger-fade: rgb(255 68 68 / 45%);
  --color-success-fade: rgb(0 204 102 / 45%);
  --color-border: rgba(255, 255, 255, 0.05);
  --color-surface: rgba(255, 255, 255, 0.03);
  --color-overlay: rgba(0, 0, 0, 0.5);
  /* ===== Иконки  ===== */
  --icon-size: 1.25rem;
  --icon-color: inherit;
}
svg {
  pointer-events: none;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--icon-color);
}