/* ==========================================================================
   ÉDMAIS — Design Tokens  v1.0 (aprovado pelo Marketing) — 2026-11
   Fonte: CLAUDE-N-MEXER/Identidade Visual
   - Cores oficiais: arquivos "Paleta de Cores" (COR-AZUL, COR-VERMELHA, COR-BRANCA)
   - Fonte oficial: Montserrat (pasta Fontes/Padrão-Montserrat)
   Tudo marcado como [DERIVADO] foi calculado a partir das cores oficiais
   (mistura com preto/branco) para estados de interface e acessibilidade.
   Uso aprovado só no digital (sites, formulários e sistemas).

   COMO ALTERAR: mude o valor aqui e tudo o que usa o token se atualiza
   (guia, componentes, landing pages). Não escreva cores soltas nos arquivos.
   ========================================================================== */

/* ---------- Fontes (cópias locais da pasta oficial) ----------
   Manual de Marca: só Regular, Bold, Black e Black Itálico (Black sempre em CAIXA ALTA). */
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/Montserrat-Regular.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/Montserrat-Bold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 900; font-style: normal; font-display: swap; src: url("../assets/fonts/Montserrat-Black.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 900; font-style: italic; font-display: swap; src: url("../assets/fonts/Montserrat-BlackItalic.ttf") format("truetype"); }

:root {
  /* ---------- Cores oficiais ---------- */
  --ed-azul:      #113378;  /* RGB 17, 51, 120  — cor institucional, fundos, textos */
  --ed-vermelho:  #FA161C;  /* RGB 250, 22, 28 — ofertas, preço, CTA, destaque     */
  --ed-branco:    #FFFFFF;  /* RGB 255, 255, 255 — fundos, texto sobre cor         */
  /* Impressão: azul Pantone 99-16 C (C98 M93 Y11 K0) · vermelho Pantone 48-8 C (C5 M98 Y96 K0)
     · branco Pantone White. Fonte: Manual de Marca + sacola SACOLA01 aprovada (acabamento fosco). */

  /* ---------- Neutros presentes nos materiais oficiais ---------- */
  --ed-preto:       #1A1919; /* versão monocromática preta do logo */
  --ed-cinza-claro: #F8F8F8; /* fundo das lâminas "Uso da marca"  */
  --ed-cinza:       #E2E2E1; /* fundo do post "Política de troca" */

  /* ---------- [DERIVADO] estados e apoio de interface ---------- */
  --ed-azul-escuro:     #0C2454; /* hover/pressionado do azul (azul + 30% preto)      */
  --ed-azul-80:         #415C93; /* texto secundário (6.6:1 sobre branco)             */
  --ed-azul-60:         #7085AE; /* placeholder, ícones inativos (não usar p/ texto) */
  --ed-azul-25:         #C4CCDD; /* bordas de campos e divisórias                     */
  --ed-azul-12:         #E2E7EF; /* fundo de chips/tags neutros                       */
  --ed-azul-06:         #F1F3F7; /* fundo de seções alternadas                        */
  --ed-vermelho-hover:  #DC1319; /* hover/pressionado do vermelho (vermelho + 12% preto) */
  --ed-vermelho-escuro: #C81216; /* texto de erro pequeno (5.9:1 sobre branco)        */
  --ed-vermelho-10:     #FEE8E8; /* fundo de alerta de erro                           */

  /* ---------- Papéis semânticos ---------- */
  --cor-fundo:            var(--ed-branco);
  --cor-fundo-alt:        var(--ed-cinza-claro);
  --cor-texto:            var(--ed-azul);
  --cor-texto-forte:      var(--ed-preto);
  --cor-texto-suave:      var(--ed-azul-80);
  --cor-texto-inverso:    var(--ed-branco);
  --cor-borda:            var(--ed-azul-25);
  --cor-oferta:           var(--ed-vermelho);
  --cor-cta:              var(--ed-vermelho);
  --cor-cta-hover:        var(--ed-vermelho-hover);
  --cor-institucional:    var(--ed-azul);
  --cor-erro:             var(--ed-vermelho-escuro);
  --cor-erro-fundo:       var(--ed-vermelho-10);
  --cor-foco:             var(--ed-azul);

  /* ---------- Tipografia ---------- */
  --fonte: "Montserrat", "Segoe UI", Arial, sans-serif;

  --peso-regular: 400;
  --peso-bold: 700;
  --peso-black: 900;
  /* apelidos mantidos por compatibilidade: o manual só permite 400, 700 e 900 */
  --peso-medio: 400;
  --peso-semibold: 700;
  --peso-extrabold: 900;

  /* Escala mobile-first (valores de celular; desktop ajustado em @media) */
  --fs-display: 2.5rem;    /* 40px — chamada principal de campanha */
  --fs-h1:      2rem;      /* 32px */
  --fs-h2:      1.5rem;    /* 24px */
  --fs-h3:      1.25rem;   /* 20px */
  --fs-lead:    1.125rem;  /* 18px — subtítulo / texto de apoio */
  --fs-body:    1rem;      /* 16px — corpo (mínimo para leitura) */
  --fs-small:   0.875rem;  /* 14px — rótulos, ajuda */
  --fs-legal:   0.75rem;   /* 12px — avisos legais (mínimo absoluto) */
  --fs-botao:   1.1875rem; /* 19px bold — garante contraste AA de texto grande sobre vermelho */

  --lh-tight: 1.1;
  --lh-title: 1.2;
  --lh-body: 1.5;

  /* ---------- Espaçamento (base 4px) ---------- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;   /* margem lateral mínima no celular */
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --esp-8: 64px;

  /* ---------- Raios (inspirados nos cantos arredondados do logo) ---------- */
  --raio-sm: 12px;
  --raio-md: 20px;
  --raio-lg: 28px;
  --raio-xl: 40px;
  --raio-pill: 999px;

  /* ---------- Sombras (suaves e difusas) ---------- */
  --sombra-1: 0 1px 2px rgba(17, 51, 120, .05), 0 4px 16px rgba(17, 51, 120, .06);
  --sombra-2: 0 2px 4px rgba(17, 51, 120, .05), 0 12px 32px rgba(17, 51, 120, .10);
  --sombra-3: 0 4px 8px rgba(12, 36, 84, .08), 0 28px 64px rgba(12, 36, 84, .18);

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---------- Layout ---------- */
  --largura-max: 1200px;
  --largura-texto: 680px;
  --alvo-toque: 52px; /* altura de botões e campos (mínimo 48px) */
}

@media (min-width: 768px) {
  :root {
    --fs-display: 3.5rem;  /* 56px */
    --fs-h1: 2.5rem;       /* 40px */
    --fs-h2: 2rem;         /* 32px */
    --fs-h3: 1.5rem;       /* 24px */
  }
}