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

:root {

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

  --section-padding:    100px;
  --section-padding-sm:  64px;
  --section-padding-lg: 140px;

  /* — ЦВЕТА БРЕНДА ---------------------------------------------------------- */
  --color-bg-black: #08080A;
  --color-bg-dark:  #09090F;
  --color-bg:       var(--color-bg-black);
  --color-accent: #4438EB;
  --color-hover:  #5C5CFF;
  --color-text:   #B8B9C3;
  --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;
  --color-success:       #a8f81e;
  --color-error:         #ff5959;

  /* — ТИПОГРАФИКА — РАЗМЕРЫ ------------------------------------------------- */
  --font-xs:     14px;
  --font-small:  18px;
  --font-base:   20px;
  --font-ui:     20px;
  --font-h4:     28px;
  --font-h3:     40px;
  --font-h2:     43px;
  --font-h1:     62px;
  --font-accent: 108px;
  --font-weight-base: 500;

  /* — ТИПОГРАФИКА — LINE-HEIGHT --------------------------------------------- */
  --lh-tight: 1.1;
  --lh-card:  1.2;
  --lh-text:  1.3;
  --lh-para:  1.4;
  --lh-faq:   1.5;

  /* — ТИПОГРАФИКА — LETTER-SPACING ------------------------------------------ */
  --ls-dense:  -0.1px;
  --ls-wide:    0.5px;
  --ls-accent:  3.7px;

  /* — КНОПКИ ---------------------------------------------------------------- */
  --btn-padding-y:    25px;
  --btn-padding-x:    32px;
  --btn-padding-sm-y: 10px;
  --btn-padding-sm-x: 20px;
  --btn-padding-lg-y: 20px;
  --btn-padding-lg-x: 48px;
  --btn-padding-icon: 12px;


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

  /* — Z-INDEX --------------------------------------------------------------- */
  --z-base:    1;
  --z-float:   10;
  --z-overlay: 50;
  --z-header:  100;
  --z-modal:   200;
  --z-toast:   300;

  /* — АНИМАЦИИ -------------------------------------------------------------- */
  --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);
}