/*
  tokens.css — variáveis de design.
  Paleta e tipografia extraídas da identidade visual da Verônica
  (arte em tons de areia/nude/madeira clara, script + sans geométrica).
*/

:root {
  /* ---- Cor ---- */
  --areia: #f7f2ec;
  --creme: #fffdfa;
  --nude: #e4d5c7;
  --nude-forte: #d3bda9;
  --moca: #a8836a;
  --moca-claro: #c29d84;
  --cacau: #6b4f3c;
  --tinta: #2f2723;
  --tinta-suave: #6e625b;
  --tinta-fraca: #9a8f88;
  --salvia: #8c9a87;
  --branco: #ffffff;
  --whatsapp: #3fa96e;

  --cor-fundo: var(--areia);
  --cor-superficie: var(--creme);
  --cor-borda: var(--nude);
  --cor-texto: var(--tinta);
  --cor-texto-suave: var(--tinta-suave);
  --cor-marca: var(--moca);
  --cor-marca-hover: var(--cacau);

  /* ---- Tipografia ---- */
  --fonte-titulo: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --fonte-corpo: "Jost", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  --tamanho-xs: clamp(0.8rem, 0.77rem + 0.15vw, 0.875rem);
  --tamanho-sm: clamp(0.9rem, 0.87rem + 0.15vw, 1rem);
  --tamanho-base: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  --tamanho-md: clamp(1.15rem, 1.1rem + 0.3vw, 1.35rem);
  --tamanho-lg: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --tamanho-xl: clamp(2.1rem, 1.7rem + 1.8vw, 3.2rem);
  --tamanho-xxl: clamp(2.6rem, 2rem + 2.8vw, 4.4rem);

  --altura-linha-titulo: 1.12;
  --altura-linha-corpo: 1.7;

  /* ---- Espaçamento ---- */
  --espaco-xs: 0.5rem;
  --espaco-sm: 1rem;
  --espaco-md: 1.75rem;
  --espaco-lg: 3rem;
  --espaco-xl: 5rem;
  --espaco-secao: clamp(4.5rem, 3.5rem + 4vw, 8rem);

  --largura-maxima: 1200px;
  --largura-leitura: 62ch;

  /* ---- Forma ---- */
  --raio-sm: 10px;
  --raio-md: 18px;
  --raio-lg: 28px;
  --raio-pilula: 999px;

  /* ---- Sombra ---- */
  --sombra-sm: 0 8px 24px rgba(107, 79, 60, 0.08);
  --sombra-md: 0 24px 60px rgba(107, 79, 60, 0.1);
  --sombra-foco: 0 0 0 3px rgba(168, 131, 106, 0.35);

  /* ---- Movimento ---- */
  --facil: cubic-bezier(0.22, 1, 0.36, 1);
  --duracao-rapida: 200ms;
  --duracao-media: 450ms;
  --duracao-lenta: 700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracao-rapida: 0ms;
    --duracao-media: 0ms;
    --duracao-lenta: 0ms;
  }
}