/* SPARRWAY — дизайн-токены
   Выгружено из Figma KcOM9VzYy5x6SgoukIGwhz, коллекции Primitives, Color, Spacing, Radius, Size, Typography.
   Правило: в вёрстке не должно быть ни одного цвета, размера или отступа мимо этих переменных. */

:root {
  /* ==========================================================
     1. ПРИМИТИВЫ. Палитра. Напрямую в вёрстке не используются,
        только через семантические переменные ниже.
     ========================================================== */

  --primary-50:  #f0f4f9;
  --primary-100: #dde7f1;
  --primary-200: #bccde2;
  --primary-300: #93aece;
  --primary-400: #6a8cb5;
  --primary-500: #4a6f9c;
  --primary-600: #325686;
  --primary-700: #29456c;
  --primary-800: #223855;
  --primary-900: #1b2c42;

  --sky-50:  #f2f7fb;
  --sky-100: #e1edf6;
  --sky-200: #c4dbec;
  --sky-300: #a0c3de;
  --sky-400: #74a5ce;
  --sky-500: #5589b6;
  --sky-600: #426f97;
  --sky-700: #345876;

  --sand-50:  #fdfbf9;
  --sand-100: #f7f0ea;
  --sand-200: #efe3d9;
  --sand-300: #e2d0c1;
  --sand-400: #cdb29c;
  --sand-500: #a98a72;
  --sand-700: #765f4e;

  --neutral-white: #ffffff;
  --neutral-50:  #fafafc;
  --neutral-100: #f2f2f7;
  --neutral-200: #e6e5ee;
  --neutral-300: #dedce9;
  --neutral-400: #c2c0d1;
  --neutral-500: #9795ab;
  --neutral-600: #6e6c82;
  --neutral-700: #4b4a5c;
  --neutral-800: #2a2a2a;
  --neutral-900: #16161c;

  --success-50:  #edf8f3;
  --success-500: #2e8b6b;
  --success-700: #1f6650;
  --warning-50:  #fdf5e7;
  --warning-500: #d99a2b;
  --warning-700: #8a5f12;
  --danger-50:   #fbeeed;
  --danger-500:  #c4453f;
  --danger-700:  #94302b;
  --info-50:     #f2f7fb;
  --info-500:    #4a6f9c;
  --info-700:    #29456c;

  --accent-coin:     #f2b10d;
  --accent-coin-ink: #4a3400;
  --accent-gem:      #4fc3f7;

  /* Уровни языка */
  --level-a1: #4a6f9c;
  --level-a2: #345876;
  --level-b1: #8c6a18;
  --level-b2: #9e5620;
  --level-c1: #c4453f;
  --level-c2: #7b4ba8;

  /* ==========================================================
     2. СЕМАНТИКА. Это то, чем пользуемся в вёрстке.
     ========================================================== */

  /* Фоны */
  --bg-page:        var(--sand-50);
  --bg-surface:     var(--neutral-white);
  --bg-surface-alt: var(--sand-100);
  --bg-muted:       var(--neutral-100);
  --bg-inverse:     var(--primary-800);

  /* Текст */
  --text-strong:      var(--neutral-900);
  --text-body:        var(--neutral-700);
  --text-muted:       var(--neutral-600);
  --text-disabled:    var(--neutral-500);
  --text-inverse:     var(--neutral-white);
  --text-link:        var(--primary-600);
  --text-link-hover:  var(--primary-700);
  --text-link-active: var(--primary-800);

  /* Границы */
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--primary-600);

  /* Кнопки: основная */
  --action-primary-bg:        var(--primary-600);
  --action-primary-bg-hover:  var(--primary-700);
  --action-primary-bg-active: var(--primary-800);
  --action-primary-text:      var(--neutral-white);

  /* Кнопки: вторичная */
  --action-secondary-bg:        var(--neutral-white);
  --action-secondary-bg-hover:  var(--primary-50);
  --action-secondary-bg-active: var(--primary-100);
  --action-secondary-border:    var(--primary-200);
  --action-secondary-text:      var(--primary-700);

  /* Кнопки: голубая */
  --action-sky-bg:        var(--sky-400);
  --action-sky-bg-hover:  var(--sky-300);
  --action-sky-bg-active: var(--sky-500);
  --action-sky-text:      var(--primary-900);

  /* Кнопки: опасное действие */
  --action-danger-bg:       var(--danger-500);
  --action-danger-bg-hover: var(--danger-700);
  --action-danger-text:     var(--neutral-white);

  /* Сообщения */
  --feedback-success-bg:    var(--success-50);
  --feedback-success-text:  var(--success-700);
  --feedback-success-solid: var(--success-500);
  --feedback-warning-bg:    var(--warning-50);
  --feedback-warning-text:  var(--warning-700);
  --feedback-warning-solid: var(--warning-500);
  --feedback-danger-bg:     var(--danger-50);
  --feedback-danger-text:   var(--danger-700);
  --feedback-danger-solid:  var(--danger-500);
  --feedback-info-bg:       var(--info-50);
  --feedback-info-text:     var(--sky-700);
  --feedback-info-solid:    var(--info-500);

  /* Бейджи */
  --badge-new-bg:     var(--accent-coin);
  --badge-new-text:   var(--accent-coin-ink);
  --badge-soon-bg:    var(--neutral-600);
  --badge-sky-bg:     var(--sky-100);
  --badge-primary-bg: var(--primary-100);

  /* ==========================================================
     3. ОТСТУПЫ И СЕТКА
     ========================================================== */

  --space-1:  4px;
  --space-1-5: 6px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --grid-container: 1320px;
  --grid-gutter:    24px;
  --grid-margin:    20px;

  /* Вертикальный ритм секций. Считается от одной величины - стыка между
     блоками: 50 на мобильном, 80 на планшете, 100 на десктопе. Отступ секции
     обычно половина стыка, две соседние секции складывают его целиком. На
     десктопе панельные секции обнуляют свой отступ, и весь стык даёт соседняя
     секция, поэтому там отступ равен стыку. Стык с первым экраном - своя
     величина, а не половина: 40 на мобильном и планшете, 50 на десктопе.
     Этой же величиной задан нижний паддинг самой панели - расстояние от
     заголовка до её края. На мобильном ритм тот же, что на планшете: 80
     между блоками и 40 под первым экраном. Hero перекрыт шапкой, поэтому
     его верхний отступ считается от края фрейма и уже включает её высоту. */
  --section-gap:          80px;
  --section-gap-first:    40px;
  --section-padding:      40px;
  --header-height:        64px;
  --hero-padding-top:     96px;
  --hero-padding-bottom:  48px;

  /* ==========================================================
     4. РАДИУСЫ
     ========================================================== */

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 999px;

  /* ==========================================================
     5. РАЗМЕРЫ ЭЛЕМЕНТОВ
     ========================================================== */

  --control-sm: 38px;
  --control-md: 48px;
  --control-lg: 56px;

  --chip-sm: 28px;
  --chip-md: 36px;

  --badge-md:      24px;
  --level-md:      26px;
  --level-padding-x: 11px;
  --pagination-md: 40px;
  --avatar-sm:     34px;
  --avatar-md:     44px;
  --checkbox-md:   20px;

  --switch-track-w: 46px;
  --switch-track-h: 26px;
  --switch-knob:    20px;

  --progress-track: 8px;

  --icon-xs: 10px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-xl: 24px;

  /* Минимальная зона нажатия на тач-устройствах */
  --touch-min: 44px;

  --border-hairline:   1px;
  --border-width:      1.5px;
  --border-tab-active: 2.5px;

  /* ==========================================================
     6. ТИПОГРАФИКА
        Семейства: Involve Bold только заголовки, Golos Text всё остальное.
        Внимание: переменная font-family/heading в Figma указывает Golos Text,
        но текстовые стили Heading/* набраны Involve. Верно второе, переменную
        в макете нужно поправить.
     ========================================================== */

  --font-heading: "Involve", "Golos Text", system-ui, sans-serif;
  --font-body:    "Golos Text", system-ui, -apple-system, sans-serif;

  /* Размеры. База — мобильный набор стилей: Figma держит для него отдельные стили
     (Heading/H1 Mobile 35), а заголовок секции набран Heading/H3 вместо Heading/H2.
     Десктопные значения наращиваются медиазапросом ниже. */
  --fs-display: 40px;
  --fs-h1:      35px;
  --fs-h2:      28px;
  --fs-h3:      28px;
  --fs-h4:      20px;
  --fs-lg:      18px;
  --fs-base:    16px;
  --fs-sm:      14px;
  --fs-note:    15px;
  --fs-xs:      13px;
  --fs-2xs:     12px;

  --lh-tight:   1.12;
  --lh-display: 1.25;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Трекинг в текстовых стилях Figma задан в процентах: у Heading/* это -1,
     то есть -0.01em, а не -1px. */
  --ls-heading:  -0.01em;
  --ls-badge:    0.02em;
  --ls-level:    0.04em;
  --ls-overline: 0.1em;

  /* ==========================================================
     7. ТЕНИ И ФОКУС
     ========================================================== */

  --elevation-xs: 0 1px 2px rgba(27, 44, 66, 0.06);
  --elevation-sm: 0 2px 6px rgba(27, 44, 66, 0.08);
  --elevation-md: 0 6px 16px rgba(27, 44, 66, 0.10);
  --elevation-lg: 0 14px 32px rgba(27, 44, 66, 0.12);
  --elevation-xl: 0 24px 56px rgba(27, 44, 66, 0.16);
  --elevation-card: 0 8px 24px -4px rgba(156, 141, 128, 0.10);

  --focus-ring:           0 0 0 4px rgba(50, 86, 134, 0.35);
  --focus-ring-on-raised: 0 6px 16px rgba(27, 44, 66, 0.10), 0 0 0 4px rgba(50, 86, 134, 0.35);

  /* ==========================================================
     8. ДВИЖЕНИЕ
        Длительности и кривые для переходов: раскрытие аккордеона,
        модальные окна, мобильное меню. prefers-reduced-motion
        сжимает их до 0.01ms глобально — см. base.css.
     ========================================================== */

  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 300ms;

  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate:  cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate:  cubic-bezier(0.4, 0, 1, 1);

  /* ==========================================================
     9. ТОЧКИ ПЕРЕЛОМА. Для справки, в media запросах пишем значения.
     ========================================================== */

  --bp-desktop: 1440px;
  --bp-laptop:  1200px;
  --bp-tablet:  768px;
  --bp-mobile:  375px;
}

