/* ============================================================
   BOHER CAFÉS — Variáveis de identidade visual
   ------------------------------------------------------------
   Este arquivo guarda TODAS as cores, fontes e medidas do site.
   As páginas nunca escrevem uma cor "solta" (ex.: #3A2620);
   elas usam o nome da variável (ex.: var(--cor-texto)).
   Assim, para mudar uma cor no site inteiro, basta mudar UMA linha aqui.

   Documentação completa: docs/identidade-visual.md
   ============================================================ */

/* As fontes vêm do Google Fonts (gratuitas).
   Fraunces = títulos | Jost = textos | Allura = detalhes à mão */
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Jost:wght@400;500;600&display=swap');

/* ":root" é o "topo" da página: o que é definido aqui vale para o site todo */
:root {
  /* ---------- Cores base (inspiradas no cartão de agradecimento) ---------- */
  --cor-fundo: #F6F0E8;          /* bege-creme: fundo principal do site */
  --cor-fundo-areia: #EADFD1;    /* areia: faixas e blocos de destaque */
  --cor-superficie: #FFFDF9;     /* quase branco: cards de produto */
  --cor-borda: #DCCFBF;          /* linhas e bordas suaves */

  /* ---------- Textos ---------- */
  --cor-texto: #3A2620;          /* café escuro: texto principal (contraste 12:1 no fundo) */
  --cor-texto-suave: #6B5146;    /* textos secundários (contraste 6,3:1) */
  --cor-texto-invertido: #FFFDF9; /* texto sobre fundos escuros */

  /* ---------- Marca e destaques ---------- */
  --cor-marrom: #5C3A2E;         /* botão principal, rodapé */
  --cor-marrom-escuro: #432920;  /* botão principal ao passar o mouse */
  --cor-caramelo: #A0674A;       /* acento terroso ("pela sua compra"): só em títulos grandes e enfeites */
  --cor-caramelo-texto: #8A5538; /* versão do caramelo segura para texto pequeno e links (contraste 5,3:1) */
  --cor-dourado: #B8913A;        /* do rótulo do microlote: selo de pontuação, detalhes "premium" */
  --cor-verde: #3E5A44;          /* folhas do microlote: "disponível", mensagens de sucesso */
  --cor-alerta: #A23B2A;         /* "esgotado", erros de formulário */

  /* ---------- Fontes ---------- */
  --fonte-titulo: 'Fraunces', Georgia, serif;          /* serifada elegante, como "Obrigada" */
  --fonte-corpo: 'Jost', 'Segoe UI', Arial, sans-serif; /* limpa, parecida com "CAFÉS ESPECIAIS" */
  --fonte-assinatura: 'Allura', cursive;               /* escrita à mão, como "Bom café!" (só enfeite) */

  /* Pesos (espessura da letra) */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-titulo: 700;

  /* ---------- Tamanhos de texto (pensados para o celular primeiro) ---------- */
  /* "rem" = múltiplo do tamanho padrão do navegador (1rem ≈ 16px) */
  --texto-pequeno: 0.875rem;  /* 14px: legendas, rodapé */
  --texto-base: 1rem;         /* 16px: textos normais */
  --texto-medio: 1.125rem;    /* 18px: introduções */
  --texto-h3: 1.25rem;        /* 20px */
  --texto-h2: 1.75rem;        /* 28px */
  --texto-h1: 2.25rem;        /* 36px */
  --texto-destaque: 3rem;     /* 48px: frase principal da home */

  --altura-linha: 1.6;        /* espaço entre linhas do texto corrido */
  --espaco-letras-caixa-alta: 0.18em; /* o espaçado elegante de "CAFÉS ESPECIAIS" */

  /* ---------- Espaçamentos (escala de 4 em 4px) ---------- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 16px;
  --esp-4: 24px;
  --esp-5: 40px;
  --esp-6: 64px;
  --esp-7: 96px;

  /* ---------- Bordas e sombras ---------- */
  --raio-pequeno: 6px;   /* campos de formulário, selos */
  --raio: 12px;          /* cards e blocos */
  --raio-botao: 999px;   /* botões em formato de pílula */
  --sombra-card: 0 2px 12px rgba(58, 38, 32, 0.08); /* sombra bem suave, em tom de café */

  /* ---------- Outras medidas ---------- */
  --largura-max: 1120px;   /* largura máxima do conteúdo em telas grandes */
  --altura-botao: 48px;    /* botões confortáveis para o dedo (mínimo é 44px) */
  --transicao: 0.2s ease;  /* velocidade das animações de hover */
}

/* Em telas maiores (tablet/computador), os títulos crescem um pouco */
@media (min-width: 768px) {
  :root {
    --texto-h1: 3rem;        /* 48px */
    --texto-h2: 2.25rem;     /* 36px */
    --texto-destaque: 4rem;  /* 64px */
  }
}