:root {
  /* Marca Velasque — verde primário, azul secundário */
  --color-brand-green: #00c560;
  --color-brand-green-hover: #00a851;
  --color-brand-green-glow: #00e676;
  --color-brand-green-soft: rgba(0, 197, 96, 0.1);
  --color-brand-blue: #3c61b2;
  --color-brand-blue-hover: #324f94;
  --color-brand-blue-soft: rgba(60, 97, 178, 0.1);

  --color-primary: var(--color-brand-green);
  --color-primary-hover: var(--color-brand-green-hover);
  --color-primary-soft: var(--color-brand-green-soft);
  --color-secondary: var(--color-brand-blue);
  --color-secondary-hover: var(--color-brand-blue-hover);
  --color-secondary-soft: var(--color-brand-blue-soft);

  --color-black: #000000;
  --color-black-soft: #0a0a0a;
  --color-gray-dark: #1a1a1a;
  --color-gray-mid: #5c5c5c;
  --color-gray-light: #d4d4d4;
  --color-white-soft: #f4f7fb;
  --color-white: #ffffff;

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;
  --radius-full: 9999px;
  --max-width: 88rem;
  --content-width: 52rem;
  --header-height: 6rem;
  --hero-fold-height: calc(100vh - var(--header-height));
  --hero-fold-height: calc(100svh - var(--header-height));
  --hero-fold-height: calc(100dvh - var(--header-height));

  /* 50k Micro-Interactions: Spring & Tactile Timing */
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-tactile: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* 50k Spatial Depth & Specular Shadows */
  --shadow-glass: 0 20px 48px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --shadow-card-elevated: 0 12px 32px -8px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 24px 52px -12px rgba(0, 197, 96, 0.16), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 0 0 1.5px rgba(0, 197, 96, 0.35);
  --shadow-emerald-glow: 0 0 28px rgba(0, 230, 118, 0.45);
}

/* 5xl — ultrawide: coluna central um pouco mais larga, sem esparramar texto */
@media (min-width: 2560px) {
  :root {
    --max-width: 90rem;
  }
}