/* Дизайн-токены. Сгенерировано из макета Figma — не править вручную.
   Источник: .figma/kit.json (tools/kit.mjs), генератор: tools/tokens-css.mjs */

:root {
  /* ─── Цвета ─────────────────────────────────────────── */
  /* Brand Colors */
  --color-brand-black: #040404;
  --color-brand-dark-blue: #4166a9;
  --color-brand-pink: #f5629b;
  --color-brand-brown: #b28160;
  --color-brand-green: #4db673;
  --color-brand-light-blue: #499ad2;
  --color-brand-orange: #ee6e47;
  --color-brand-yellow: #ffd34b;

  /* Text Colors */
  --color-text-dark: #1a1b1f;
  --color-text-grey-1: #8f949e;
  --color-text-grey-2: #bfc3cb;
  --color-text-light: #ffffff;
  --color-text-description-dark: #8f949e;
  --color-text-description-light: #bfc3cb;
  --color-text-text-alt: #0d0d0d;
  --color-text-bright-2: #739eed;
  --color-text-light-2: #b6d0ff;
  --color-text-bright-1: #ee6e47;
  --color-text-light-1: #ffb39c;

  /* Fill Colors */
  --color-fill-bg-light-1: #ffffff;
  --color-fill-bg-light-2: #d8dce2;
  --color-fill-dark-1: #1a1b1f;
  --color-fill-dark-2: #4166a9;
  --color-fill-bright-2: #739eed;
  --color-fill-light-2: #b6d0ff;
  --color-fill-bright-1: #ee6e47;
  --color-fill-light-1: #ffb39c;
  --color-fill-bright-3: #4db673;
  --color-fill-light-3: #a5fdc5;
  --color-fill-grey-1: #bfc3cb;
  --color-fill-grey-2: #d8dce2;
  --color-fill-disabled: #f2f5f8;

  /* System Colors */
  --color-system-neutral-dark: #787d87;
  --color-system-neutral: #a6abb4;
  --color-system-neutral-light: #f2f5f8;

  /* ─── Типографика ───────────────────────────────────── */
  --font-base: 'Stolzl', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --weight-thin: 250;
  --weight-light: 300;
  --weight-book: 350;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --text-headline-1-size: 48px;
  --text-headline-1-line: 52.8px;
  --text-headline-1-tracking: -1.44px;
  --text-headline-2-size: 32px;
  --text-headline-2-line: 36.8px;
  --text-headline-3-size: 24px;
  --text-headline-3-line: 28.8px;
  --text-headline-3-tracking: -0.48px;
  --text-headline-4-size: 18px;
  --text-headline-4-line: 20.7px;
  --text-headline-4-tracking: -0.36px;
  --text-headline-5-size: 16px;
  --text-headline-5-line: 19.2px;
  --text-headline-6-size: 14px;
  --text-headline-6-line: 16.8px;
  --text-body-1-size: 16px;
  --text-body-1-line: 23.2px;
  --text-body-1-strong-size: 14px;
  --text-body-1-strong-line: 19.6px;
  --text-body-2-size: 16px;
  --text-body-2-line: 23.2px;
  --text-body-2-strong-size: 14px;
  --text-body-2-strong-line: 19.6px;
  --text-body-3-size: 12px;
  --text-body-3-line: 15.6px;
  --text-body-3-strong-size: 12px;
  --text-body-3-strong-line: 15.6px;
  --text-body-xs-size: 10px;
  --text-body-xs-line: 12.5px;
  --text-body-xs-strong-size: 10px;
  --text-body-xs-strong-line: 12.5px;
  --text-caption-size: 8px;
  --text-caption-line: 9.6px;
  --text-text-title-size: 12px;
  --text-text-title-line: 16px;
  --text-text-placeholder-size: 16px;
  --text-text-placeholder-line: 24px;
  --text-text-description-size: 12px;
  --text-text-description-line: 16px;
  --text-xlarge-size: 20px;
  --text-xlarge-line: 24px;
  --text-large-size: 16px;
  --text-large-line: 20px;
  --text-medium-size: 14px;
  --text-medium-line: 16px;
  --text-small-size: 12px;
  --text-small-line: 15px;

  /* ─── Сетка ─────────────────────────────────────────── */
  /* Контент 1280 + боковые отступы 80 = 1440, ровно как в макете.
     Отступы сохраняются и на более узких экранах, контент сжимается. */
  --content-width: 1280px;
  --gutter-side: 80px;
  --grid-columns: 12;
  --grid-gutter: 16px;
  --grid-column-width: 92px; /* справочно: 1280 на 12 колонок с желобом 16 */

  /* контрольные точки из макета: desktop 1440, tablet 800, mobile 360 */
  --bp-tablet: 640px;
  --bp-desktop: 1280px;
}

@media (max-width: 1279.98px) {
  :root {
    --gutter-side: 24px;
    --grid-columns: 8;
    --grid-gutter: 16px;
  }
}

@media (max-width: 639.98px) {
  :root {
    --gutter-side: 16px;
    --grid-columns: 4;
    --grid-gutter: 8px;
  }
}

/* ─── Роли текста из UI-кита ──────────────────────────── */
.t-headline-1 {
  font-size: var(--text-headline-1-size);
  line-height: var(--text-headline-1-line);
  letter-spacing: var(--text-headline-1-tracking);
}

.t-headline-2 {
  font-size: var(--text-headline-2-size);
  line-height: var(--text-headline-2-line);
}

.t-headline-3 {
  font-size: var(--text-headline-3-size);
  line-height: var(--text-headline-3-line);
  letter-spacing: var(--text-headline-3-tracking);
}

.t-headline-4 {
  font-size: var(--text-headline-4-size);
  line-height: var(--text-headline-4-line);
  letter-spacing: var(--text-headline-4-tracking);
}

.t-headline-5 {
  font-size: var(--text-headline-5-size);
  line-height: var(--text-headline-5-line);
}

.t-headline-6 {
  font-size: var(--text-headline-6-size);
  line-height: var(--text-headline-6-line);
}

.t-body-1 {
  font-size: var(--text-body-1-size);
  line-height: var(--text-body-1-line);
}

.t-body-1-strong {
  font-size: var(--text-body-1-strong-size);
  line-height: var(--text-body-1-strong-line);
}

.t-body-2 {
  font-size: var(--text-body-2-size);
  line-height: var(--text-body-2-line);
}

.t-body-2-strong {
  font-size: var(--text-body-2-strong-size);
  line-height: var(--text-body-2-strong-line);
}

.t-body-3 {
  font-size: var(--text-body-3-size);
  line-height: var(--text-body-3-line);
}

.t-body-3-strong {
  font-size: var(--text-body-3-strong-size);
  line-height: var(--text-body-3-strong-line);
}

.t-body-xs {
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-line);
}

.t-body-xs-strong {
  font-size: var(--text-body-xs-strong-size);
  line-height: var(--text-body-xs-strong-line);
}

.t-caption {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
}

.t-text-title {
  font-size: var(--text-text-title-size);
  line-height: var(--text-text-title-line);
}

.t-text-placeholder {
  font-size: var(--text-text-placeholder-size);
  line-height: var(--text-text-placeholder-line);
}

.t-text-description {
  font-size: var(--text-text-description-size);
  line-height: var(--text-text-description-line);
}

.t-xlarge {
  font-size: var(--text-xlarge-size);
  line-height: var(--text-xlarge-line);
}

.t-large {
  font-size: var(--text-large-size);
  line-height: var(--text-large-line);
}

.t-medium {
  font-size: var(--text-medium-size);
  line-height: var(--text-medium-line);
}

.t-small {
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
}