/* ============================================
   OFERTAS TRENDY — Design Tokens (Autumn Warm)
   Preto-azulado + Vinho + Âmbar + Pêssego + Off-white
   Paleta sofisticada, terrena e moderna
   ============================================ */

:root {
  /* ---------- Cores de marca ---------- */
  --cor-primaria: #86373E;          /* vinho profundo (CTAs, links) */
  --cor-primaria-hover: #6B2A30;
  --cor-primaria-suave: #F5E1E3;

  --cor-secundaria: #F1BD78;        /* âmbar dourado (acento principal) */
  --cor-secundaria-hover: #E8A95A;
  --cor-secundaria-suave: #FAEBD2;

  --cor-acento: #44332D;             /* marrom escuro — uso pontual */
  --cor-acento-suave: #EFD9C7;

  --cor-sucesso: #5C6B3E;            /* verde-oliva harmonizado */
  --cor-erro: #86373E;

  /* ---------- Neutros quentes ---------- */
  --cor-dark: #17222B;              /* preto-azulado profundo */
  --cor-dark-elevado: #1F2D38;
  --cor-titulo: #17222B;
  --cor-corpo: #44332D;             /* marrom escuro como corpo */
  --cor-corpo-suave: #6B5A52;
  --cor-texto-claro: #FBF8F0;
  --cor-borda: #E5DBC8;             /* borda creme */
  --cor-borda-suave: #F0E5D2;
  --cor-fundo: #FBF8F0;             /* off-white quente (principal) */
  --cor-fundo-alt: #F5EDDF;
  --cor-fundo-suave: #EFD9C7;       /* pêssego suave (blocos) */

  /* ---------- Gradientes (uso pontual) ---------- */
  --gradiente-marca: linear-gradient(135deg, #86373E 0%, #6B2A30 100%);
  --gradiente-suave: linear-gradient(180deg, #FBF8F0 0%, #F5EDDF 100%);
  --gradiente-hero: linear-gradient(135deg, #FBF8F0 0%, #EFD9C7 70%, #F1BD78 100%);

  /* ---------- Tipografia ---------- */
  --fonte-display: 'Fraunces', 'Space Grotesk', system-ui, serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --tamanho-corpo: 16px;
  --tamanho-pequeno: 13px;
  --tamanho-h1: clamp(28px, 4vw, 42px);
  --tamanho-h2: clamp(22px, 2.8vw, 30px);
  --tamanho-h3: clamp(18px, 2vw, 22px);

  --lh-corpo: 1.65;
  --lh-titulo: 1.2;

  /* ---------- Layout ---------- */
  --largura-max: 1200px;
  --largura-leitura: 680px;
  --padding-container: 5%;

  --gap-pequeno: 8px;
  --gap-medio: 16px;
  --gap-grande: 32px;
  --gap-secao: 56px;

  --radius-pequeno: 6px;
  --radius-medio: 12px;
  --radius-grande: 16px;
  --radius-redondo: 999px;

  /* ---------- Sombras sutis ---------- */
  --sombra-pequena: 0 1px 2px rgba(23, 34, 43, 0.04);
  --sombra-media: 0 2px 8px rgba(23, 34, 43, 0.06);
  --sombra-grande: 0 8px 24px rgba(23, 34, 43, 0.08);
  --sombra-vinho: 0 4px 16px rgba(134, 55, 62, 0.18);
  --sombra-header: 0 1px 0 rgba(23, 34, 43, 0.05);

  --transicao: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-lenta: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1024px) {
  :root {
    --padding-container: 20px;
    --gap-secao: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --tamanho-corpo: 15px;
    --gap-secao: 32px;
  }
}