/**
 * Котломаш — Rebranding Design Tokens & Variables
 * Первоисточник: Figma Макет «Котломаш — Rebranding»
 */

:root {
  /* Цвета бренда */
  --red: #CD1719;
  --km-color-primary: #CD1719;
  --km-color-primary-hover: #B21315;
  --km-color-dark: #1D1D1B;
  --km-color-dark-secondary: #323233;
  --km-color-bg: #FFFFFF;
  --km-color-white: #FFFFFF;
  --km-color-grey: #888888;
  --km-color-border: #E5E5E5;

  /* Типографика (Karla для заголовков по макету Figma, Geologica для текста) */
  --km-font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --km-font-family-heading: 'Karla', 'Montserrat', sans-serif;


  
  /* Размеры шрифтов и межстрочные интервалы */
  --km-font-size-xs: 12px;
  --km-font-size-sm: 14px;
  --km-font-size-md: 16px;
  --km-font-size-lg: 18px;
  --km-font-size-xl: 20px;
  --km-font-size-2xl: 24px;
  --km-font-size-3xl: 32px;
  --km-font-size-4xl: 40px;
  --km-font-size-5xl: 48px;

  /* Геометрия и сетка */
  --km-container-max-width: 1792px;
  --km-container-padding: 64px;
  --km-btn-radius: 2px;
  --km-card-radius: 4px;

  /* Переходы и анимация */
  --km-transition-fast: 0.2s ease;
  --km-transition-normal: 0.3s ease;
}

@media (max-width: 1200px) {
  :root {
    --km-container-padding: 32px;
  }
}

@media (max-width: 768px) {
  :root {
    --km-container-padding: 20px;
  }
}

@media (max-width: 480px) {
  :root {
    --km-container-padding: 16px;
  }
}

/* Базовые нормализации для всего проекта */
html,
body {
  height: auto !important;
  min-height: 100% !important;
  scrollbar-gutter: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

html {
  overflow-x: hidden !important;
  overflow-y: scroll !important; /* Единый нативный вертикальный скролл окна браузера */
}

body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  font-family: var(--km-font-family);
  color: var(--km-color-dark);
  background-color: var(--km-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Сброс старых ограничивающих оберток для единой сетки */
html body .border-container,
html body .page,
html body .page__wrapper,
html body main.main {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Глобальные базовые стили прямоугольных кнопок */
.km-btn,
button.km-btn,
a.km-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-family: var(--km-font-family);
  font-weight: 400;
  font-size: var(--km-font-size-md);
  border-radius: var(--km-btn-radius);
  transform: none !important;
  text-decoration: none;
  transition: background-color var(--km-transition-fast), color var(--km-transition-fast);
  cursor: pointer;
}

.km-btn-primary {
  background-color: var(--km-color-primary);
  color: var(--km-color-white);
  border: none;
}

.km-btn-primary:hover {
  background-color: var(--km-color-primary-hover);
  color: var(--km-color-white);
}

.km-btn-dark {
  background-color: var(--km-color-dark);
  color: var(--km-color-white);
  border: none;
}

.km-btn-dark:hover {
  background-color: var(--km-color-dark-secondary);
  color: var(--km-color-white);
}