/* ========================================
   VARIABLES - LP Lenovo 360 for Services 2026
   Tokens extraídos do Figma kJkGbhHnY0wpmCRmMfAjA0
   ======================================== */

:root {
  /* ---------- Colors ---------- */
  --color-primary:        #4D144A;
  --color-primary-dark:   #3a0f37;
  --color-red:            #e1140a;
  --color-red-dark:       #c41009;
  --color-pink-bg:        #f0c7bf;
  --color-bg-light:       #f3f3f3;
  --color-white:          #ffffff;
  --color-black:          #000000;
  --color-text-dark:      #1e1e1e;
  --color-text-body:      #1e1e1e;

  /* Seção 4 gradient */
  --gradient-section4: linear-gradient(
    193.34deg,
    #4D144A 25.2%,
    #64131E 49.6%,
    #4D144A 98.5%
  );

  /* Seção 2 gradient */
  --gradient-section2: linear-gradient(
    to bottom,
    #f3f3f3 0%,
    #f0c7bf 100%
  );

  /* ---------- Typography ---------- */
  --font-family-primary:  'Lenovo', Arial, sans-serif;

  --font-size-hero-title:    50px;
  --font-size-hero-sub:      20px;
  --font-size-section-title: 36px;
  --font-size-section-sub:   18px;
  --font-size-milestone:     28px;
  --font-size-body:          16px;
  --font-size-body-sm:       14px;
  --font-size-btn:           16px;
  --font-size-footer:        16px;
  --font-size-logo-main:     25px;
  --font-size-logo-sub:      14px;

  --font-weight-regular: 400;
  --font-weight-bold:    700;

  /* ---------- Layout ---------- */
  --container-max:      1440px;
  --container-padding:  clamp(20px, 11.5%, 165px);
  --section-pad-y:      80px;
  --btn-height:         57px;
  --btn-radius:         4px;
  --btn-pad-x:          28px;

  /* ---------- Transitions ---------- */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.3s ease;

  /* ---------- Z-index ---------- */
  --z-base:       1;
  --z-overlay:    10;
  --z-mobile-cta: 9998;
}

/* ---------- Responsive overrides (≤1024px) ---------- */
@media (max-width: 1024px) {
  :root {
    --font-size-hero-title:    32px;
    --font-size-hero-sub:      16px;
    --font-size-section-title: 28px;
    --font-size-section-sub:   16px;
    --font-size-milestone:     22px;
    --section-pad-y:           56px;
    --container-padding:       24px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-hero-title:    26px;
    --section-pad-y:           40px;
  }
}