:root {
  /* colors */
  --color-bg: #ffffff;
  --color-ink: #0b1b4a;
  --color-ink-2: #03123a;
  --color-text: #64748b;
  --color-text-muted: #667085;
  --color-border: #e2e8f0;
  --color-border-2: #e5e7eb;
  --color-primary: #1735f5;
  --color-primary-2: #2438f5;
  --color-primary-soft: #eaf0ff;
  --color-primary-tag: #2f5bff;
  --color-white: #ffffff;
  --color-success: #10b981;
  --color-warning: #d97706;

  /* Тонкая полоса прокрутки во внутренних блоках. Не бренд-синий: полоса
     это служебный элемент, она не должна спорить за внимание с контентом.
     Полупрозрачный чернильный поверх любого фона выглядит одинаково
     уместно — и на белом, и на светло-сером */
  --scrollbar-thumb: rgba(11, 27, 74, 0.18);
  --scrollbar-thumb-hover: rgba(11, 27, 74, 0.34);

  /* radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 100px;

  /* shadow */
  --shadow-btn: 0 8px 20px -6px rgba(37, 99, 235, 0.25);
  --shadow-btn-hover: 0 6px 12px -4px rgba(37, 99, 235, 0.3), -6px 0px 24px 0px rgba(128, 178, 255, 0.6);
  --shadow-card: 0px 8px 48px 4px rgba(2, 52, 227, 0.04), 0px 0px 10px 0px rgba(23, 53, 245, 0.03);

  /* font */
  --font-base: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Outfit убран по согласованию с дизайнером: кириллицы в нём нет, поэтому
     все русские заголовки и так рисовались шрифтом Inter, а реально он
     показывал только номера шагов «01»–«04» — 31.5 КБ ради четырёх чисел.
     Побочно это чинило разнобой: в карточке шага номер был набран Outfit,
     а заголовок рядом с ним Inter. Токен оставлен, чтобы не править десяток
     правил и чтобы было куда подставить гарнитуру, если заголовкам её
     когда-нибудь дадут. */
  --font-heading: var(--font-base);
  /* scoped to the Hero dashboard-mock metric cards only — matches that
     one Figma component, not a site-wide typeface (see verstka-guide.md) */
  --font-metric: "Source Sans 3", var(--font-base);

  /* layout */
  --container-max: 1280px;
  --container-pad: 20px;
  /* Высота липкой шапки. Значение здесь — только запасное на первый кадр:
     реальную высоту меряет js/main.js и кладёт инлайном в :root. Задавать
     её константой нельзя — padding-block шапки задан через 1vw, поэтому
     фактическая высота плавает примерно от 67 до 75px вместе с шириной
     окна, и любое фиксированное число промахивается на несколько пикселей */
  --header-h: 52px;
  /* Добавочный воздух сверх границы секции при переходе по якорю. Ноль:
     верх секции встаёт вплотную под шапку, а воздух даёт собственный
     верхний паддинг секции (--section-py). Читается и из CSS, и из
     js/main.js — единственная ручка на оба пути */
  --anchor-gap: 0px;
  /* вертикальные отступы секций. Единый источник: раньше половина секций
     тянула этот токен, а .hero, .process, .product-value и .fns-trust
     считали то же самое своими формулами и расходились по значениям */
  --section-py: 48px;

  /* fluid type scale (min 375px -> max 1440px viewport) */
  --fs-h1: clamp(2rem, 1.472rem + 2.254vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.03rem + 2vw, 2.5rem);
  --fs-h3: clamp(1.125rem, 0.98rem + 0.6vw, 1.375rem);
  --fs-body-lg: clamp(0.9375rem, 0.86rem + 0.55vw, 1.125rem);
  --fs-body-md: clamp(0.9375rem, 0.915rem + 0.1vw, 1rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-card-title: clamp(1.125rem, 1.037rem + 0.38vw, 1.375rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
}

/* Порог 900px: на нём шапка переключается с бургера на полное меню, а
   секции переходят на десктопные отступы. Медиазапрос, а не @container:
   секции сами объявлены контейнерами и не могут запрашивать собственный
   контекст */
@media (min-width: 900px) {
  :root {
    /* 120px по макету */
    --section-py: 120px;
    /* с телефоном и кнопкой «Войти» шапка выше. Запасное значение,
       до замера в скрипте */
    --header-h: 75px;
  }
}

/* боковые поля контента растут раньше, чем перестраивается шапка */
@media (min-width: 768px) {
  :root {
    --container-pad: 40px;
  }
}