// Базовые переменные проекта: цвета, типографика, отступы и контрольные ширины.

:root {
  // Цвета интерфейса.
  --clr-primary: #02a8a8;
  --clr-accent: #02a8a8;

  --clr-bg-tint-pink: rgba(255, 227, 237, 0.5);

  --clr-bg: #fff;
  --clr-bg-dark: #1e1e1e;

  --clr-text: #353535;
  --clr-text-inverse: #fff;
  --clr-text-muted: rgba(53, 53, 53, 0.5);
  --clr-text-on-form-note: rgba(255, 255, 255, 0.7);

  --clr-border: #353535;
  --clr-border-light: rgba(255, 255, 255, 0.5);
  --clr-border-teal-soft: rgba(2, 168, 168, 0.5);

  // Теплый фон блока регистрации.
  --gradient-form-section: linear-gradient(
    61.2373deg,
    rgb(115, 7, 7) 0%,
    rgb(128, 16, 14) 5.5386%,
    rgb(139, 26, 22) 11.077%,
    rgb(148, 38, 32) 16.616%,
    rgb(156, 51, 44) 22.154%,
    rgb(162, 65, 57) 27.693%,
    rgb(167, 81, 72) 33.232%,
    rgb(176, 90, 81) 38.77%,
    rgb(183, 101, 94) 44.309%,
    rgb(190, 112, 106) 49.847%,
    rgb(197, 123, 119) 55.386%,
    rgb(204, 135, 131) 60.924%,
    rgb(210, 147, 144) 66.463%,
    rgb(218, 156, 155) 72.002%,
    rgb(228, 163, 166) 77.54%,
    rgb(237, 173, 180) 83.079%,
    rgb(244, 184, 194) 88.617%,
    rgb(249, 197, 209) 94.156%,
    rgb(253, 211, 223) 99.695%,
    rgb(255, 227, 237) 105.23%
  );

  // Мягкая маска поверх изображения в блоке программы.
  --gradient-features-mask: linear-gradient(
    52.0643deg,
    rgba(255, 227, 237, 0.45) 40%,
    rgba(222, 208, 211, 0.45) 70%,
    rgba(204, 197, 196, 0.45) 85%,
    rgba(191, 189, 186, 0.45) 100%
  );

  // Типографика.
  --font-manrope: 'Manrope', system-ui, sans-serif;
  --font-remark: 'LT Remark', var(--font-manrope);
  --font-bigcity: 'BigCity Grotesque Pro', var(--font-manrope);

  --font-size-10: 10px;
  --font-size-20: 20px;
  --font-size-24: 24px;

  /*
   * На узких экранах кнопка в первом блоке должна оставаться крупной,
   * даже когда общие типографические токены уменьшаются.
   */
  --font-size-hero-cta-narrow: clamp(1.125rem, 5.97vw, 1.5rem);
  --font-size-27: 27px;
  --font-size-28: 28px;
  --font-size-48: 48px;
  --font-size-56: 56px;
  --font-size-58: 58px;
  --font-size-59: 59px;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-none: 1;
  --leading-tight-12: 1.2;
  --leading-date: 60px;
  --leading-faq-sub: 0.5;

  --track-title-48: -1.2px;
  --track-title-56: -1.4px;
  --track-title-59: -1.475px;
  --track-faq-q: -1.68px;
  --track-28: -0.7px;
  --track-btn: 0.96px;

  // Часто используемые размеры элементов.
  --pad-btn-x: 31px;
  --pad-btn-y: 30px;
  --pad-input-x: 40px;
  --pad-input-y: 20px;
  --pad-note-x: 71px;
  --pad-note-y: 25px;

  --radius-btn: 50px;
  --radius-input: 100px;

  --blur-backdrop: 12.9px;
  --border-width-note: 3px;

  // Семантические алиасы для остального кода.
  --clr-primary-dark: #02a8a8;
  --clr-primary-light: rgba(2, 168, 168, 0.5);
  --clr-dark: #1e1e1e;
  --clr-dark-soft: #353535;
  --clr-white: #fff;
  --clr-bg-primary: #fff;
  --clr-bg-secondary: rgba(255, 227, 237, 0.5);
  --clr-text-primary: #353535;
  --clr-text-secondary: rgba(53, 53, 53, 0.5);
  --clr-border-focus: #02a8a8;
  --clr-overlay: rgba(30, 30, 30, 0.55);
  --clr-success: #02a8a8;
  --clr-error: #730707;

  --clr-gray-100: #fff;
  --clr-gray-300: #353535;
  --clr-gray-400: rgba(53, 53, 53, 0.5);
  --clr-gray-500: rgba(53, 53, 53, 0.5);
  --clr-gray-600: #353535;
  --clr-gray-700: #353535;
  --clr-gray-800: #353535;
  --clr-gray-900: #1e1e1e;

  --font-family-primary: var(--font-manrope);
  --font-size-xs: 10px;
  --font-size-sm: 20px;
  --font-size-base: 20px;
  --font-size-lg: 28px;
  --font-size-xl: 28px;
  --font-size-2xl: 48px;
  --font-size-3xl: 56px;
  --font-size-4xl: 56px;
  --font-size-5xl: 58px;
  --font-size-6xl: 59px;

  --line-height-tight: 1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.2;
  --line-height-relaxed: 1.2;

  --space-xxs: 10px;
  --space-xs: 20px;
  --space-sm: 20px;
  --space-md: 24px;
  --space-lg: 28px;
  --space-xl: 30px;
  --space-2xl: 40px;
  --space-3xl: 56px;
  --space-4xl: 71px;

  --radius-sm: 3px;
  --radius-md: 50px;
  --radius-lg: 50px;
  --radius-xl: 50px;
  --radius-2xl: 100px;
  --radius-pill: 100px;
  --radius-full: 50%;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  --container-max: 1920px;

  --container-padding: 119px;
  --layout-edge-space: clamp(20px, 6.2vw, 168px);
  --layout-edge-space-wide: clamp(32px, 7.14vw, 160px);
  --layout-edge-space-medium: clamp(32px, 6.56vw, 144px);
  --layout-panel-content-max: clamp(720px, 50vw, 1080px);
  --layout-space-lg: clamp(24px, 2.86vw, 55px);
  --layout-space-xl: clamp(40px, 5.2vw, 100px);
  --layout-space-2xl: clamp(56px, 6.2vw, 119px);

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  // Ширина зоны для вертикальной линии и точек в списках.
  --pipeline-rail-width: 1rem;
}

