/*
  Геометрия: скругления, отступы, контейнеры/сетка, блюр.
*/

:root {
  /* Скругления углов */
  --radius-sm: .25rem;   /* 4px  — мелкие элементы (бейджи, чипсы) */
  --radius-md: .375rem;  /* 6px  — инпуты, мелкие кнопки */
  --radius-lg: .5rem;    /* 8px  — кнопки, карточки среднего размера */
  --radius-xl: .75rem;   /* 12px — крупные карточки */
  --radius-2xl: 1rem;    /* 16px — hero-визуалы, крупные панели */
  --radius-full: 3.40282e38px; /* полное скругление (пилюли, аватары) */

  /* Базовая единица отступов (Tailwind spacing scale = --spacing * N) */
  --spacing: .25rem; /* 4px */

  /* Контейнеры контента */
  --container-xs: 20rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-max: 84rem;       /* максимальная ширина основного контента */
  --container-half: 42rem;
  --container-gutter: .75rem;   /* боковой отступ контейнера на мобильных */

  /* Служебные размеры для "rail"-раскладок (полосы во всю ширину с отступом контента) */
  --rail-outset: 1.25rem;
  --rail-gutter: max(.75rem, calc(var(--container-gutter) - var(--rail-outset)));
  --rail-edge: max(var(--rail-gutter), calc(50vw - var(--container-half) - var(--rail-outset)));
  --rail-width: calc(100% - var(--rail-edge) - var(--rail-edge));

  --nav-edge: max(var(--container-gutter), calc(50vw - var(--container-half)));
  --nav-width: calc(100% - var(--nav-edge) - var(--nav-edge));

  /* Blur (для glass-эффектов и декоративных пятен) */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;
}

/* На десктопе (>=768px) боковой отступ контейнера "дышит" с шириной вьюпорта */
@media (min-width: 768px) {
  :root {
    --container-gutter: clamp(2rem, 4.25vw, 4rem);
  }
}

:root {
  --container-7xl: min(var(--container-max), calc(100vw - var(--container-gutter) - var(--container-gutter)));
}

/* Утилитарные классы-хелперы (аналог tailwind rounded-*) */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full{ border-radius: var(--radius-full); }

/* Центрированный контейнер контента, как на сайте */
.container {
  width: 100%;
  max-width: var(--container-7xl, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}