/* =========================================================
   TOKENS — Certa LP
   Camada Certa: padrão da agência (v1.0). Não alterar no projeto.
   Para mudar um valor em uma seção, sobrescreva no escopo dela:
   .hero { --section-py: 0; }
   Camada do cliente: preenchida na Etapa 2 a partir do briefing.
   ========================================================= */

:root {
  /* ===== CERTA · padrão da agência (v1.0) ===== */

  /* Grid */
  --container-width: 92%;
  --container-max: 1200px;
  --container-narrow: 800px;

  /* Espaçamento vertical das dobras (mobile e tablet) */
  --section-py: 50px;

  /* Espaçamento entre elementos */
  --space-xs: 10px;   /* interno de box */
  --space-sm: 20px;   /* entre boxes, padding de card */
  --space-md: 30px;   /* entre título, texto e botão */
  --stack-gap: var(--space-md);

  /* Tipografia (provisório) — mobile */
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  /* Botões (pendente — valores provisórios) */
  --btn-radius: 8px;
  --btn-py: 14px;
  --btn-px: 28px;
  --btn-fs: 16px;
  --btn-fw: 600;

  /* Raios (pendente — valores provisórios) */
  --radius-card: 12px;
  --radius-img: 12px;

  /* Header */
  --header-py: 16px;
  --logo-h: 44px;

  /* WhatsApp flutuante */
  --whatsapp-float-size: 56px;
  --whatsapp-float-offset: 20px;
  --color-whatsapp: #25D366;

  /* Movimento */
  --transition: 0.2s ease;

  /* ===== CLIENTE · preenchido por projeto ===== */

  --color-primary: #0C3517;        /* verde-floresta do logo */
  --color-primary-hover: #08260F;
  --color-on-primary: #FFFFFF;
  --color-secondary: #476A2B;      /* verde-folha do logo */

  --color-heading: #0C3517;
  --color-text: #33382F;
  --color-text-muted: #636A5C;

  --color-bg: #FFFFFF;
  --color-surface: #F4F0E6;        /* tom de madeira clara */
  --color-dark: #0A2912;
  --color-on-dark: #F4F0E6;
  --color-border: #DDD8CB;

  /* Botões de WhatsApp no verde do WhatsApp, com texto branco (decisão do usuário,
     ciente de que branco sobre este verde não passa no contraste AA). */
  --color-whatsapp-hover: #1EBE5A;
  --color-on-whatsapp: #FFFFFF;

  /* Footer: padding superior e inferior iguais */
  --footer-py: 40px;

  /* Processo: espaço entre as colunas de fotos (valor fora da escala Certa, em teste) */
  --processo-col-gap: 15px;

  /* CTA final: largura máxima do texto secundário */
  --cta-final-lead-max: 500px;

  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-heading: 700;
}

/* ===== Tablet ===== */
@media (min-width: 768px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 30px;
    --fs-h3: 22px;
  }
}

/* ===== Desktop ===== */
@media (min-width: 1024px) {
  :root {
    --section-py: 60px;
    --fs-h1: 48px;
    --fs-h2: 36px;
    --fs-h3: 24px;
    --fs-body: 18px;
  }
}