/* ============================================================
   ABM Laboratory — Design Tokens
   Все цвета, шрифты, отступы, радиусы и тени.
   Меняйте значения только здесь — каскад прокинет везде.
   ============================================================ */

:root {
  /* ---------- БРЕНДОВЫЕ ЦВЕТА ---------- */

  /* Navy — основа фирстиля. Шапка, подвал, hero, primary-кнопки.
     Связано с Elementor Global «Primary» (Site Settings → Global Colors) — правится в Elementor. */
  --color-primary:        var(--e-global-color-primary, #1B3B6F);
  --color-primary-hover:  #142C53;   /* hover для primary-кнопок */
  --color-primary-soft:   #2A4F87;   /* осветлённый, для подложек/градиентов */

  /* Sky — акцент. CTA, ссылки, hover-состояния, активные табы.
     Связано с Elementor Global «Accent». */
  --color-accent:         var(--e-global-color-accent, #4FA3E3);
  --color-accent-hover:   #3B8DCE;
  --color-accent-soft:    #DCEEFA;   /* очень светлый, для бейджей и подложек */

  /* ---------- НЕЙТРАЛЬНЫЕ ---------- */

  --color-ink:            #0F1F3D;   /* самый тёмный текст: H1-H2 */
  --color-text:           var(--e-global-color-text, #1F2D4D);   /* основной текст · Elementor Global «Text» */
  --color-muted:          #3E4A63;   /* вторичный текст, мета (затемнён для контраста: ~7.8:1 на белом) */
  --color-subtle:         #94A0B8;   /* самый светлый текст (даты, плейсхолдеры) */

  --color-bg:             #FFFFFF;   /* основной фон страниц */
  --color-surface:        #F6F8FB;   /* фон альтернативных секций */
  --color-surface-2:      #EDF1F7;   /* подложка карточек на surface */
  --color-border:         #DBE2EC;   /* линии, рамки полей */

  /* ---------- ФУНКЦИОНАЛЬНЫЕ ---------- */

  --color-success:        #2E7D5B;
  --color-error:          #C0392B;
  --color-warning:        #B8860B;

  /* ---------- ИНВЕРС (для тёмных секций) ---------- */

  --color-on-primary:        #FFFFFF;
  --color-on-primary-muted:  #B8C5DD;   /* приглушённый текст на тёмном фоне */

  /* ============================================================
     ТИПОГРАФИКА
     ============================================================ */

  /* Основной шрифт связан с Elementor Global Font «Text» — правится в Elementor (Global Fonts). */
  --font-sans: var(--e-global-typography-text-font-family, 'Montserrat'), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Шкала через clamp() — линейно растягивается между 375px и 1440px */
  --fs-h1:    clamp(2.25rem, 1.5rem + 3.2vw, 4rem);     /* 36 → 64 */
  --fs-h2:    clamp(1.75rem, 1.2rem + 2.4vw, 3rem);     /* 28 → 48 */
  --fs-h3:    clamp(1.25rem, 1rem + 1.1vw, 1.75rem);    /* 20 → 28 */
  --fs-h4:    1.125rem;                                  /* 18 */
  --fs-body-l:1.125rem;                                  /* 18 — intro/lead */
  --fs-body:  1rem;                                      /* 16 — основной */
  --fs-small: 0.875rem;                                  /* 14 — мета */
  --fs-mini:  0.75rem;                                   /* 12 — бейджи */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.6;
  --lh-relaxed: 1.72;

  --tracking-wide: 0.06em;   /* для uppercase eyebrow */
  --tracking-mega: 0.18em;   /* для логотипа ABM */

  /* ============================================================
     SPACING (фактор 4)
     ============================================================ */

  --sp-1:  0.25rem;   /*   4 */
  --sp-2:  0.5rem;    /*   8 */
  --sp-3:  0.75rem;   /*  12 */
  --sp-4:  1rem;      /*  16 */
  --sp-5:  1.5rem;    /*  24 */
  --sp-6:  2rem;      /*  32 */
  --sp-7:  3rem;      /*  48 */
  --sp-8:  4rem;      /*  64 */
  --sp-9:  6rem;      /*  96 */
  --sp-10: 8rem;      /* 128 */

  /* ---------- LAYOUT ---------- */

  --container-max: 1240px;
  --container-pad: clamp(1rem, 4vw, 5rem);

  --section-gap:   clamp(3rem, 7vw, 6rem);   /* отступ между секциями */
  --section-gap-s: clamp(2rem, 4vw, 3rem);   /* малый отступ */

  /* ============================================================
     РАДИУСЫ И ТЕНИ
     ============================================================ */

  --radius-xs:   4px;
  --radius-sm:   8px;     /* кнопки, инпуты */
  --radius-md:   12px;    /* карточки */
  --radius-lg:   20px;    /* hero-блоки, крупные карточки */
  --radius-pill: 9999px;  /* теги, бейджи */

  --shadow-sm:    0 1px 2px rgba(15, 31, 61, 0.06);
  --shadow-md:    0 6px 20px rgba(15, 31, 61, 0.10);
  --shadow-lg:    0 16px 40px rgba(15, 31, 61, 0.16);
  --shadow-focus: 0 0 0 3px rgba(79, 163, 227, 0.35);

  /* ============================================================
     АНИМАЦИИ
     ============================================================ */

  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast:    180ms;
  --dur-base:    250ms;
  --dur-slow:    500ms;

  /* ============================================================
     Z-INDEX
     ============================================================ */

  --z-header:    100;
  --z-dropdown:  200;
  --z-overlay:   500;
  --z-modal:     600;
}