:root{
  --bg:#FCFCFC;
  --text:#1A1B1E;
  --text-2:#383838;
  --text-3:#6B6B6B;

  --border:#E0E0E0;
  --border-strong:#D9D9D9;

  --dark:#18181C;
  --on-dark:#FCFCFC;
  --on-dark-2:rgba(252,252,252,.75);

  --accent-green:#049400;

  --btn-grad-from:#000000;
  --btn-grad-to:#3C3C3C;

  --font:"Funnel Display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --container:1640px;
  --gutter:24px;

  --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px;

  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

 --header-h: 104px; /* ajuste fino depois se precisar */
 --portfolio-seal-scale: 1.3;
}




/* =========================
   TOKENS RESPONSIVOS
   ========================= */

:root{
  --header-h: 104px;

  --title-hero: 77px;
  --title-section: 70px;
  --lead-size: 24px;

  --container: 1640px;
  --gutter: 24px;
}

/* 1440 */
@media (max-width: 1440px){
  :root{
    --container: 1360px;
    --title-hero: 70px;
    --title-section: 54px;
    --lead-size: 22px;
  }
}

/* 1360 */
@media (max-width: 1360px){
  :root{
    --container: 1280px;
    --title-hero: 54px;
    --title-section: 58px;
    --lead-size: 21px;
  }
}

/* 1280 */
@media (max-width: 1280px){
  :root{
    --container: 1200px;
    --title-hero: 54px;
    --title-section: 54px;
    --lead-size: 20px;
  }
}

/* 1100 */
@media (max-width: 1100px){
  :root{
    --container: 1040px;
    --header-h: 84px;
    --title-hero: 54px;
    --title-section: 46px;
    --lead-size: 18px;
    --gutter: 20px;
  }
}

/* 1024 */
@media (max-width: 1024px){
  :root{
    --container: 980px;
    --header-h: 80px;
    --title-hero: 48px;
    --title-section: 42px;
    --lead-size: 18px;
  }
}

/* 900 */
@media (max-width: 900px){
  :root{
    --container: 860px;
    --header-h: 76px;
    --title-hero: 42px;
    --title-section: 38px;
    --lead-size: 17px;
    --gutter: 18px;
  }
}

/* 600 */
@media (max-width: 600px){
  :root{
    --header-h: 72px;
    --title-hero: 36px;
    --title-section: 32px;
    --lead-size: 16px;
    --gutter: 16px;
  }
}

/* 400 */
@media (max-width: 400px){
  :root{
    --title-hero: 32px;
    --title-section: 28px;
    --lead-size: 15px;
    --gutter: 14px;
  }
}