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

/* ===== Fontes ===== */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat.woff2") format("woff2");
}

@font-face {
  font-family: "Avalon";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/avalon-400.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: 16px;
  --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: #27385A;
  --color-primary-hover: #182236;
  --color-on-primary: #FFFFFF;
  --color-secondary: #78BAB9;
  --color-secondary-strong: #56A9A8;

  --color-heading: #27385A;
  --color-text: #27385A;
  --color-text-muted: #5A6680;

  --color-bg: #FFFFFF;
  --color-surface: #E1E1E2;
  --color-dark: #27385A;
  --color-on-dark: #FFFFFF;
  --color-border: #E1E1E2;

  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-title: "Avalon", "Montserrat", system-ui, sans-serif;
  --fw-heading: 700;
  --fw-hero-title: 800;
  --fw-title: 400;
  --title-underline-h: 5px;

  --space-lg: 40px;
  --space-xl: 60px;
  --fs-caption: 16px;
  --fs-hero-item: 20px;
  --fs-lead: 20px;
  --fw-medium: 500;

  --radius-blob: 300px 150px 150px 150px;
  --radius-produto: 10px;
  --overlay-cta: color-mix(in srgb, var(--color-primary) 80%, transparent);
}

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