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

: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;

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

  --color-primary: #911913;
  --color-primary-hover: #821611;
  --color-on-primary: #F4E1CB;
  --color-secondary: #ED6965;

  --color-heading: #911913;
  --color-text: #911913;
  --color-text-muted: #ED6965;

  --color-bg: #FFFFFF;
  --color-surface: #F4E1CB;
  --color-dark: #911913;
  --color-on-dark: #F4E1CB;
  --color-border: #F4E1CB;

  --color-accent: #ED6965;
  --color-green: #6BB52D;
  --color-blue: #29479D;
  --color-white: #FFFFFF;

  --color-accent-texto: #B63934;
  --color-green-fundo: #4D8220;
  --color-primary-escuro: #4F0C09;

  --font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-heading: 800;
  --fw-body: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --fs-titulo: 24px;
  --fs-titulo-xl: 24px;
  --fs-card-titulo: 22px;
  --fs-destaque: 24px;
  --fs-texto: 18px;
  --fs-texto-lg: 20px;
  --fs-lista-hero: 16px;
  --fs-cta-texto: 20px;
  --fs-btn-destaque: 16px;
  --fs-cidade: 16px;
  --lh-titulo: 1.5;
  --lh-hero-titulo: 1.3;
  --lh-texto: 1.5;
  --space-paragrafo: 0.9rem;
  --space-nome: 15px;
  --space-lg: 40px;

  --radius-card-lg: 30px;
  --radius-video: 40px;
  --radius-pill: 40px;
  --radius-foto-perfil: 300px 150px 150px 150px;

  --logo-hero-w: 250px;
  --logo-footer-w: 215px;
  --decor-linha-w: 200px;
  --decor-linha-h: 10px;
  --play-size: 100px;
  --sombra-play: drop-shadow(1px 0 6px rgb(0 0 0 / 0.3));
}

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

    --fs-titulo: 28px;
    --fs-titulo-xl: 28px;
    --fs-lista-hero: 18px;
    --fs-btn-destaque: 18px;
  }
}

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

    --fs-titulo: 32px;
    --fs-titulo-xl: 40px;
    --fs-cta-texto: 24px;
    --fs-btn-destaque: 20px;
    --radius-card-lg: 45px;
    --logo-hero-w: 400px;
  }
}