/* ============================================================
   TOKENS DA CONEXA — fonte única da identidade visual
   https://entregas.conexasp.com.br/tokens/conexa.css

   Todo sistema novo importa este arquivo e usa var(--gold),
   nunca um hex escrito à mão. Trocar a cor da marca = editar aqui.

   Origem: /var/www/conexa-site/styles.css (site institucional).
   Criado em 14/08/2026 após auditoria que achou 5 dourados no ar.
   ============================================================ */

:root {
  /* Marca */
  --conexa-ink:        #0A1628;  /* navy quase preto — fundo das ferramentas */
  --conexa-navy-deep:  #0F1F3D;  /* superfície elevada no escuro */
  --conexa-navy:       #1D3461;  /* navy da marca — títulos no claro */
  --conexa-steel:      #8FA8C8;  /* azul frio — texto secundário no escuro */
  --conexa-steel-ink:  #5B7FAE;  /* mesma família, contraste ok no claro */
  --conexa-steel-soft: #C4D1E2;  /* bordas e divisores no claro */
  --conexa-gold:       #E8B04B;  /* ÚNICO dourado da marca */

  /* Fundos claros */
  --conexa-cream:      #FAFAF7;
  --conexa-cream-alt:  #F2F1EC;
  --conexa-muted:      #5C6B82;

  /* Linhas no escuro */
  --conexa-line:       #22355C;
  --conexa-line-soft:  #16294A;

  /* Semânticas — separadas da marca, não são acento */
  --conexa-ok:         #22C55E;
  --conexa-warn:       #E8B04B;
  --conexa-crit:       #EF4444;

  /* Tipografia */
  --conexa-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --conexa-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --conexa-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ------------------------------------------------------------
   REGRA DE SUPERFÍCIE — claro para fora, escuro para dentro.
   O que o cliente vê é claro como o site.
   O que a equipe opera o dia inteiro é escuro.

   REGRA DO DOURADO — sobre fundo escuro ele é texto (9,3:1).
   Sobre o creme ele dá 1,96:1: ali é só filete, ícone e destaque,
   NUNCA texto.
   ------------------------------------------------------------ */

/* Atalhos para ferramenta interna (fundo escuro) */
.conexa-dark {
  background: var(--conexa-ink);
  color: #E6ECF5;
  font-family: var(--conexa-font-body);
}
.conexa-dark a { color: var(--conexa-gold); }
.conexa-dark .superficie { background: var(--conexa-navy-deep); border: 1px solid var(--conexa-line); }
.conexa-dark .secundario { color: var(--conexa-steel); }

/* Atalhos para superfície de cliente (fundo claro) */
.conexa-light {
  background: var(--conexa-cream);
  color: var(--conexa-ink);
  font-family: var(--conexa-font-body);
}
.conexa-light a { color: var(--conexa-navy); }
.conexa-light .superficie { background: #FFFFFF; border: 1px solid var(--conexa-steel-soft); }
.conexa-light .secundario { color: var(--conexa-muted); }
/* no claro o dourado nunca carrega texto — só filete e marcador */
.conexa-light .filete { background: var(--conexa-gold); height: 3px; border-radius: 2px; }