/* base.css — tokens, reset leve e utilitários globais.
   Mobile-first: 375px em diante, com breakpoints min-width 640 · 768 · 1024 · 1280. */

:root {
  /* Cores da marca */
  --verde: #0B4A26;
  --verde-escuro: #062E17;
  --verde-vivo: #147A38;
  --lima: #8DC63F;
  --fundo: #F3F7F1;
  --texto: #14231A;
  --texto-suave: #536456;
  --branco: #FFFFFF;

  /* Cores de apoio usadas nos artboards */
  --texto-sobre-lima: #12250B;
  --borda: #E2EADF;
  --borda-suave: #DCE6D8;
  --borda-pill: #B6C7B1;
  --rodape-texto: #A9C3AC;
  --rodape-borda: #1B4A2C;
  --rodape-borda-forte: #1F5634;

  /* Formas e sombra */
  --raio-card: 22px;
  --raio-bloco: 26px;
  --sombra: 0 14px 34px rgba(6, 46, 23, .12);

  /* Layout */
  --largura-conteudo: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

img, picture, svg { max-width: 100%; display: block; }

a { color: var(--verde); }
a:hover { color: var(--verde-vivo); }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }

button { font-family: inherit; }

.container {
  width: min(var(--largura-conteudo), 100% - 40px);
  margin-inline: auto;
}

:focus-visible {
  outline: 3px solid var(--verde-vivo);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}