/* =========================================================
   TOKENS — variáveis de design do site
   Cores, fontes, tamanhos, espaçamentos e raios usados em todo o CSS.
   ========================================================= */

/* ===== Fontes ===== */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/open-sans.woff2") format("woff2");
}

:root {
  /* ===== Base: grid, espaçamentos e tipografia ===== */

  /* 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 — 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 */
  --btn-radius: 8px;
  --btn-py: 14px;
  --btn-px: 28px;
  --btn-fs: 16px;
  --btn-fw: 600;

  /* Raios */
  --radius-card: 12px;
  --radius-img: 12px;

  /* Header (faixa da política e da 404) e logo */
  --header-py: var(--space-md);
  --logo-h: 44px;

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

  /* WhatsApp: botão flutuante e botões de WhatsApp (.btn--whatsapp) */
  --whatsapp-float-size: 56px;
  --whatsapp-float-offset: 20px;
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1EBE5A;
  --color-on-whatsapp: #FFFFFF;

  /* Movimento */
  --transition: 0.2s ease;
  --accordion-duration: 200ms;

  /* Avaliações do Google (variante depoimentos-google) */
  --review-card-bg: #FFFFFF;
  --review-text: #000000;
  --review-muted: #6F6F6F;
  --review-verified: #4285F4;
  --review-resumo-w: 240px;
  --review-avatar: 40px;
  --review-google: 20px;
  --review-star: 17px;
  --review-star-lg: 30px;
  --review-logo-w: 110px;
  --review-fs: 15px;
  --review-fs-sm: 13px;
  --review-fs-resumo: 14px;
  --review-fs-nota: 20px;
  --review-lines: 6;

  /* ===== Identidade: cores e fontes ===== */

  --color-primary: #B80F15;
  --color-primary-hover: #890B10;
  --color-on-primary: #FFFFFF;
  --color-secondary: #F9D440;
  --color-secondary-hover: #F7C90F;

  --color-heading: #B80F15;
  --color-text: #585757;
  --color-text-muted: #7A7A7A;

  --color-bg: #FFFFFF;
  --color-surface: #F5F5F5;
  --color-dark: #B80F15;
  --color-on-dark: #FFFFFF;
  --color-border: #E2E2E2;

  --font-heading: "Open Sans", 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;

  --container-max-pagina: 1140px;
  --container-width-pagina: calc(100% - 40px);
  --col-gap: 20px;
  --space-lg: 40px;
  --space-xl: 60px;
  --lista-gap-padrao: 15px;
  --sobre-media-pt: 50px;
  --hero-titulo-max: 650px;

  --fs-titulo-hero: 28px;
  --fs-titulo-secao: 32px;
  --fs-lead: 18px;
  --fs-texto: 16px;
  --fs-lista: 18px;
  --fs-contato: 16px;
  --fs-assinatura: 20px;
  --lh-titulo: 1.1;
  --lh-texto: 1.5;

  --btn-radius-pagina: 10px;
  --btn-py-pagina: 16px;
  --btn-px-pagina: 38px;
  --btn-fs-pagina: 18px;
  --btn-fw-pagina: 700;

  --radius-img-pagina: 10px;
  --icone-lista: 20px;
  --divisor-w: 100px;
  --divisor-h: 5px;

  --hero-logo-w: 150px;

  --fs-politica-h2: 20px;
  --fs-politica-h3: 18px;
  --politica-titulo-mb: 15px;
}

/* ===== Identidade — tablet ===== */
@media (min-width: 768px) {
  :root {
    --fs-titulo-hero: 32px;
    --fs-contato: 20px;
    --hero-logo-w: 180px;
  }
}

/* ===== Identidade — desktop ===== */
@media (min-width: 1024px) {
  :root {
    --fs-titulo-hero: 40px;
    --fs-titulo-secao: 40px;
    --fs-lead: 20px;
    --fs-assinatura: 24px;
  }
}

/* ===== 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;
  }
}