/* ==========================================================================
   Smart Pages: tokens (v2.2, 20/10/2026; ADR 0051, design-system-audit.md seção 17)
   Identidade EcomSmart v4 (marca/identidade/marcas/ecomsmart/tokens.css: azul #0A5BF0, navy #0B1033,
   Figtree) aplicada como no tema do ecomsmart.com.br desde a v4: só tema claro no site, painéis pastel
   (azul, creme, rosa, menta), rótulo com fio curto, cards sem sombra pesada. Nomes: contrato --es-* da
   wp-plataforma (es-ui) e as escalas do tema; nenhuma cor solta fora deste arquivo.
   Contraste WCAG AA conferido par a par (tabela da seção 17). Escuro: só na área logada (azul-noite).
   Breakpoints (não cabem em variáveis): 560, 768, 1024, 1280, 1600 px.
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("/static/fontes/figtree-latin.woff2") format("woff2"); /* OFL 1.1: OFL.txt na mesma pasta */
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* Superfícies: branco e Papel dominam (até 10% da área em azul) */
  --es-pagina: #FFFFFF;          /* página do site */
  --es-fundo: #FFFFFF;           /* campos, cartões, formulário, topo */
  --es-fundo-2: #F6F8FC;         /* Papel: seção alternada, bloco do rodapé */
  --es-branco-fixo: #FFFFFF;
  --es-superficie: #F6F8FC;      /* Papel: seção clara, cartão suave */
  --es-superficie-2: #EEF1F7;    /* hover, trilhos, célula vazia */
  --es-escuro: #0B1033;          /* Navy: só peça pequena (aviso flutuante, dica, moldura do celular) */

  /* Texto */
  --es-texto: #0B1033;           /* Navy (--tinta) */
  --es-texto-2: #4A5670;         /* Grafite (--texto) */
  --es-texto-3: #5B6780;         /* Névoa: legenda; o #6B7790 da identidade dá 4,23:1 no Papel */

  /* Linhas */
  --es-linha: #E1E6F0;           /* Linha (--borda): só decorativa */
  --es-linha-media: #C9D1DF;     /* contorno de botão secundário e chip (o texto identifica o controle) */
  --es-linha-forte: #6B7790;     /* borda de campo: 3:1 ou mais em branco, Papel, cinza e Céu */

  /* Marca */
  --es-primaria: #0A5BF0;        /* Azul EcomSmart: botão, ícone, número, uma palavra */
  --es-primaria-hover: #0849C4;
  --es-primaria-texto: #FFFFFF;
  --es-destaque: #0849C4;        /* Azul profundo: link e texto azul pequeno */
  --es-destaque-hover: #073A9A;
  --es-suave: #EEF4FF;           /* Céu: item ativo, pílula, painel de destaque */
  --es-suave-2: #D3E2FF;         /* Céu médio: chip selecionado, marca-texto */
  --es-primaria-linha: #DCE7FF;  /* halo do campo em foco, borda do painel aberto */
  --es-dado: #0A5BF0;            /* número protagonista ("O dado") */
  --es-dado-2: #9DBEFF;          /* Azul dado: barra e linha de gráfico, nunca texto */
  --es-foco: #0A5BF0;            /* contorno de 2 px com recuo de 3 px */

  /* Painéis pastel (.recurso .azul/.creme/.rosa/.menta): fundo, cartão de trás, acento (texto branco no acento) */
  --pastel-azul: #EEF4FF;  --pastel-azul-p: #DCE7FF;  --pastel-azul-a: #0A5BF0;
  --pastel-creme: #FFF5E8; --pastel-creme-p: #FDE3C2; --pastel-creme-a: #B45309;
  --pastel-rosa: #FDEEF5;  --pastel-rosa-p: #F9D3E4;  --pastel-rosa-a: #BE185D;
  --pastel-menta: #E8F7F4; --pastel-menta-p: #C6ECE4; --pastel-menta-a: #0F766E;

  /* Estados (valores do Poste Aí, contraste corrigido) */
  --es-sucesso: #15803D;
  --es-sucesso-fundo: #E8F6EE;
  --es-aviso: #B45309;
  --es-aviso-fundo: #FEF6E7;
  --es-erro: #B91C1C;
  --es-erro-fundo: #FDECEA;

  /* WhatsApp: --es-wa-marca só como ponto de canal, nunca fundo de ícone branco (1,98:1) */
  --es-wa: #0C8340;
  --es-wa-marca: #25D366;

  /* Profundidade: cartão sem sombra; sombra leve só em menu aberto, formulário em destaque e mockup */
  --es-sombra: 0 24px 60px -32px rgba(11, 16, 51, .32), 0 1px 2px rgba(11, 16, 51, .06);
  --es-sombra-forte: 0 24px 48px -28px rgba(11, 16, 51, .45);
  --es-sombra-leve: 0 1px 2px rgba(11, 16, 51, .08);
  --es-veu: rgba(11, 16, 51, .5);
  --es-topo-vidro: rgba(255, 255, 255, .88);

  /* Tipografia: uma fonte só (regra do grupo); títulos finos da home v5 (500 a 600) */
  --es-fonte: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-rot: 14px;                /* rótulo de seção em caixa normal, com fio curto antes */
  --fs-peq: 14px;                /* mínimo para texto informativo (pílula, selo "Exemplo ilustrativo") */
  --fs-ui: 16px;
  --fs-corpo: 16px;
  --fs-lead: clamp(17px, 1.5vw, 19px);
  --fs-h3: clamp(18px, 1.6vw, 20px);
  --fs-xl: 19px;
  --fs-2xl: 22px;
  --fs-h2: clamp(26px, min(3.1vw, 5.8vh), 40px);
  --fs-h1: clamp(30px, min(4.2vw, 7vh), 48px);
  --fs-display: clamp(34px, min(4.6vw, 7.6vh), 58px);
  --fs-kpi: clamp(30px, min(3.8vw, 6.3vh), 44px);
  --peso-display: 500;
  --peso-titulo: 560;
  --peso-h3: 600;
  --peso-ui: 600;
  --lh-base: 1.5;
  --lh-longo: 1.7;
  --lh-titulo: 1.1;
  --ls-titulo: -0.03em;

  /* Espaço (múltiplos de 4) */
  --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;
  --sec: 64px;
  --gutter: 16px;
  --moldura: 8px;
  --container: 1296px;
  --topo-h: 68px;

  /* Raios (tema ecomsmart desde a v5: botão 10, item 12, cartão e painel 16, bloco 24, pastel 32) */
  --raio-sm: 8px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-xl: 24px;
  --raio-2xl: 32px;
  --raio-pilula: 999px;
  --raio-btn: 10px;
  --raio-foto: 16px;
  --es-raio: var(--raio-lg);     /* cartão: 16px, o mesmo do site (v2.2) */

  /* Alvos de toque */
  --alvo: 44px;
  --alvo-g: 48px;

  /* Movimento (es-ui), sem mola (regra anti-cara-de-IA); prefers-reduced-motion continua global */
  --es-dur-1: .16s;
  --es-dur-2: .32s;
  --es-dur-3: .7s;
  --es-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
  :root { --sec: clamp(72px, 13vh, 104px); --gutter: 32px; --moldura: 16px; --topo-h: 76px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  :root { --topo-h: 68px; }      /* notebook de tela baixa: topo mais fino */
}

