/* ============================================================
   tokens.css
   ----------------------------------------------------------------
   Arquivo responsável por centralizar os "tokens" de design:
   cores, tipografia, espaçamentos e sombras.
   Isso garante consistência visual em todo o tema.
   ============================================================ */

:root {
  /* -----------------------------
     Paleta principal (ID Visual)
     ----------------------------- */
  --cor-primaria: #3D726E;      /* Mar Turquesa */
  --cor-secundaria: #D4A840;    /* Sol do Nordeste */
  --cor-terra: #4D2B0B;         /* Terra do Mangue */
  --cor-destaque: #963F1A;      /* Vermelho Artesanal */
  --cor-escura: #284D55;        /* Azul Profundo */
  --cor-clara: #F9F5E8;         /* Areia Suave */

  /* -----------------------------
     Cores de apoio e neutros
     ----------------------------- */
  --cor-fundo: #f8f8f8;
  --cor-texto: #222222;
  --cor-texto-secundario: #555555;
  --cor-borda: #DDDDDD;

  /* -----------------------------
     Tipografia principal
     ----------------------------- */
  --font-titulo: 'Montserrat', sans-serif;
  --font-texto: 'Open Sans', sans-serif;

  /* -----------------------------
     Tamanhos de fonte (escala base)
     ----------------------------- */
  --fs-xs: 0.8rem;
  --fs-sm: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-xxl: 3rem;

  /* -----------------------------
     Espaçamentos (escala modular)
     ----------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;

  /* -----------------------------
     Sombras e elevações
     ----------------------------- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-elevada: 0 4px 12px rgba(0, 0, 0, 0.2);
}