html { scroll-behavior: smooth; }
/* Substitui o @layer base { @apply ... } do CSS original (não suportado fora de um build Tailwind v4) */
body { font-family: var(--font-sans); background: var(--background); color: var(--foreground); }
* { border-color: var(--border); }

/*
  As classes utilitárias do Tailwind com opacidade (ex: text-background/70) não geram CSS
  de forma confiável quando a cor é uma variável CSS custom (oklch) via CDN. Por isso, as
  variações com transparência usadas no site são declaradas aqui manualmente com color-mix(),
  garantindo que sempre sejam aplicadas (isso corrigiu o texto do rodapé que ficava com a
  mesma cor do fundo).
*/
.site-header { background-color: color-mix(in oklab, var(--background) 90%, transparent); }
.blob-primary-10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.blob-accent-40 { background-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.blob-primary-foreground-15 { background-color: color-mix(in oklab, var(--primary-foreground) 15%, transparent); }
.cta-strategic-label { color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); }
.icon-chip-primary { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.icon-chip-orange { background-color: color-mix(in oklab, #F58220 12%, transparent); }
.pain-point-card { background-color: color-mix(in oklab, #F58220 5%, transparent); border-color: color-mix(in oklab, #F58220 25%, transparent); }
.section-muted { background-color: color-mix(in oklab, var(--muted) 40%, transparent); }
.cta-subtext { color: color-mix(in oklab, var(--primary-foreground) 85%, transparent); }
.btn-cta-outline { border-color: color-mix(in oklab, var(--primary-foreground) 40%, transparent); }
.btn-cta-outline:hover { background-color: color-mix(in oklab, var(--primary-foreground) 10%, transparent); }
.footer-text { color: color-mix(in oklab, var(--background) 70%, transparent); }
.footer-text a:hover { color: var(--background); }
.footer-divider { border-color: color-mix(in oklab, var(--background) 10%, transparent); }
.footer-fine { color: color-mix(in oklab, var(--background) 40%, transparent); }
