/* ============================================================
   GLOBAL DESIGN TOKENS
   Все ключевые значения оффера
   ============================================================ */

:root {
  /* ---- ЦВЕТА ---- */
  --color-accent: #f14635; /* основной акцент (кнопки, заголовки, лоадер) */
  --color-accent-hover: #f15041; /* акцент при hover */
  --color-accent-clicked: #f5584a; /* акцент при клике */
  --color-header-counter: #c50000; /* фон счётчика в шапке */
  --color-range-label: #856d3f; /* фон метки диапазона на странице thanks */

  --color-text-primary: #000000; /* основной цвет текста */
  --color-text-white: #ffffff; /* белый текст (на тёмном фоне) */
  --color-text-muted: #333333; /* второстепенный текст */
  --color-text-modal: #1c1c1c; /* текст внутри модалки */

  --color-bg-body: #ffffff; /* фон страницы */
  --color-bg-section: #efefef; /* фон блока-врапера */
  --color-bg-modal: rgba(0, 0, 0, 0.5); /* оверлей модального окна */
  --color-bg-loader: rgb(168 168 168 / 70%); /* оверлей прелоадера */

  --color-border: #cccccc; /* цвет рамок инпутов */
  --color-dot-inactive: #d9d9d9; /* неактивная точка прогресс-бара */

  /* ---- ШРИФТ ---- */
  --font-family: "Montserrat", system-ui, sans-serif;

  /* ---- РАЗМЕРЫ ТЕКСТА (десктоп) ---- */
  --font-size-base: 16px; /* базовый размер браузера */
  --font-size-sm: 14px; /* мелкий текст */
  --font-size-body: 18px; /* текст в форме, кнопках */
  --font-size-subtitle: 20px; /* .subtitle */
  --font-size-title: 25px; /* .title */
  --font-size-hero: 36px; /* .first-screen_title */
  --font-size-counter: 20px; /* счётчик в шапке */
  --font-size-timer-big: 44px; /* большие цифры таймера */

  /* ---- РАЗМЕРЫ ТЕКСТА (мобильный ≤ 992px) ---- */
  --font-size-subtitle-mob: 16px;
  --font-size-title-mob: 20px;
  --font-size-hero-mob: 22px;
  --font-size-timer-mob: 34px;

  /* ---- ОТСТУПЫ ---- */
  --spacing-section: 50px; /* вертикальный padding секций */
  --spacing-section-mob: 24px; /* то же на мобильном (верх) */
  --spacing-container-px: 20px; /* горизонтальный padding контейнера */
  --spacing-container-mob: 16px;

  /* ---- СКРУГЛЕНИЯ / ТЕНИ ---- */
  --shadow-header: 0px 4px 10px 0px rgba(0, 0, 0, 0.09);
  --shadow-bar: 0px -4px 10px 0px rgba(0, 0, 0, 0.09);
  --shadow-modal: 0 2px 8px rgba(0, 0, 0, 0.15);
  --border-radius-modal: 10px;

  /* ---- ПЕРЕХОДЫ ---- */
  --transition-base: 0.3s all ease;
}