/* base.css - ФУНДАМЕНТ ПРОЕКТА (Mobile-first) */

/* ===== CSS ПЕРЕМЕННЫЕ (DESIGN TOKENS) ===== */
:root {
  --primary: #8B0000;               /* Основной красный цвет */
  --bg: #f8f9fa;                    /* Цвет фона страницы */
  --text: #333;                     /* Цвет основного текста */
  --color-success: #28a745;         /* Цвет успеха (зеленый) */
  --color-danger: #dc3545;          /* Цвет ошибки (красный) */
  --color-warning: #ff6b00;         /* Цвет предупреждения (оранжевый) */
  --color-secondary: #ffcc00;       /* Акцентный желтый */
}

/* ===== СБРОС СТИЛЕЙ (RESET) ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== ОСНОВНЫЕ СТИЛИ ТЕЛА СТРАНИЦЫ ===== */
body {
  font-family: Montserrat, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;               /* Отключаем горизонтальный скролл */
  overflow-y: auto;                 /* Включаем вертикальный скролл */
  -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
}

/* ===== БАЗОВЫЕ АНИМАЦИИ ===== */
@keyframes pulse {
  0% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); 
  }
  50% { 
    transform: scale(0.96); 
    box-shadow: 0 0 0 8px rgba(40, 167, 69, 0); 
  }
  100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); 
  }
}

@keyframes shake {
  0%, 100% { 
    transform: translateX(0); 
  }
  10%, 30%, 50%, 70%, 90% { 
    transform: translateX(-2px); 
  }
  20%, 40%, 60%, 80% { 
    transform: translateX(2px); 
  }
}

@keyframes highlight {
  0% { 
    box-shadow: 0 10px 30px rgba(40, 167, 69, 0); 
  }
  50% { 
    box-shadow: 0 10px 40px rgba(40, 167, 69, 0.4); 
  }
  100% { 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
  }
}