/* spacing.css: унифицированная система отступов и размеров */

/* Дополнительные переменные для spacing */
:root {
  --space-xxs: 2.5px; /* было 2px, увеличение на 25% */
  --space-xxl: 60px; /* было 48px, увеличение на 25% */
  --space-xxxl: 80px; /* было 64px, увеличение на 25% */
  
  /* Размеры для компонентов */
  --button-height-sm: 40px; /* было 32px, увеличение на 25% */
  --button-height-md: 50px; /* было 40px, увеличение на 25% */
  --button-height-lg: 60px; /* было 48px, увеличение на 25% */
  
  /* Отступы для форм */
  --form-gap: var(--space-md);
  --form-field-gap: var(--space-sm);
  
  /* Отступы для карточек */
  --card-padding: var(--space-md);
  --card-gap: var(--space-sm);
  
  /* Отступы для заголовков */
  --heading-margin-bottom: var(--space-md);
  --section-margin-bottom: var(--space-lg);
}

/* Утилиты для spacing */
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.mb-xl { margin-bottom: var(--space-xl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--space-xs) !important; }
.mt-sm { margin-top: var(--space-sm) !important; }
.mt-md { margin-top: var(--space-md) !important; }
.mt-lg { margin-top: var(--space-lg) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }

.p-0 { padding: 0 !important; }
.p-xs { padding: var(--space-xs) !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-lg { padding: var(--space-lg) !important; }
.p-xl { padding: var(--space-xl) !important; }

.gap-xs { gap: var(--space-xs) !important; }
.gap-sm { gap: var(--space-sm) !important; }
.gap-md { gap: var(--space-md) !important; }
.gap-lg { gap: var(--space-lg) !important; }
.gap-xl { gap: var(--space-xl) !important; }