/* ============================================
   AMIGO DE PATA — Design tokens
   Paleta, tipografia e medidas do manual de identidade visual (v1.0)
   ============================================ */

:root {
  /* ---------- Cores da marca ---------- */
  --turquesa: #00BFA6;      /* cor da marca, cabeçalhos, áreas de destaque. Nunca texto sobre fundo claro */
  --azul-noite: #13213C;    /* textos e contornos */
  --agua-de-coco: #F3FBEF;  /* fundos */
  --manga: #FF9F1C;         /* botões e CTAs, sempre com texto azul-noite */
  --verde-limao: #6FD12E;   /* selos de curiosidade e dicas */
  --magenta: #E5197E;       /* exclusivo de ofertas e preços. Branco por cima só em bold a partir de 19px */
  --branco: #FFFFFF;

  --cor-texto: var(--azul-noite);
  --cor-texto-suave: rgba(19, 33, 60, 0.78);
  --cor-fundo: var(--agua-de-coco);

  /* ---------- Tipografia ---------- */
  --fonte-marca: 'Chewy', 'Lilita One', system-ui, sans-serif;     /* nome da marca e chamadas curtas */
  --fonte-titulo: 'Lilita One', 'Nunito', system-ui, sans-serif;   /* títulos */
  --fonte-texto: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --tamanho-h1: clamp(30px, 6vw, 40px);
  --tamanho-h2: clamp(25px, 4.5vw, 30px);
  --tamanho-h3: clamp(20px, 3.5vw, 22px);
  --tamanho-corpo: 17px;
  --tamanho-botao: 15px;
  --tamanho-selo: 13px;

  --lh-h1: 1.1;
  --lh-h2: 1.2;
  --lh-h3: 1.27;
  --lh-corpo: 1.59;   /* 17 / 27 */

  /* ---------- Layout ---------- */
  --largura-max: 1200px;
  --largura-leitura: 760px;
  --padding-container: 20px;
  --gap-medio: 16px;
  --gap-grande: 28px;
  --gap-secao: 48px;

  /* ---------- Estilo "adesivo" ---------- */
  --borda: 3px solid var(--azul-noite);
  --raio: 18px;
  --raio-pequeno: 12px;
  --raio-redondo: 999px;
  --sombra: 5px 5px 0 var(--azul-noite);
  --sombra-pequena: 3px 3px 0 var(--azul-noite);
  --sombra-manga: 6px 6px 0 var(--manga);

  --transicao: 150ms ease;
}

@media (min-width: 768px) {
  :root {
    --padding-container: 32px;
    --gap-secao: 64px;
  }
}