/* Área logada (/clients e /admin), tema claro: página Papel, cartões brancos com a Linha */
[data-area="app"] {
  --es-pagina: #F6F8FC;
  --es-superficie: #FFFFFF;
  --es-raio: 16px;
}

/* Área logada, tema escuro: só aqui (marketing nunca escuro). Azul-noite do app EcomSmart, nunca roxo. */
[data-area="app"][data-tema="escuro"] {
  color-scheme: dark;

  --es-pagina: #0A0F1F;          /* azul-noite */
  --es-fundo: #101729;           /* campos e cartões */
  --es-fundo-2: #0D1325;
  --es-superficie: #101729;
  --es-superficie-2: #182238;
  --es-escuro: #070B1E;

  --es-texto: #EEF2FA;
  --es-texto-2: #C3CBDB;
  --es-texto-3: #A3ADC2;

  --es-linha: #24304A;           /* decorativa */
  --es-linha-media: #3A4762;
  --es-linha-forte: #7D8AA5;     /* 4,57:1 ou mais nos fundos escuros */

  --es-primaria: #8DB0FF;        /* o #0A5BF0 some no azul-noite; botão claro com texto navy */
  --es-primaria-hover: #B9CEFF;
  --es-primaria-texto: #0B1033;
  --es-destaque: #A9C4FF;
  --es-destaque-hover: #DCE7FF;
  --es-suave: #0F2655;           /* color-mix(#0A5BF0 22%, #101729) */
  --es-suave-2: #16336E;
  --es-primaria-linha: #22407F;
  --es-dado: #8DB0FF;
  --es-dado-2: #5A8CFA;
  --es-foco: #8DB0FF;

  --es-sucesso: #7FCC9B;         /* color-mix(#16A34A 55%, #FFFFFF) */
  --es-sucesso-fundo: #11302F;   /* color-mix(#16A34A 18%, #101729) */
  --es-aviso: #EAB476;
  --es-aviso-fundo: #342823;
  --es-erro: #EC8888;
  --es-erro-fundo: #351A28;

  --es-sombra: 0 24px 48px -28px rgba(0, 0, 0, .60);
  --es-sombra-forte: 0 24px 48px -20px rgba(0, 0, 0, .70);
  --es-sombra-leve: 0 1px 2px rgba(0, 0, 0, .4);
  --es-veu: rgba(0, 0, 0, .6);
  --es-topo-vidro: rgba(16, 23, 41, .88);
}