/* =============================================================
   BASE — tokens e reset compartilhados por todas as telas.
   Vira /public/assets/css/base.css.
   Trocar a paleta inteira = trocar as variaveis abaixo.
   ============================================================= */
:root{
  --verde-principal:#719E5E;   /* amostrado das artes originais */
  --verde-escuro:   #5F8A4E;
  --verde-claro:    #A8C795;
  --verde-suave:    #EDF3E8;
  --fundo:          #E8E8E8;
  --branco:         #FFFFFF;
  --texto:          #2E3B27;
  --texto-suave:    #6B7A63;

  /* Verdes de texto escurecidos ate passar AA:
     titulo sobre fundo = 3,3:1 | botao sobre branco = 5,9:1 */
  --verde-titulo:#5F8A4E;
  --verde-botao: #4A6E3C;

  /* Cores de estado — separadas do verde da marca, porque
     "confirmado" nao pode depender da cor da identidade. */
  --ok:        #4A8A5C;
  --ok-suave:  #E4F1E7;
  --aviso:     #B8862F;
  --aviso-suave:#FAF0DC;
  --erro:      #B4483F;
  --erro-suave:#FAE7E5;
  --neutro:    #7B8A73;
  --neutro-suave:#EDEFEA;

  --linha:  #DDE3D8;
  --sombra: 0 4px 20px rgba(46,59,39,.08);
  --sombra-alta: 0 14px 34px rgba(46,59,39,.14);

  --raio:      18px;
  --raio-hero: 26px;
  --raio-p:    12px;

  --transicao: 220ms cubic-bezier(.4,0,.2,1);
  --traco:     cubic-bezier(.22,1,.36,1);

  --coluna:  526px;
  --margem:  18px;
  --gap-card:64px;

  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--fundo)}
body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

/* Digitos que se alinham em coluna (valores, horarios, metricas) */
.num{font-variant-numeric:tabular-nums}

/* Foco visivel em tudo que recebe teclado */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--verde-escuro);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:1ms!important}
}