// Те же значения для SCSS-логики.
$clr-primary: #02a8a8;
$clr-text: #353535;
$clr-bg: #fff;
$clr-text-inverse: #fff;
$font-manrope: 'Manrope', system-ui, sans-serif;

$pad-btn-x: 31px;
$pad-btn-y: 30px;
$pad-input-x: 40px;
$pad-input-y: 20px;
$radius-btn: 50px;
$radius-input: 100px;

// Контрольные ширины для адаптива.
$bp-1920: 1920px;
$bp-1600: 1600px;
$bp-1536: 1536px;
$bp-1440: 1440px;
$bp-1366: 1366px;
$bp-1280: 1280px;
$bp-1024: 1024px;
$bp-768: 768px;
$bp-480: 480px;
$bp-414: 414px;
$bp-402: 402px;
$bp-390: 390px;
$bp-375: 375px;
$bp-360: 360px;
$bp-320: 320px;

$bp-xl: 1920px;
$bp-lg: 1440px;
$bp-md: $bp-1024;
$bp-sm: $bp-768;
$bp-xs: $bp-480;
$bp-xxs: $bp-360;

/* Порог узкой мобильной колонки (~490px), общий для форм, FAQ, списка тем и дальше по странице. */
$features-mq-narrow: 490px;

$container-max: 1920px;

// Вертикальный «пеплайн»: линия и точки по одной оси, сегменты между пунктами
@mixin section-pipeline-list {
  &__list {
    border-left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  &__item {
    margin: 0;
    padding-bottom: var(--space-lg);
    padding-left: var(--pipeline-rail-width);
    position: relative;

    &::before {
      background-color: var(--clr-primary);
      border-radius: 50%;
      content: '';
      height: 11px;
      left: calc(var(--pipeline-rail-width) * 0.5);
      position: absolute;
      top: 0.6em;
      transform: translate(-50%, -50%);
      width: 11px;
      z-index: 1;
    }

    &:not(:last-child)::after {
      background-color: var(--clr-primary);
      content: '';
      height: calc(100% - 0.6em + 5.5px);
      left: calc(var(--pipeline-rail-width) * 0.5);
      position: absolute;
      top: 0.6em;
      transform: translateX(-50%);
      width: 1px;
      z-index: 0;
    }

    &:last-child {
      padding-bottom: 0;
    }
  }
}