/* ============================================================
   TOKENS — Design System "Cartographic Precision"
   Fonte da verdade de cor, tipografia e espaçamento.
   Espelha o DESIGN.md e o config exportado do Google Stitch.
   REGRA: nunca crave cor/tamanho no HTML — use estas variáveis
   (ou as classes de components.css). Ver DESIGN.md.
   ============================================================ */

:root {
  /* ---- Superfícies / neutros (tema claro "papel") ---- */
  --background:                 #f8faf8;
  --paper-white:                #FDFDFB;
  --surface:                    #f8faf8;
  --surface-dim:                #d8dad9;
  --surface-container-lowest:   #ffffff;
  --surface-container-low:      #eff2ee;
  --surface-container:          #e7eae6;
  --surface-container-high:     #dee2dd;
  --surface-container-highest:  #d3d7d2;
  --surface-variant:            #e1e3e1;

  /* ---- Tinta / texto ---- */
  --on-background:      #191c1b;
  --on-surface:         #191c1b;
  --on-surface-variant: #444843;
  --inverse-surface:    #2e3130;
  --inverse-on-surface: #eff1ef;

  /* ---- Traço / linhas ---- */
  --outline:         #757873;
  --outline-variant: #b8bcb4;

  /* ---- Cores de marca ---- */
  --primary:               #000000;  /* slate quase-preto: texto/estrutura de alto contraste */
  --on-primary:            #ffffff;
  --primary-container:     #171d17;
  --on-primary-container:  #7f867d;

  --secondary:              #2E6B3B;  /* verde vegetação: acento acadêmico / ações */
  --on-secondary:           #ffffff;
  --secondary-container:    #c2eec0;
  --on-secondary-container: #476d49;

  --tertiary:              #675f24;  /* ocre terreno */
  --on-tertiary:           #ffffff;
  --tertiary-container:    #b7ac69;
  --on-tertiary-container: #474006;
  --tertiary-fixed:        #f0e49b;

  /* ---- Acentos temáticos (dados / mapa) ---- */
  --hydrology-blue: #1D5578;  /* água / sensoriamento — links e interativos */
  --terrain-clay:   #C17D45;  /* terreno / argila */

  /* ---- Estado ---- */
  --error:           #ba1a1a;
  --on-error:        #ffffff;
  --error-container: #ffdad6;

  /* ---- Tipografia (famílias) ---- */
  --font-display: "Literata", Georgia, "Times New Roman", serif;   /* títulos / publicação */
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* labels, códigos, coordenadas */

  /* ---- Escala tipográfica (fluida) ---- */
  --display-lg:  clamp(2.25rem, 1.70rem + 2.4vw, 3rem);   /* 36 → 48px */
  --headline-lg: clamp(1.75rem, 1.45rem + 1.3vw, 2rem);   /* 28 → 32px */
  --headline-md: clamp(1.35rem, 1.20rem + 0.6vw, 1.5rem); /* 22 → 24px */
  --body-lg:     1.125rem;  /* 18px */
  --body-md:     1rem;      /* 16px */
  --label-md:    0.875rem;  /* 14px */
  --code-sm:     0.8125rem; /* 13px */

  --tracking-wide: 0.02em;
  --tracking-widest: 0.14em;

  /* ---- Espaçamento (base 4px) ---- */
  --unit:            4px;
  --gutter:          24px;
  --margin-desktop:  64px;
  --margin-mobile:   20px;
  --container-max:   1200px;
  --measure:         68ch;   /* largura de leitura confortável */

  /* ---- Forma (cantos "técnicos", pouco arredondados) ---- */
  --radius-sm:  0.125rem;  /* 2px */
  --radius:     0.25rem;   /* 4px — padrão de botões/cards */
  --radius-lg:  0.5rem;
  --radius-full: 9999px;

  /* ---- Movimento ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  0.2s;
}