/* ==========================================================================
   Smart Pages: tokens propostos (rascunho de 15/10/2026, design-system-audit.md)
   Nomes: contrato --es-* da wp-plataforma (es-ui) + escalas do tema smarthub.
   Valores: identidade SmartHub v3.0 "As peças"
            (marca/identidade/marcas/smarthub/tokens.css e style.css servido),
            com as correções de contraste marcadas "corrigido".
   Site público: só tema claro (regra da marca). Escuro: só área logada.
   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: incluir OFL.txt */
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 97%;
  ascent-override: 98%;
  descent-override: 26%;
}

:root {
  color-scheme: light;

  /* Superfícies */
  --es-pagina: #EDE8E0;          /* Creme (--fundo) */
  --es-fundo: #FFFFFF;           /* campos, formulário, barra do topo */
  --es-branco-fixo: #FFFFFF;
  --es-superficie: #FBFAF8;      /* Off-white (--pastel): cards */
  --es-superficie-2: #F4F1EC;    /* hover, trilhos */
  --es-escuro: #0A262C;          /* Petróleo noite: no máximo um bloco escuro por dobra */

  /* Texto */
  --es-texto: #051115;           /* Noite (--tinta) */
  --es-texto-2: #4A5254;         /* Grafite (--texto) */
  --es-texto-3: #5E6466;         /* Névoa (--suave): nunca sobre Areia */

  /* Linhas */
  --es-linha: #E4DBD0;           /* Areia (--pastel-2): só decorativa */
  --es-linha-forte: #757C7E;     /* corrigido: era #D9D3CA (1,49:1); = color-mix(--es-texto 55%, #fff) */

  /* Marca */
  --es-primaria: #20738C;        /* Petróleo (--marca): até 10% da área */
  --es-primaria-hover: #1A5F73;
  --es-primaria-texto: #FFFFFF;
  --es-destaque: #154A5A;        /* Petróleo profundo (--marca-700): texto e links sobre Creme */
  --es-destaque-hover: #0A262C;
  --es-suave: #E8F1F3;
  --es-suave-2: #CFE3E8;
  --es-amarelo: #EBC354;         /* Amarelo (--acento): um destaque por tela */
  --es-amarelo-texto: #051115;
  --es-cat-4: #4C3F8A;           /* Violeta (--acento-2) */
  --es-foco: #20738C;            /* outline 2px, offset 3px (es-ui) */

  /* Estados: corrigidos (valores do Poste Aí / painel) */
  --es-sucesso: #15803D;         /* era #16A34A */
  --es-sucesso-fundo: #E8F6EE;   /* novo */
  --es-aviso: #B45309;           /* era #D97706 */
  --es-aviso-fundo: #FEF6E7;     /* novo */
  --es-erro: #B91C1C;            /* era #DC2626 */
  --es-erro-fundo: #FDECEA;      /* novo */

  /* 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 */
  --es-sombra: 0 30px 70px -30px rgba(5, 17, 21, .28), 0 2px 6px rgba(5, 17, 21, .05);
  --es-sombra-forte: 0 24px 48px -28px rgba(5, 17, 21, .40);
  --es-grade: rgba(5, 17, 21, .06);

  /* Tipografia: uma fonte só (regra do grupo) */
  --es-fonte: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-rot: 13px;                /* corrigido: era 12,5px; só rótulos em caixa alta */
  --fs-peq: 14px;                /* mínimo para qualquer texto informativo (pílula, selo "Exemplo ilustrativo") */
  --fs-ui: 16px;                 /* corrigido: era 15,5px; briefing pede 16-18px */
  --fs-corpo: 16px;
  --fs-lead: 17px;
  --fs-h3: 18px;
  --fs-xl: 19px;
  --fs-2xl: 21px;
  --fs-h2: clamp(28px, 3.6vw, 44px);
  --fs-h1: clamp(30px, 4vw, 44px);
  --fs-display: clamp(32px, 3.6vw, 60px);
  --fs-kpi: clamp(32px, 3.6vw, 40px);
  --peso-titulo: 300;            /* "nunca título em 700-800 nesta marca" */
  --peso-h3: 400;
  --peso-ui: 600;
  --lh-base: 1.5;
  --lh-longo: 1.7;
  --lh-titulo: 1.15;
  --ls-titulo: -0.02em;

  /* 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;
  --sec: 64px;
  --gutter: 16px;
  --moldura: 8px;
  --container: 1294px;

  /* Raios (v3) */
  --raio-sm: 12px;
  --raio-md: 20px;
  --raio-lg: 24px;
  --raio-xl: 24px;
  --raio-pilula: 999px;
  --raio-btn: 12px;              /* = --r-btn da identidade */
  --raio-foto: 20px;
  --es-raio: var(--raio-lg);     /* site: 24px (marca) */

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

  /* Movimento (es-ui); 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: 96px; --gutter: 32px; --moldura: 16px; }
}
@media (min-width: 1024px) and (max-width: 1599px) {
  :root { --sec: 72px; }        /* faixa de notebook da v3 */
}

