/*
 * Design tokens do site, extraídos do kit global do Elementor (elementor-kit-8) do site original.
 *
 * Breakpoints do original (CSS não aceita variáveis em media queries; use os valores literais):
 *   mobile        até 767px      @media (max-width: 767px)    / mobile-first: (min-width: 768px)
 *   tablet        até 1024px     @media (max-width: 1024px)   / (min-width: 1025px)
 *   tablet-extra  até 1366px     @media (max-width: 1366px)   / (min-width: 1367px)
 *   laptop        até 1440px     @media (max-width: 1440px)   / (min-width: 1441px)
 */

/* Ordem das camadas: arquivos posteriores entram na camada certa e a precedência fica previsível. */
@layer reset, base, layout, components, pages, utilities;

:root {
  /* Cores do kit */
  --cor-primaria: #1b3760;      /* azul Usebens: títulos, hover de botões */
  --cor-secundaria: #31b6a5;    /* verde-água: destaques, links, botões */
  --cor-texto: #484b4d;
  --cor-fundo-claro: #f5f9ff;
  --cor-branco: #ffffff;
  --cor-escura: #0d1c33;        /* fundos escuros (rodapé, faixas) */

  /* Cores auxiliares usadas no original (filtro de produtos, bordas) */
  --cor-fundo-cinza: #f5f8fc;
  --cor-borda: #d7e1ed;
  --cor-texto-suave: #64748b;

  /* Tipografia */
  --fonte-titulo: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-texto: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --peso-regular: 400;
  --peso-medio: 500;
  --peso-negrito: 700;

  --texto-base: 1rem;           /* 16px */
  --texto-base-lh: 1.25rem;     /* 20px */
  --texto-sm: 0.875rem;         /* 14px */
  --texto-lg: 1.125rem;         /* 18px */

  /* Escala de títulos (desktop); a versão mobile é redefinida abaixo */
  --h1: 3.4375rem;   --h1-lh: 3.75rem;   /* 55/60 */
  --h2: 2.75rem;     --h2-lh: 3.125rem;  /* 44/50 */
  --h3: 2.125rem;    --h3-lh: 2.5rem;    /* 34/40 */
  --h4: 1.75rem;     --h4-lh: 2.125rem;  /* 28/34 */
  --h5: 1.375rem;    --h5-lh: 1.75rem;   /* 22/28 */
  --h6: 1.25rem;     --h6-lh: 1.625rem;  /* 20/26 */

  /* Botões */
  --botao-fonte: 1.125rem;      /* 18px */
  --botao-lh: 1.5rem;           /* 24px */
  --botao-padding: 0.75rem 1.5rem; /* 12/24, padrão do Elementor; 16/24 no mobile */

  /* Raios */
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-pill: 50px;

  /* Espaçamentos */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 5rem;
  --esp-secao: 5rem;            /* espaço vertical entre seções */

  /* Container: 1280px de conteúdo + 20px de padding lateral de cada lado (como no original) */
  --container-max: 1280px;
  --container-padding: 20px;

  /* Sombras e transições */
  --sombra-card: 0 8px 24px rgb(13 28 51 / 8%);
  --transicao: 200ms ease;

  /* Altura do header fixo, usada em scroll-margin para âncoras */
  --header-altura: 88px;
}

@media (max-width: 767px) {
  :root {
    --h1: 2.625rem;  --h1-lh: 3rem;     /* 42/48 */
    --h2: 2.375rem;  --h2-lh: 2.75rem;  /* 38/44 */
    --h3: 2rem;      --h3-lh: 2.375rem; /* 32/38 */
    --h4: 1.625rem;  --h4-lh: 2rem;     /* 26/32 */

    --botao-fonte: 1.25rem;     /* 20px */
    --botao-lh: 1.625rem;       /* 26px */
    --botao-padding: 1rem 1.5rem;

    --esp-secao: 3rem;
    --header-altura: 72px;
  }
}