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

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

  /* Типографика (Строго Geologica) */
  --km-font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 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: 1320px;
  --km-btn-radius: 2px;
  --km-card-radius: 4px;

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

/* Базовые нормализации для всего проекта */
body {
  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;
}

/* Глобальные базовые стили прямоугольных кнопок */
.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: 600;
  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);
}