/* Área logada (/clients e /admin), tema claro: cards 12-16px do briefing (hipótese a confirmar) */
[data-area="app"] {
  --es-pagina: #FBFAF8;          /* off-white: leitura longa sem o Creme saturado */
  --es-superficie: #FFFFFF;      /* cards brancos com --es-linha */
  --es-raio: 16px;
}

/* Área logada, tema escuro: só aqui (a marca não permite escuro no site público).
   Valores derivados por color-mix de tokens existentes; hipótese (Petróleo noite x Azul-noite). */
[data-area="app"][data-tema="escuro"] {
  color-scheme: dark;

  --es-pagina: #051115;          /* Noite */
  --es-fundo: #0A262C;           /* Petróleo noite: campos e cards */
  --es-superficie: #0A262C;
  --es-superficie-2: #0E353F;    /* color-mix(#0A262C 80%, #20738C) */
  --es-escuro: #051115;

  --es-texto: #EDE8E0;           /* Creme */
  --es-texto-2: #C0C1BC;         /* color-mix(#EDE8E0 80%, #0A262C) */
  --es-texto-3: #A9AEAA;         /* color-mix(#EDE8E0 70%, #0A262C) */

  --es-linha: #33494C;           /* color-mix(#EDE8E0 18%, #0A262C): decorativa */
  --es-linha-forte: #7C8786;     /* color-mix(#EDE8E0 50%, #0A262C) */

  --es-primaria: #CFE3E8;        /* --es-suave-2 claro; Petróleo some no fundo escuro (2,93:1) */
  --es-primaria-hover: #D9E9ED;  /* color-mix(#CFE3E8 80%, #FFFFFF) */
  --es-primaria-texto: #051115;
  --es-destaque: #CFE3E8;
  --es-destaque-hover: #EDE8E0;
  --es-suave: #154A5A;           /* Petróleo profundo: fundo de pílula */
  --es-suave-2: #0E353F;
  --es-foco: #EBC354;            /* Amarelo: foco visível sobre fundo escuro */

  --es-sucesso: #7FCC9B;         /* color-mix(#16A34A 55%, #FFFFFF) */
  --es-sucesso-fundo: #0C3C31;   /* color-mix(#16A34A 18%, #0A262C) */
  --es-aviso: #EAB476;           /* color-mix(#D97706 55%, #FFFFFF) */
  --es-aviso-fundo: #2F3525;     /* color-mix(#D97706 18%, #0A262C) */
  --es-erro: #EC8888;            /* color-mix(#DC2626 55%, #FFFFFF) */
  --es-erro-fundo: #30262B;      /* color-mix(#DC2626 18%, #0A262C) */

  --es-sombra: 0 24px 48px -28px rgba(0, 0, 0, .60);
  --es-sombra-forte: 0 24px 48px -20px rgba(0, 0, 0, .70);
  --es-grade: rgba(237, 232, 224, .06);
}