/* ==========================================================================
   Design tokens — extraídos de https://overtake-wbs.framer.website/
   Valores medidos no DOM renderizado (viewport 1440px).
   ========================================================================== */

/* Fontes
   - Switzer (títulos)   → Fontshare, gratuita
   - Stack Sans Headline (corpo/UI) → Google Fonts
   - Geist (micro-labels) → Google Fonts */
@import url("https://api.fontshare.com/v2/css?f[]=switzer@500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@400;700&family=Geist:wght@700&display=swap");

:root {
  /* ---------- Cores base ---------- */
  --c-ink:          #0b0b0c;   /* texto principal, botões primários, seções escuras */
  --c-white:        #ffffff;
  --c-surface:      #f0f0f0;   /* fundo do hero e cards claros */
  --c-surface-2:    #f5f5f5;
  --c-muted:        #b7bcbc;   /* texto secundário em fundo escuro */
  --c-muted-2:      #6a6e6e;   /* texto secundário em fundo claro */
  --c-line:         #dddddd;

  /* ---------- Escuros ---------- */
  --c-dark-1:       #101011;
  --c-dark-card:    #171718;   /* item ativo / cards em seção preta */
  --c-teal-900:     #122020;   /* card de estatística / footer */
  --c-teal-800:     #1e2b2b;   /* bolinhas inativas, bordas no teal */

  /* ---------- Acentos ---------- */
  --c-lime:         #9efc65;   /* acento principal (números, destaques, CTA no footer) */
  --c-lime-50:      #9efc6580;
  --c-pink:         #ffbcfc;   /* acento secundário (+, %, ticker, barras) */
  --c-yellow:       #fde589;   /* card de destaque */
  --c-orange:       #ff742e;   /* estrelas / raro */
  --c-footer-green: #2f9e78;   /* símbolo grande do logo no footer (aprox.) */

  /* ---------- Overlays ---------- */
  --o-white-3:  #ffffff08;
  --o-white-4:  #ffffff0a;     /* linhas de grade verticais nas seções pretas */
  --o-white-10: #ffffff1a;
  --o-white-20: #ffffff33;     /* bordas de input/ícones sociais no escuro */
  --o-white-30: #ffffff4d;
  --o-ink-2:    #0b0b0c05;
  --o-ink-10:   #0b0b0c1a;
  --o-ink-50:   #0b0b0c80;
  --o-ink-70:   #0b0b0cb3;
  --o-ink-90:   #0b0b0ce6;

  /* ---------- Tipografia ---------- */
  --font-display: "Switzer", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Stack Sans Headline", "Inter", system-ui, sans-serif;
  --font-micro:   "Geist", "Inter", system-ui, sans-serif;

  /* tamanho / altura de linha / peso / tracking  (desktop) */
  --t-hero:   600 74px/1.2 var(--font-display);  --ls-hero: -0.02em;   /* 74px, -1.48px */
  --t-h1:     600 70px/1.2 var(--font-display);  --ls-h1:   -0.02em;   /* números grandes, títulos */
  --t-h2:     600 60px/1.1 var(--font-display);  --ls-h2:   -0.02em;
  --t-h3:     500 42px/1.1 var(--font-display);  --ls-h3:   -0.02em;   /* títulos de seção */
  --t-h4:     500 32px/1.1 var(--font-display);  --ls-h4:   -0.02em;
  --t-h5:     500 26px/1.2 var(--font-display);  --ls-h5:   -0.03em;   /* títulos de card */
  --t-h6:     500 24px/1.2 var(--font-display);  --ls-h6:   -0.02em;
  --t-lead:   500 20px/1.4 var(--font-display);  --ls-lead: -0.02em;   /* itens de menu de serviços, links do footer */
  --t-body:   400 16px/1.2 var(--font-body);
  --t-small:  400 14px/1.2 var(--font-body);
  --t-tiny:   400 14px/1.1 var(--font-body);
  --t-micro:  700 12px/1.2 var(--font-micro);    --ls-micro: -0.02em;

  /* Recursos OpenType usados pelo Framer no Switzer */
  --ot-features: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on;

  /* ---------- Raios ---------- */
  --r-pill:   100px;  /* botões, badges, nav ativo */
  --r-panel:  30px;   /* seções escuras, cards, imagens */
  --r-card:   26px;   /* card interno (info de case study) */
  --r-lg:     20px;
  --r-md:     14px;   /* item de lista ativo */
  --r-sm:     10px;   /* chips de destaque no texto, botões pequenos */
  --r-xs:     4px;
  --r-round:  50%;

  /* ---------- Sombras ---------- */
  --sh-btn-dark: 0 5px 14px 0 rgba(11,11,12,.5), 0 14px 50px 0 rgba(11,11,12,.5);
  --sh-btn-lime: 0 5px 14px 0 rgba(158,252,101,.5), 0 14px 50px 0 rgba(158,252,101,.5);
  --sh-soft:     0 2px 4px 0 rgba(5,8,12,.1);
  --sh-float:    0 .6px 1.6px -1.5px rgba(0,0,0,.17), 0 2.3px 6px -3px rgba(0,0,0,.14), 0 10px 26px -4.5px rgba(0,0,0,.02);

  /* ---------- Espaçamento ---------- */
  --s-4: 4px;  --s-6: 6px;  --s-8: 8px;  --s-10: 10px; --s-14: 14px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-30: 30px; --s-40: 40px; --s-60: 60px;
  --s-80: 80px; --s-100: 100px; --s-120: 120px; --s-140: 140px; --s-150: 150px;

  --gutter:        30px;     /* margem lateral da página e dos painéis */
  --section-y:     140px;    /* padding vertical padrão de seção */
  --container:     1200px;   /* largura máxima do conteúdo */
  --container-sm:  850px;    /* seções estreitas (Growth Counter) */
  --nav-h:         102px;

  /* ---------- Movimento ---------- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-inout:  cubic-bezier(.44, 0, .56, 1);   /* usado pelo Framer em inputs */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-fast: .2s; --d-base: .4s; --d-slow: .8s;
}

/* Breakpoints usados pelo template Framer:
   Desktop ≥ 1200px | Tablet 810–1199px | Mobile ≤ 809px */
@media (max-width: 1199px) {
  :root {
    --t-hero: 600 60px/1.15 var(--font-display);
    --t-h1:   600 56px/1.15 var(--font-display);
    --t-h2:   600 48px/1.1 var(--font-display);
    --t-h3:   500 36px/1.1 var(--font-display);
    --section-y: 100px;
    --gutter: 20px;
  }
}
@media (max-width: 809px) {
  :root {
    --t-hero: 600 42px/1.15 var(--font-display);
    --t-h1:   600 44px/1.15 var(--font-display);
    --t-h2:   600 36px/1.1 var(--font-display);
    --t-h3:   500 30px/1.15 var(--font-display);
    --t-h5:   500 22px/1.2 var(--font-display);
    --t-lead: 500 18px/1.4 var(--font-display);
    --section-y: 80px;
    --gutter: 16px;
  }
}