/* Design System — tokens.
   Bloco "MARCA" muda por cliente. Todo o resto é fixo no modelo.
   Componentes usam só estas variáveis, nunca valores soltos. */

:root {
  /* ===== MARCA (personalizável por cliente) ===== */
  /* Viva Lis: paleta do site (#987064, #FAC584, #FEEDDE). Os marrons mais fechados mantêm o contraste. */
  --cor-marca-escura: #5C4239;      /* fundos escuros: headline, condições, rodapé, resumo */
  --cor-marca-superficie: #6B4E45;  /* superfícies sobre o escuro */
  --cor-marca: #FAC584;             /* pêssego do logo: ação principal e fios */
  --cor-marca-clara: #FEEDDE;       /* creme: destaque sobre o escuro */
  --cor-marca-texto: #7A5548;       /* marrom legível sobre branco e creme */
  --cor-marca-site: #987064;        /* marrom do site, para títulos grandes */
  --fonte-titulo: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-texto: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-titulo: 300;
  --espaco-letra-titulo: -.02em;

  /* Cabeçalho claro, como no site */
  --cor-cabecalho-fundo: #FEEDDE;
  --cor-cabecalho-texto: #7A5548;
  --cor-cabecalho-fio: #EAD3C0;

  /* ===== NEUTROS ===== */
  --cor-fundo: #FFFFFF;
  --cor-fundo-suave: #FEF6EF;
  --cor-linha: #EAD9CB;
  --cor-texto: #3A2A25;
  --cor-texto-suave: #6E5A52;
  --cor-texto-invertido: #FEEDDE;
  --cor-texto-invertido-suave: #E3CFC2;
  --cor-texto-invertido-fraco: #C9B1A3;
  --cor-fio-escuro: rgba(250, 197, 132, .32);
  --cor-veu: rgba(58, 42, 37, .62);

  /* ===== AÇÃO (fixos; derivam da marca) ===== */
  --cor-acao: var(--cor-marca);
  --cor-acao-texto: var(--cor-marca-escura);
  --cor-acao-hover: var(--cor-marca-clara);

  /* WhatsApp: verde WhatsApp um pouco mais fechado, para o texto branco ficar legível */
  --cor-whatsapp: #1DA851;
  --cor-whatsapp-hover: #18934A;
  --cor-whatsapp-texto: #FFFFFF;

  /* Desconto (sem uso na Viva Lis) e lucro */
  --cor-desconto: #C8261D;
  --cor-desconto-clara: #FF6F61;
  --cor-lucro: #1E7A46;             /* lucro sobre branco */
  --cor-lucro-clara: #8FE0AE;       /* lucro sobre o marrom escuro */

  /* ===== TIPOGRAFIA ===== */
  --texto-xs: .8125rem;   /* 13px */
  --texto-sm: .9375rem;   /* 15px */
  --texto-md: 1.0625rem;  /* 17px */
  --texto-lg: 1.375rem;   /* 22px */
  --texto-xl: clamp(1.75rem, 5.5vw, 2.375rem);
  --texto-2xl: clamp(2rem, 6.5vw, 3.75rem);
  --altura-linha: 1.55;
  --altura-titulo: 1.08;

  /* ===== ESPAÇOS (escala de 4px) ===== */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;
  --esp-9: 96px;
  --margem-lateral: 20px;
  --largura-conteudo: 1160px;
  --largura-texto: 62ch;

  /* ===== FORMA ===== */
  --raio-etiqueta: 2px;
  --raio-botao: 4px;
  --raio-card: 6px;
  --sombra-flutuante: 0 12px 32px rgba(58, 42, 37, .18);
  --sombra-barra: 0 -6px 24px rgba(58, 42, 37, .22);
  --toque-minimo: 48px;

  /* ===== CAMADAS E ALTURAS ===== */
  --altura-barra-topo: 44px;
  --altura-cabecalho: 64px;
  --camada-cabecalho: 50;
  --camada-resumo-fixo: 40;
  --camada-flutuante: 45;
  --camada-popup: 100;
  --camada-visualizador: 110;
  --transicao: 180ms ease;
}

@media (min-width: 1024px) {
  :root {
    --margem-lateral: 48px;
    --altura-cabecalho: 76px;
  }
}