/* tokens.css — дизайн-токены Get Courier
   Источник: Figma pFL9tybMK1zhddni4dvL9c, извлечено 06.07.2026.
   ПРАВИЛО: для цветов и шрифтов в вёрстке использовать ТОЛЬКО эти переменные.
   Числа, которых здесь нет (размеры заголовков, отступы секций и т.п.),
   берутся из context.md конкретной секции и НЕ выдумываются. Если в новой
   секции всплывает цвет/шрифт, которого тут нет, — сперва дописать сюда,
   потом использовать. Хардкод hex/px по месту запрещён (см. CLAUDE.md). */

:root {
  /* --- Цвета: 4 официальные переменные дизайнера (Figma variables) --- */
  --color-ink:    #090909; /* основной текст, near-black */
  --color-brand:  #0057ff; /* фирменный синий: кнопки, акценты, ссылки */
  --color-white:  #ffffff;
  --color-border: #d3dade; /* границы полей ввода */

  /* --- Расширенная палитра: сырые значения из макета (НЕ переменные Figma),
         подтверждены в форме калькулятора. Дописывать по мере нахождения. --- */
  --color-chip-bg:  #f6f6f6; /* фон чипов городов */
  --color-ink-soft: #242424; /* вторичный текст (Golos Text) */
  /* --- Хиро (REST 06.07: шапка 71:193, заголовок 71:113) --- */
  --color-logo:     #3183ff; /* синий части лого «Get» (≠ бренд-синий) */
  --color-muted:    #727272; /* слоган в шапке, приглушённый серый */
  --color-hero-bg:  #252525; /* фон хиро (тёмный, замер рендера) */
  /* --- Секция «Как сервис помогает экономить» (REST 71:86/87) --- */
  --color-card-title: #1b1b1b; /* заголовок карточки преимущества */
  --color-card-text:  #787878; /* подпись карточки преимущества */
  /* --- Секция «Сравнение цен» (REST 71:501/506/509/511) --- */
  --color-blue-2:   #2061de; /* синий сравнения: пилюля «Напрямую», иконки фич (≠ бренд #0057ff) */
  --color-accent-2: #71a1ff; /* второй синий в иконках фич */
  --color-green:    #34b031; /* зелёный пилюли «Через GetCourier» */
  --color-tint:     #f1f8ff; /* светло-голубой фон иконок */
  --color-text-3:   #373737; /* подзаголовок/подпись сравнения */
  --color-ink-2:    #272727; /* второй near-black: заголовок ленты партнёров (71:458), фон ЛК-промо, тёмная карточка overpay */
  --color-gray-2:   #c1c1c1; /* светло-серый подзаголовок на тёмном фоне (ЛК-промо 71:1020) */
  --color-gray-3:   #434343; /* тёмно-серый подзаголовок видео поверх постера (71:1010) */
  --color-navy:     #011427; /* тёмный фон секции партнёрской программы (71:515) */
  --color-navy-tx:  #021223; /* текст в белой карточке-фиче партнёрки (71:525) */

  /* --- Шрифты (оба на Google Fonts, поддерживают кириллицу) --- */
  --font-ui:   'Manrope', system-ui, sans-serif;      /* заголовки, лейблы, кнопки, поля */
  --font-text: 'Golos Text', system-ui, sans-serif;   /* вторичный текст, опции, подписи */
  /* Заголовок хиро в макете — Gilroy 500 (коммерческий, НЕ в стеке и не на
     Google Fonts). Подставлен Manrope как ближайший геометрический из
     подтверждённых. Отдельное имя (--font-hero), чтобы не конфликтовать с
     легаси --font-display=Golos Text в main.css (секционные заголовки).
     УТОЧНИТЬ У СЕРГЕЯ: лицензировать Gilroy (дам woff2) или оставить Manrope. */
  --font-hero: 'Manrope', system-ui, sans-serif;

  /* --- Шрифты (оба на Google Fonts, поддерживают кириллицу) --- */
  --font-ui:   'Manrope', system-ui, sans-serif;      /* заголовки, лейблы, кнопки, поля */
  --font-text: 'Golos Text', system-ui, sans-serif;   /* вторичный текст, опции, подписи */

  /* --- Заголовок хиро (REST 71:113/1048/1712): размеры по ширинам --- */
  --fs-hero-desktop: 64px;   --lh-hero-desktop: 70px;   --ls-hero-desktop: -0.3px;   /* Manrope-заместитель Gilroy рендерит теснее → расширил межбуквенный (ширина строки как в макете 1038) */
  --fs-hero-tablet:  50px;   --lh-hero-tablet:  55px;   --ls-hero-tablet:  -1px;
  --fs-hero-mobile:  28px;   --lh-hero-mobile:  34px;   --ls-hero-mobile:  -0.56px;

  /* --- Типографика формы (подтверждено, node 74:517).
         Масштаб заголовков хиро/секций сюда добавится из пакета хиро. --- */
  --fs-base:        15px;   /* базовый размер текста в форме */
  --tracking-base:  -0.3px; /* letter-spacing по всей форме */

  /* --- Радиусы (подтверждено) --- */
  --radius-input: 10px; /* поля, чипы, кнопка «Рассчитать» */
  --radius-card:  20px; /* карточка формы калькулятора */

  /* --- Поля ввода (подтверждено) --- */
  --input-height: 54px;
  --input-pad-x:  16px;

  /* --- Тень карточки формы (подтверждено) --- */
  --shadow-card: 0px 24px 67px rgba(0, 0, 0, 0.1);
}