/* ============================================================
   SSB — Дизайн-токены (CSS-переменные)
   Единая точка управления цветами, шрифтами, отступами.
   ============================================================ */

:root {
  /* ---------- Цвета: фон ---------- */
  --color-bg:            #070707;   /* глубокий почти чёрный */
  --color-surface:       #0e0d0c;   /* матовая поверхность карточек */
  --color-surface-2:     #14120f;   /* приподнятые элементы (плашки шагов) */
  --color-surface-3:     #1a1713;   /* hover-состояния поверхностей */

  /* ---------- Цвета: текст ---------- */
  --color-text:          #ddd6c9;   /* мягкий тёплый светлый — не режет глаза */
  --color-text-muted:    #a89f92;   /* вторичный текст */
  --color-text-dim:      #857d70;   /* подписи, служебный текст */

  /* ---------- Цвета: янтарный акцент (сдержанный, бронзовый) ---------- */
  --color-amber:         #eb9c3d;
  --color-amber-light:   #f7c878;
  --color-amber-deep:    #b5761f;
  --color-amber-dim:     rgba(235, 156, 61, 0.4);
  --color-amber-faint:   rgba(235, 156, 61, 0.1);

  /* ---------- Цвета: зелёный акцент (зона загрузки) ---------- */
  --color-green:        #4fb884;
  --color-green-light:  #7ed4a8;
  --color-green-dim:    rgba(79, 184, 132, 0.45);
  --color-green-faint:  rgba(79, 184, 132, 0.08);

  /* ---------- Градиенты ---------- */
  --grad-amber:       linear-gradient(135deg, #f7c878 0%, #eb9c3d 55%, #cd7f22 100%);
  --grad-amber-text:  linear-gradient(180deg, #ffd98d 0%, #f0a94e 55%, #d08427 100%);

  /* ---------- Границы ---------- */
  --border-subtle:    1px solid rgba(255, 255, 255, 0.07);
  --border-amber:     1px solid var(--color-amber-dim);
  --border-amber-strong: 1px solid rgba(232, 150, 58, 0.65);

  /* ---------- Радиусы ---------- */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* ---------- Тени ---------- */
  --shadow-card:  0 30px 80px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0, 0, 0, 0.4);
  --shadow-btn:   0 6px 22px rgba(232, 150, 58, 0.28);
  --shadow-focus: 0 0 0 3px rgba(232, 150, 58, 0.35);

  /* ---------- Типографика ---------- */
  --font-sans: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Arial, sans-serif;

  --fs-hero:   clamp(1.65rem, 2.05vw, 1.95rem); /* акцентный заголовок оффера */
  --fs-h1:     clamp(1.42rem, 1.85vw, 1.7rem);  /* заголовки карточек */
  --fs-h3:     0.8rem;                           /* заголовки шагов */
  --fs-body:   1rem;
  --fs-small:  0.9rem;
  --fs-tiny:   0.8rem;

  --ls-caps:   0.09em;   /* разрядка для капса */
  --ls-wide:   0.16em;   /* разрядка для мелких подписей */

  /* ---------- Отступы ---------- */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 26px;
  --space-5: 40px;
  --space-6: 54px;

  /* ---------- Переходы ---------- */
  --t-fast:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-mid:    280ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   600ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Анимация шагов ---------- */
  --step-part-delay: 320ms;  /* пауза между кругом/номером/заголовком/текстом */
  --step-line-time:  900ms;  /* заполнение линии между шагами */
  --steps-loop-pause: 2600ms;/* пауза перед повтором цикла */
}