/* ============================================================
   ATLAS RS — base.css
   Tokens de marca (harmonizados com cagrambiental.com) + reset
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* --- Verdes de marca (do site institucional + mockup do Atlas) --- */
  --bg-dark:        #122318;   /* fundo escuro principal — header, hero, footer */
  --bg-dark-2:      #17301f;   /* painel sobre o escuro (cards, nav) */
  --bg-dark-3:      #1e3c27;   /* hover / borda sobre o escuro */
  --brand-green:    #2f5233;   /* verde-mata médio — botões primários */
  --brand-green-hi: #3d6b43;   /* hover do botão primário */
  --accent-light:   #86b46b;   /* verde-claro — destaques, badges "oficial", hover de link */
  --accent-pampa:   #c99a4b;   /* tom campo/pampa — usado em dado calculado por nós */
  --accent-warn:    #b9762f;   /* aviso — badge "generalizado" (mesma família terrosa, mais escura) */

  /* --- Superfícies claras (cards de conteúdo) --- */
  --paper:          #f7f5ee;
  --paper-2:        #ffffff;
  --line:           #e2ddcd;

  /* --- Texto --- */
  --ink:            #17261a;
  --ink-muted:      #4c5c50;
  --on-dark:        #eef2ea;
  --on-dark-muted:  #a9bcac;

  /* --- Tipografia --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* --- Escala --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(18,35,24,.06), 0 8px 24px rgba(18,35,24,.08);
  --max-w: 1240px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}
p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }

.container{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-green);
}
/* Em fundos escuros (hero, faixa de transparência) o verde-mata não tem
   contraste suficiente — usamos o verde-claro de destaque nesses contextos. */
.hero .eyebrow,
.transparencia .eyebrow{
  color: var(--accent-light);
}

.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

:focus-visible{
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}