/* Paleta do JOGA Analytics — fonte única de cor.
 *
 * Antes cada página trazia o próprio bloco :root. Eram 17 cópias que já haviam divergido em
 * 7 variantes — não nos valores (esses batiam), mas em QUAIS variáveis cada uma declarava.
 * Resultado: mexer em cor significava caçar 17 arquivos, e uma página podia usar uma variável
 * que ela mesma não definia.
 *
 * Este arquivo é carregado por todas as páginas, ANTES do <style> inline de cada uma, para que
 * o CSS local continue podendo sobrescrever o que precisar.
 *
 * O tema claro entra aqui depois, como :root[data-tema="claro"] sobrescrevendo estes valores.
 * Por isso as variáveis são nomeadas pelo PAPEL (surface, border, text-dim) e não pela cor —
 * "surface" continua fazendo sentido quando for clara; "cinza-escuro" não faria.
 */

:root {
  /* ── Fundo e superfícies ── */
  --bg: #0a0e17;         /* fundo da página */
  --surface: #111827;    /* cartões, painéis */
  --surface2: #1a2235;   /* controles, cabeçalho de tabela, estados hover */
  --surface3: #222d44;   /* 3º nível — usado pelo módulo Compras */
  --border: #1e293b;

  /* ── Texto ── */
  --text: #e2e8f0;       /* corpo */
  --text-dim: #94a3b8;   /* secundário, rótulos */
  --text-mute: #64748b;  /* terciário, dicas */

  /* ── Marca ── */
  --accent: #38bdf8;
  --accent2: #818cf8;    /* 2º tom dos gradientes */

  /* ── Status ── */
  --green: #34d399;
  --red: #f87171;
  --orange: #fb923c;
  --yellow: #fbbf24;
  --gray: #475569;

  /* Roxo: os dois módulos usam tons diferentes. Mantidos separados de propósito — unificar
   * mudaria a aparência, e esta etapa é refactor puro. A convergência (se valer a pena) é
   * decisão de design, junto da calibragem do tema claro. */
  --purple: #a78bfa;          /* Comercial — segmento RFM, cockpit do vendedor */
  --purple-compras: #c084fc;  /* Compras — badge "sem giro"/parado e cor de gráfico */

  /* ── Triplas RGB ──
   * O código tem dezenas de fundos "vidro", tints e sombras: rgba(56,189,248,.15) etc.
   * Para o tema claro trocar esses fundos junto, sem colapsar as várias opacidades numa só,
   * a cor entra como tripla e o alpha fica no ponto de uso: rgba(var(--accent-rgb), .15).
   * Assim o tema claro redefine só a tripla e cada opacidade é preservada. */
  --bg-rgb: 10, 14, 23;
  --surface-rgb: 17, 24, 39;
  --surface2-rgb: 26, 34, 53;
  --border-rgb: 30, 41, 59;
  --text-rgb: 226, 232, 240;
  --accent-rgb: 56, 189, 248;
  --accent2-rgb: 129, 140, 248;
  --green-rgb: 52, 211, 153;
  --red-rgb: 248, 113, 113;
  --orange-rgb: 251, 146, 60;
  --yellow-rgb: 251, 191, 36;
  --purple-rgb: 167, 139, 250;
  --purple-compras-rgb: 192, 132, 252;
  --gray-rgb: 71, 85, 105;
  --text-dim-rgb: 148, 163, 184;
  --sombra-rgb: 0, 0, 0;   /* sombras; no claro pode continuar preto com menos opacidade */

  /* Texto POR CIMA do accent (botão primário, marca, ícones do portal). No escuro é o próprio
   * fundo (quase preto sobre o azul claro). Precisa de nome próprio porque no tema claro o --bg
   * vira branco, e "texto branco sobre azul claro" fica ilegível — aqui continua escuro. */
  --sobre-accent: #0a0e17;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * TEMA CLARO
 *
 * Ativado por data-tema="claro" no <html>. Sobrescreve só os VALORES — nenhuma regra de
 * componente muda, porque tudo aponta para estas variáveis.
 *
 * Branco/cinza neutro (padrão SaaS): fundo levemente acinzentado, cartões brancos que "saltam".
 * As cores foram ESCURECIDAS em relação ao tema escuro porque tom claro brilha sobre preto mas
 * some sobre branco. Todos os pares de texto foram validados em WCAG AA (≥4,5:1) — o azul, o
 * verde e o laranja do escuro reprovavam sobre branco e precisaram descer de tom.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
:root[data-tema="claro"] {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface2: #eef1f6;
  --surface3: #e3e8f0;
  --border: #d5dce6;

  --text: #0f172a;
  /* Secundário/terciário ESCURECIDOS no claro (pedido do diretor 07/2026: no branco o
     cinza-médio ficava lavado). Quase-preto, mantendo só uma leve hierarquia; contraste
     sobe (segue WCAG AA). Dim ~13:1, mute ~8:1 sobre o branco. */
  --text-dim: #1e293b;
  --text-mute: #475569;

  --accent: #0369a1;    /* azul-céu escurecido: como link/texto sobre branco passa em contraste */
  --accent2: #5457e5;

  --green: #047857;
  --red: #dc2626;
  --orange: #c2410c;
  --yellow: #b45309;    /* o amarelo do escuro some no branco; vira âmbar escuro */
  --gray: #64748b;

  --purple: #7c3aed;
  --purple-compras: #9333ea;

  /* Triplas casadas com os hex acima (os tints seguem o tema pela tripla, alpha no uso). */
  --bg-rgb: 245, 247, 250;
  --surface-rgb: 255, 255, 255;
  --surface2-rgb: 238, 241, 246;
  --border-rgb: 213, 220, 230;
  --text-rgb: 15, 23, 42;
  --accent-rgb: 3, 105, 161;
  --accent2-rgb: 84, 87, 229;
  --green-rgb: 4, 120, 87;
  --red-rgb: 220, 38, 38;
  --orange-rgb: 194, 65, 12;
  --yellow-rgb: 180, 83, 9;
  --purple-rgb: 124, 58, 237;
  --purple-compras-rgb: 147, 51, 234;
  --gray-rgb: 100, 116, 139;
  --text-dim-rgb: 30, 41, 59;
  /* Sombra no claro: cinza-ardósia em vez de preto puro, mais suave sobre fundo claro. */
  --sombra-rgb: 15, 23, 42;

  /* Texto sobre o accent agora é branco (o accent virou azul escuro). */
  --sobre-accent: #ffffff;
}
