/* =============================================================================
   Benarit — tokens.css
   Единственный файл, где живут CSS-переменные.
   Редактируется вручную. Подключать ПЕРВЫМ — до main.css и components.css.
   ============================================================================= */

:root {


  /* — РАЗМЕРЫ КОНТЕЙНЕРА ---------------------------------------------------- */
  --container-padding: 80px;

  /* — ЦВЕТА БРЕНДА ---------------------------------------------------------- */
  --color-bg:     #08080A;
  --color-dark:   #101014;
  --color-accent: #4438EB;
  --color-hover:  #5C5CFF;
  --color-text:   #9A9BA6;
  --color-white:  #FFFFFF;

  /* — ЦВЕТА КОМПОНЕНТНОГО УРОВНЯ -------------------------------------------- */
  --color-border:        rgba(255, 255, 255, 0.07);
  --color-border-light:  rgba(255, 255, 255, 0.06);
  --color-surface:       rgba(255, 255, 255, 0.05);чё
  --color-surface-hover: rgba(255, 255, 255, 0.08);
  --color-accent-bg:     rgba(68, 56, 235, 0.15);
  --color-accent-border: rgba(68, 56, 235, 0.3);
  --color-text-faint:    rgba(131, 132, 142, 0.6);
  --color-text-dark:     #7A7A7A;

  /* — ТИПОГРАФИКА — РАЗМЕРЫ ------------------------------------------------- */
  --font-xs:     13px;   /* юридический текст, мелкие метки */
  --font-small:  16px;   /* навигация, UI-элементы */
  --font-base:   18px;   /* основной текст */
  --font-ui:     20px;   /* кнопки, теги, font-weight: 500 */
  --font-h4:     28px;   /* заголовки карточек */
  --font-h3:     40px;   /* заголовки секций */
  --font-h2:     43px;   /* h2 */
  --font-h1:     52px;   /* h1 */
  --font-accent: 108px;  /* акцентные цифры */

  /* — ТИПОГРАФИКА — LINE-HEIGHT --------------------------------------------- */
  --lh-tight: 1.1;   /* h1 */
  --lh-card:  1.2;   /* карточки */
  --lh-text:  1.3;   /* основной текст */
  --lh-para:  1.4;   /* параграфы */
  --lh-faq:   1.5;   /* FAQ, длинный текст */

  /* — ТИПОГРАФИКА — LETTER-SPACING ------------------------------------------ */
  --ls-dense:  -0.1px;  /* плотный текст */
  --ls-wide:    0.5px;  /* лёгкая разрядка */
  --ls-accent:  3.7px;  /* метки, топбар */

  /* — РАДИУСЫ --------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* — АНИМАЦИИ -------------------------------------------------------------- */
  --transition:      0.22s ease;
  --transition-slow: 0.4s ease;

  /* — ХРОМ — РАЗМЕРЫ -------------------------------------------------------- */
  --topbar-height: 40px;
  --header-height: 72px;

  /* — HERO ------------------------------------------------------------------ */
  --hero-bg-size: 118px;
  --hero-vignette: 5%;

  /* — ГЛОБУС ---------------------------------------------------------------- */
  --globe-grid-gap: 100px;
  --globe-size-min: 400px;
  --globe-size-max: 700px;
  --globe-left-col-min: 500px;
  --globe-steps-offset: 40px;
  --globe-glow-size: 100%;

  /* — ШАГИ ПРОЦЕССА (секция «Глобус») --------------------------------------- */
  --steps-process-icon-size:    44px;
  --steps-process-icon-bg:      var(--color-surface);
  --steps-process-icon-border:  var(--color-border);
  --steps-process-icon-color:   var(--color-accent);
  --steps-process-divider-width: 130px;
  --steps-item-min-width: 44px;
  --steps-process-divider-color: rgba(255, 255, 255, 0.15);
  --steps-process-gap:          20px;
  --steps-process-title-size:   var(--font-base);
  --steps-process-title-width: 160px;
  
  /* — Калькулятор ----------------------------------------------------------- */
--calc-col-right:        2fr;
--calc-tariff-padding-y: 15px;
--calc-tariff-padding-x: 12px;
--calc-tariff-font:      var(--font-h3);
}