/* 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 {
  /* ⚠️ Declara o esquema para o NAVEGADOR, não só para o nosso CSS. O que é desenhado pelo
     sistema — barra de rolagem, a LISTA que abre num <select>, checkbox, seletor de data —
     ignora as variáveis daqui e sai no modo claro por padrão. Sem esta linha, o tema escuro
     (que é o default do app) mostrava gatilho de select escuro abrindo popup BRANCO, e barra
     de rolagem clara sobre fundo quase preto, em todas as telas do Comercial. O módulo
     Compras não sofria só porque tem regra própria de barra (estoque.css). */
  color-scheme: dark;

  /* ── Escala tipográfica ──────────────────────────────────────────────────────
     Antes NAO existia escala: cada tela redefinia as mesmas classes com os mesmos
     valores em rem, e 96 a 98 por cento dos nos de texto caiam entre 10 e 13px, com
     apenas dois degraus acima (o titulo e o KPI). Entre 13 e 22px nao havia nada — ou
     seja, o tamanho tinha parado de comunicar importancia, e o olho passava a decidir
     pela cor e pela posicao.

     O uso principal desta ferramenta e PROJETADO numa sala, plateia a 3-5 metros. Numa
     projecao de 3 m a partir de 1920px, 10px rende 9,4 minutos de arco e 11,5px rende
     10,8 — os dois abaixo do limite de decodificacao (11'), antes de somar presbiopia.
     Dai o piso de 12px: nada no app pode ser menor que --fs-xs. */
  --fs-xs:  0.75rem;    /* 12px — piso. Rodapes, tags, rotulos de eixo */
  --fs-sm:  0.8125rem;  /* 13px — tabelas, descricoes */
  --fs-md:  0.875rem;   /* 14px — corpo, leitura, notas de procedencia */
  --fs-lg:  1rem;       /* 16px — subtitulos, variacao dentro do cartao */
  --fs-xl:  1.25rem;    /* 20px — titulos de painel */
  --fs-2xl: 1.5rem;     /* 24px — a pergunta da tela */
  --fs-3xl: 1.75rem;    /* 28px — KPI de destaque */
  --fs-4xl: 2.5rem;     /* 40px — veredito (o unico numero que a sala LE de longe) */

  /* ── 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;
  /* Polegar da barra de rolagem da PÁGINA. Token próprio porque nenhuma cor de superfície
     serve: `--surface3` dava 1,40:1 no escuro e 1,15:1 no claro (invisível — reclamação do
     diretor 08/2026), e `--text-dim` dava 13,6:1 no claro, uma barra quase preta. Calibrado
     logo acima do mínimo de 3:1 da WCAG p/ componente de UI: visível sem pesar. */
  --scroll-thumb: #5b6a82;   /* 3,52:1 sobre --bg */

  /* ── 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;
  /* Era #475569: 2,34:1 sobre --surface, abaixo do minimo de 3:1 da WCAG para
     componente grafico — e e a cor das barras "Outros" e da serie cinza. Numa
     projecao com luz ambiente, sumia. Este tom da 4,03:1. */
  --gray: #6b7a90;

  /* 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: 107, 122, 144;
  --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"] {
  color-scheme: light;   /* explícito: o par do `dark` acima, para a troca ser simétrica */
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface2: #eef1f6;
  --surface3: #e3e8f0;
  --scroll-thumb: #7c8798;   /* 3,39:1 sobre --bg */
  --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;
}