/* ==========================================================================
   Esenco — tokens da marca
   Fonte: "Esenco — Projeto de Logo" (manual de identidade visual)
   ========================================================================== */
:root {
  /* --- Cores da marca ---------------------------------------------------- */
  --azul-900: #00243E;   /* escurecimento do azul da marca — headers, rodapé */
  --azul-800: #002E4F;
  --azul-700: #003A62;   /* AZUL ESENCO — cor primária do manual */
  --azul-600: #0A4C7C;
  --azul-500: #14608F;
  --azul-100: #DDE8F0;
  --azul-050: #EEF4F9;

  --ouro-700: #7E5A06;   /* ouro escurecido — texto sobre claro (4,8:1) */
  --ouro-600: #C08F16;
  --ouro-500: #DDA520;   /* AMARELO ESENCO — cor de destaque do manual */
  --ouro-400: #E8B94A;
  --ouro-100: #F8ECCF;
  --ouro-050: #FDF7E9;

  --cinza-700: #4A5866;
  --cinza-600: #566572;
  --cinza-500: #8191A0;  /* CINZA ESENCO */
  --cinza-300: #BAC4CD;
  --cinza-200: #DCE2E8;
  --cinza-100: #EDF0F3;

  --areia-500: #E3DFD3;
  --areia-300: #F0EDE4;  /* OFF WHITE Esenco */
  --areia-100: #F8F6F0;

  --branco: #FFFFFF;
  --tinta: #10222F;      /* texto principal */

  /* --- Semântica --------------------------------------------------------- */
  --sucesso-700: #1F6B45;
  --sucesso-500: #2E8B5B;
  --sucesso-100: #DFF2E8;
  --alerta-700: #8A5A08;
  --alerta-500: #C98A12;
  --alerta-100: #FBEFD4;
  --erro-700: #9B2C2C;
  --erro-500: #C53434;
  --erro-100: #FBE3E3;
  --info-700: #1C5A8A;
  --info-100: #DEEBF5;

  /* --- Superfícies ------------------------------------------------------- */
  --fundo: #FFFFFF;
  --fundo-suave: var(--areia-100);
  --fundo-escuro: var(--azul-700);
  --fundo-escuro-2: var(--azul-900);
  --borda: #E2E7EC;
  --borda-forte: var(--cinza-500);
  /* Texto sobre o azul-escuro (menu lateral das áreas de conta, rodapé) */
  --texto-sobre-escuro: #A9BFD0;
  --texto-sobre-escuro-apoio: #8FA8BC;

  /* --- Tipografia -------------------------------------------------------- */
  /* O manual usa Aonic (principal) e LT Wave (secundária), fontes comerciais.
     Para a web usamos substitutas de licença aberta com o mesmo caráter
     geométrico. Troque aqui se licenciar as originais. */
  --fonte-titulo: 'Outfit', 'Aonic', 'Century Gothic', system-ui, sans-serif;
  --fonte-texto: 'Archivo', 'LT Wave', system-ui, -apple-system, sans-serif;
  --fonte-num: 'Archivo', system-ui, sans-serif;

  --t-display: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
  --t-h1: clamp(2.1rem, 1.5rem + 2.2vw, 3.2rem);
  --t-h2: clamp(1.7rem, 1.35rem + 1.3vw, 2.4rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  --t-h4: 1.125rem;
  --t-corpo: 1.0625rem;
  --t-peq: 0.9375rem;
  --t-micro: 0.875rem;

  /* --- Espaçamento ------------------------------------------------------- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
  --e-9: 96px; --e-10: 128px;

  /* --- Raio e sombra ----------------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;
  --s-1: 0 1px 2px rgba(16,34,47,.06), 0 1px 3px rgba(16,34,47,.05);
  --s-2: 0 2px 6px rgba(16,34,47,.06), 0 8px 20px rgba(16,34,47,.07);
  --s-3: 0 4px 12px rgba(16,34,47,.08), 0 18px 44px rgba(16,34,47,.10);
  --s-foco: 0 0 0 3px rgba(221,165,32,.45);

  /* --- Layout ------------------------------------------------------------ */
  --largura: 1180px;
  --largura-estreita: 760px;
  --altura-topo: 76px;
  --pix-qr: 240px;       /* lado do QR Code do Pix na tela de pagamento */
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Gráfico de barras da evolução mensal (aba Afiliados do painel) */
  --grafico-altura: 160px;
  --grafico-altura-compacta: 110px;
  --grafico-barra-largura: 28px;
  --grafico-barra-minima: 2px;
  /* Folga do topo: 0 no corte do celular (980px) até 1px em 1120px. Os espaços do topo usam
     "apertado + (cheio - apertado) × folga", ex.: --e-3 + 12 × folga vai de --e-3 a --e-5. */
  --topo-folga: clamp(0px, calc((100vw - 980px) / 140), 1px);
  --transicao: 180ms cubic-bezier(.32,.72,.35,1);
}