/* ============================================
   APULEIUS — CSS Variables & Base Styles
   ============================================ */

/* --- Google Fonts Import --- */
:root {
  /* ---- Colors: Primary ---- */
  --c-primary:        #1685FF;
  --c-primary-hover:  #1073E0;
  --c-primary-active: #0C5AB1;

  /* ---- Colors: Primary Background ---- */
  --c-primary-bg:        #FFFFFF;
  --c-primary-bg-hover:  #EFF5FF;
  --c-primary-bg-active: #DBEBFF;

  /* ---- Colors: Neutral Background ---- */
  --c-bg:        #F5F5F5;
  --c-bg-hover:  #ECECEC;
  --c-bg-active: #E2E2E2;

  /* ---- Colors: Text ---- */
  --c-heading:   #0F0F0F;
  --c-text:      #575757;
  --c-text-dark: #0F0F0F;
  --c-white:     #FFFFFF;
  --c-gray:      #595959;
  --c-gray-dark: #344054;
  --c-placeholder: #979797;
  --c-error:     #FF1616;
  --c-border:    rgba(68, 68, 68, 0.20);
  --c-border-focus: rgba(68, 68, 68, 0.60);
  --c-border-light: #EAEAEA;
  --c-overlay:   rgba(0, 0, 0, 0.80);

  /* ---- Typography: Font Families ---- */
  --ff-heading: 'STIX Two Text', 'Georgia', serif;
  --ff-body:    'Wix Madefor Display', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Typography: Desktop ---- */
  --fs-h1: 72px;
  --lh-h1: 100%;

  --fs-h2: 60px;
  --lh-h2: 110%;

  --fs-h3: 48px;
  --lh-h3: 110%;

  --fs-h4: 30px;
  --lh-h4: 120%;

  --fs-body1: 24px;
  --lh-body1: 140%;

  --fs-body2: 20px;
  --lh-body2: 140%;

  --fs-body3: 16px;
  --lh-body3: 140%;

  --fs-body4: 14px;
  --lh-body4: 120%;
  --ls-body4: -0.01em;

  --fs-btn: 14px;
  --lh-btn: 140%;

  /* ---- Border Radius ---- */
  --radius-lg: 14px;
  --radius-md: 8px;
  --radius-sm: 4px;

  /* ---- Spacing: Component gaps ---- */
  --gap-section: 80px;
  --gap-block:   48px;
  --gap-element: 24px;
  --gap-inner:   14px;
  --gap-tight:   8px;

  /* ---- Spacing: Section padding (vertical rhythm) ----
     Закономерность: все секции используют 140px top/bottom на десктопе.
     Контейнер: max-width 1600px, padding 0 160px (= 40px page margin + 120px inner).
     Заголовок секции → контент: 40px gap.
     Внутри карточки: 48px padding.
     Между строками карточки: 24px gap.
  ---- */
  --section-py:        140px;   /* vertical padding всех секций */
  --section-gap:       40px;    /* gap между заголовком и контентом секции */
  --container-px:      160px;   /* горизонтальный padding контейнера */
  --card-p:            48px;    /* padding внутри карточек (why, contact) */
  --card-gap:          24px;    /* gap между элементами внутри карточки */

  /* ---- Transitions ---- */
  --transition: 0.25s ease;
}

/* ---- Typography: Mobile (≤992px) ---- */
@media (max-width: 992px) {
  :root {
    --fs-h1: 32px;
    --lh-h1: 100%;

    --fs-h2: 28px;
    --lh-h2: 110%;

    --fs-h3: 24px;
    --lh-h3: 110%;

    --fs-h4: 20px;
    --lh-h4: 120%;

    --fs-body1: 18px;
    --lh-body1: 140%;

    --fs-body2: 16px;
    --lh-body2: 140%;

    --fs-body3: 14px;
    --lh-body3: 140%;

    --fs-body4: 12px;
    --lh-body4: 120%;
    --ls-body4: -0.01em;

    --fs-btn: 12px;
    --lh-btn: 140%;

    --radius-lg: 10px;
    --radius-md: 8px;
    --radius-sm: 4px;

    --gap-section: 48px;
    --gap-block:   32px;
    --gap-element: 16px;
    --gap-inner:   10px;
    --gap-tight:   6px;

    --section-py:        80px;
    --section-gap:       24px;
    --container-px:      20px;
    --card-p:            24px;
    --card-gap:          16px;
  }
}