/* Планшет: заголовки выходят на десктопный набор, отступы ещё промежуточные. */
@media (min-width: 768px) {
  :root {
    --fs-display: 64px;
    --fs-h1:      48px;
    --fs-h2:      40px;

    --lh-display: var(--lh-tight);

    --grid-margin:      32px;
    --header-height:       80px;
    --hero-padding-top:    128px;
    --hero-padding-bottom: 72px;
  }
}

/* Десктопная раскладка. Ширина контейнера упирается в 1320 на 1440. */
@media (min-width: 1024px) {
  :root {
    --grid-margin:      60px;
    --section-gap:         100px;
    --section-gap-first:   50px;
    --section-padding:     100px;
    --hero-padding-top:    152px;
    --hero-padding-bottom: 80px;
  }
}

/* ============================================================
   ТИПОГРАФИЧЕСКИЕ КЛАССЫ
   Один в один текстовые стили из Figma.
   ============================================================ */

.t-display {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-heading);
}

.t-h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-heading);
}

.t-h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

.t-h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

.t-h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

.t-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.t-body-medium {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.t-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

.t-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.t-overline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-overline);
}

.t-button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1;
}

.t-button-sm {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
}

.t-tab {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.t-badge {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-2xs);
  line-height: 1;
  letter-spacing: var(--ls-badge);
}

.t-level {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-2xs);
  line-height: 1;
  letter-spacing: var(--ls-level);
  text-transform: uppercase;
}

/* Знак сдвигов по горизонтали: 1 слева направо, -1 справа налево (этап ar). Сдвиги
   translateX, у которых есть направление, умножаются на него, иначе в RTL элемент
   уезжает не в ту сторону. */
:root { --dir-x: 1; }
[dir="rtl"] { --dir-x: -1; }