/* ============================================================================
   GOTACHAT — DESIGN TOKENS (ferramenta de trabalho, estilo ManyChat)
   ----------------------------------------------------------------------------
   Por que NÃO usa o DS "boticário" do Portal da Natureza (creme/cacau/mate):
   aquele é a linguagem de MARCA da Gota, certa para peças que o público vê.
   O GotaChat é ferramenta interna de uso diário — vale a regra que o Victor já
   tinha dado: ferramenta do dia a dia é clara, funcional e neutra; tokens da
   marca ficam para peça de marca. Aqui a referência é o ManyChat: painel claro,
   barra lateral escura, azul de ação, muito respiro, tipografia de interface.
   ============================================================================ */

:root {
  /* ---- superfícies ---- */
  --sup-app: #f4f6f9;        /* fundo do conteúdo */
  --sup-cartao: #ffffff;     /* cartões, tabelas, modais */
  --sup-rebaixo: #eef1f6;    /* zebra de tabela, campos, chips inativos */
  --sup-lateral: #16233a;    /* barra lateral (navy escuro, marca do "painel") */
  --sup-lateral-ativo: #22304a;
  --sup-lateral-hover: rgba(255, 255, 255, 0.07);

  /* ---- tinta ---- */
  --tinta-titulo: #101828;
  --tinta-corpo: #344054;
  --tinta-suave: #667085;
  --tinta-apagada: #98a2b3;
  --tinta-invertida: #ffffff;
  --tinta-lateral: #b6c2d6;      /* texto normal da sidebar */
  --tinta-lateral-ativa: #ffffff;

  /* ---- ação (azul de ferramenta) ---- */
  --acao: #2563eb;
  --acao-hover: #1d4ed8;
  --acao-pressao: #1e40af;
  --acao-suave: #eff4ff;         /* fundo de item selecionado/realce */
  --acao-borda: #c7d7fe;

  /* ---- retorno ---- */
  --ok: #12b76a;
  --ok-suave: #ecfdf3;
  --ok-tinta: #027a48;
  --erro: #f04438;
  --erro-suave: #fef3f2;
  --erro-tinta: #b42318;
  --aviso: #f79009;
  --aviso-suave: #fffaeb;
  --aviso-tinta: #b54708;

  /* ---- bordas ---- */
  --borda: #e4e7ec;
  --borda-forte: #d0d5dd;

  /* ---- tipografia ---- */
  --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --t-display: 28px;
  --t-titulo: 20px;
  --t-subtitulo: 16px;
  --t-corpo: 14px;
  --t-p: 13px;
  --t-micro: 12px;

  /* ---- espaço (escala de 4) ---- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px; --e12: 48px;

  /* ---- raio e sombra ---- */
  --raio-s: 6px;
  --raio: 8px;
  --raio-g: 12px;
  --raio-pilula: 999px;
  --sombra-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --sombra-2: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --sombra-3: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);

  /* ---- leiaute ---- */
  --lateral-larg: 232px;
  --topo-alt: 60px;

  --transicao: 140ms ease;
}