/* ==========================================================================
   Chácara Viva — tokens de design e base
   Paleta: mata (verde-escuro), broto, ipê-amarelo, terra, água.
   Tipos: Zilla Slab (títulos, lembra rótulo de saco de semente)
          Atkinson Hyperlegible (texto, feita para leitura fácil).
   ========================================================================== */

:root {
  /* Cores da natureza */
  --mata: #1E4D3A;
  --mata-escura: #143628;
  --broto: #4E8B40;
  --broto-claro: #DCEBD3;
  --ipe: #D9A21B;
  --ipe-claro: #F8ECC8;
  --ipe-texto: #7A5A08;
  --terra: #8B4A33;
  --terra-claro: #F3E1D8;
  --agua: #2C6E8E;
  --agua-claro: #D9EAF2;
  --geleia: #8E3B5E;
  --geleia-claro: #F3DDE6;
  --farelo: #7A5C2E;
  --farelo-claro: #EFE3CF;
  --lago: #1F6F6A;
  --lago-claro: #D3EAE7;
  --fruto: #B85A16;
  --fruto-claro: #F8E2CF;
  --fruto-texto: #8A4210;
  --alerta: #B3372A;
  --alerta-claro: #F7DEDA;
  --alerta-texto: #8F2B20;

  /* Superfícies e texto */
  --fundo: #EDF1EA;
  --superficie: #FFFFFF;
  --superficie-2: #F4F7F1;
  --linha: #D3DCCE;
  --texto: #1C2B22;
  --texto-2: #4A5B50;
  --foco: #2C6E8E;

  /* Tipografia */
  --fonte-titulo: "Zilla Slab", "Rockwell", Georgia, serif;
  --fonte: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.625rem;
  --t-2xl: 2.25rem;

  /* Espaços */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  /* Formas */
  --raio-p: 6px;
  --raio: 10px;
  --raio-g: 18px;
  --sombra: 0 1px 2px rgb(20 54 40 / 0.06), 0 6px 20px rgb(20 54 40 / 0.06);
  --sombra-alta: 0 12px 40px rgb(20 54 40 / 0.22);

  --lateral: 264px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mata: #2E6B52;
    --mata-escura: #0F241B;
    --broto: #7DBB6C;
    --broto-claro: #1F3824;
    --ipe: #E3B23C;
    --ipe-claro: #3A2F12;
    --ipe-texto: #F2D58A;
    --terra: #D08C6E;
    --terra-claro: #3A241B;
    --agua: #6BB3D6;
    --agua-claro: #16303D;
    --geleia: #D58BAB;
    --geleia-claro: #3A1A27;
    --farelo: #CDAA6E;
    --farelo-claro: #33281A;
    --lago: #5FB8AF;
    --lago-claro: #14302D;
    --fruto: #E8955A;
    --fruto-claro: #3A2414;
    --fruto-texto: #F4C29C;
    --alerta: #E57364;
    --alerta-claro: #3D1C18;
    --alerta-texto: #F5B3A9;

    --fundo: #0E1712;
    --superficie: #15221A;
    --superficie-2: #1B2B21;
    --linha: #2B3D31;
    --texto: #E3ECE5;
    --texto-2: #A9BAAE;
    --foco: #6BB3D6;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.3);
    --sombra-alta: 0 12px 40px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

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

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
  min-height: 100dvh;
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--texto);
}
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: 1.0625rem; }

p { margin: 0; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--agua); }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: 4px;
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.pular {
  position: absolute;
  left: var(--e3); top: -60px;
  z-index: 100;
  background: var(--mata); color: #fff;
  padding: var(--e2) var(--e4);
  border-radius: var(--raio);
  text-decoration: none;
}
.pular:focus { top: var(--e3); }

.numero { font-variant-numeric: tabular-nums; }

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