/* =============================================================
   Дизайн-токены — ЕДИНСТВЕННОЕ место для цветов, шрифтов,
   отступов. Значения считаны из Figma MCP (2026-06-18).
   ============================================================= */

:root {

  /* --- Цвета --- */

  /* Бренд */
  --color-primary:       #143c6c;   /* тёмно-синий, основной бренд */
  --color-primary-dark:  #052161;   /* глубокий тёмно-синий, H1/H2 */
  --color-secondary:     #29abe2;   /* голубой акцент (логотип, иконки) */

  /* Текст */
  --color-text:          #143c6c;   /* основной текст (= primary) */
  --color-text-inverse:  #ffffff;   /* белый текст (футер, кнопки) */

  /* Фон */
  --color-bg:            #ffffff;
  --color-footer-bg:     #25282f;

  /* Карточки */
  --color-card-bg:       #f9fbff;   /* светлый фон активной/выделенной карточки */
  --color-border:        #c7d7ed;   /* граница карточек и полей ввода */


  /* --- Типографика --- */

  --font-family:         'Inter', sans-serif;

  /* Размеры */
  --font-size-h1:        3.5rem;    /* 56px — главный герой-заголовок */
  --font-size-h2:        3rem;      /* 48px — заголовки секций */
  --font-size-h3:        1.25rem;   /* 20px — заголовки карточек */
  --font-size-label:     1.125rem;  /* 18px — телефон, контакты, нумерация шагов */
  --font-size-base:      0.9375rem; /* 15px — тело, навигация, кнопки */

  /* Насыщенность */
  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Межстрочный интервал */
  --line-height-base:    1.4;   /* 140% — для текста body */
  --line-height-tight:   1.0;   /* для крупных заголовков */


  /* --- Сетка и отступы --- */

  /* Desktop 1920px: контент 1410px, отступ по 255px с каждой стороны */
  --container-width:   1410px;
  --container-padding: 255px;   /* горизонтальный padding страницы */

  /* Mobile 375px: контент 335px, отступ 20px с каждой стороны */
  --container-padding-mobile: 20px;

  /*
   * Брейкпоинт адаптива: @media (max-width: 767px)
   * 767 = 768px (iPad portrait) − 1px
   * Всё ≤ 767px → мобильный вид; ≥ 768px → desktop.
   * CSS custom properties не работают в @media, поэтому значение
   * дублируется в каждом файле компонента — менять нужно везде сразу.
   */


  /* --- Компоненты --- */

  /* Кнопки (pill-shape, cornerRadius=90 в Figma) */
  --border-radius-btn:  90px;
  --btn-padding-y:      20px;  /* герой-кнопки */
  --btn-padding-x:      26px;
  --btn-padding-y-sm:   16px;  /* кнопка в шапке */
  --btn-padding-x-sm:   20px;

  /* Соцсети (подвал) */
  --color-social-icon-bg: #33363d;   /* тёмный круг по умолчанию */

  /* Карточки */
  --border-radius-card: 20px;
  --padding-card:       20px;
  --color-why-card-bg:  #eff4fb;   /* фон карточек «Почему мы» (из Figma node 8:97) */

  /* Поля ввода */
  --color-input-bg:     #f5f5f5;
  --color-text-muted:   #6e6e6e;   /* placeholder, второстепенный текст */

}