:root {
  --c-green: #99CC33;
  --c-green-dark: #009966;
  --c-gray: #808285;
  --c-gray-dark: #5B5B5E;
  --c-blue: #0050FF;
  --c-acqua: #0FABD3;
  --c-magenta: #F40060;
  --c-pink: #FF1DC2;
  --c-dark: #000000;
  --c-white: #FFFFFF;
  --c-offwhite: #F5F5F5;
  --c-black: #000000;

  --ff-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-body: "Galano Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-extrabold: 800;

  --fs-100: clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem);
  --fs-200: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem);
  --fs-300: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-400: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  --fs-500: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  --fs-600: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --fs-700: clamp(1.75rem, 1.3rem + 2.3vw, 2.875rem);
  --fs-800: clamp(2.125rem, 1.5rem + 2.9vw, 3.625rem);
  --fs-900: clamp(2.375rem, 1.65rem + 3.5vw, 4.375rem);
  --fs-1100: clamp(2.5rem, 1.6rem + 4.2vw, 6rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-section: clamp(3.5rem, 2rem + 4.5vw, 6.5rem);

  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 3vw, 2rem);

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: clamp(20px, 3vw, 40px);
  --radius-pill: 999px;
  /* Raio de cartão do site — hoje cravado em hero, drop-in, carbon-footprint,
     same-process e land-use; migrar essas ocorrências para cá. */
  --radius-card: 16px;
  /* Cartão com faixa lateral: lado da faixa reto, para a faixa não curvar. */
  --radius-card-stripe: 0 var(--radius-card) var(--radius-card) 0;

  /* Elevação de cartão, como em css/layout.css */
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 10px 24px rgba(0, 0, 0, 0.18);

  --z-base: 1;
  --z-header: 100;
  --z-menu: 200;
  --z-modal: 300;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.8s;
}

@media (min-width: 1920px) {
  :root {
    --fs-1100: clamp(6.3rem, 3.6rem + 2.25vw, 8.1rem);
  }
}

@media (min-width: 2255px) {
  :root {
    --fs-1100: clamp(6.25rem, 5.25rem + 0.7vw, 7rem);
  }
}