/* Paleta compartilhada da Verus CNPJ Brasil — a vitrine (landing, termos, privacidade) E o dashboard (estilo.css,
   login.css e as páginas) leem daqui. Fonte única desde a onda 3 do plano de 15/10/2026 (D15): antes a mesma paleta
   vivia em 4 cópias (landing.html <style>, juridico.css, estilo.css, login.css) que o teste só conseguia vigiar;
   agora COR NOVA ENTRA AQUI E NUNCA NUM ARQUIVO DE PÁGINA (regra em docs/DESIGN-SYSTEM.md, "Tokens compartilhados").
   Nenhum valor mudou na mudança de lugar — sistema/api/test/tokens.mjs compara cada token com o que estava nas 4
   cópias no commit anterior à onda.

   Como o tema é escolhido:
   - a base `:root` é o tema ESCURO (a vitrine é dark-first). O dashboard cai nela quando estampa data-tema="escuro"
     ou quando o sistema prefere escuro e a página não estampou nada;
   - o CLARO entra de duas formas: pelo sistema (`prefers-color-scheme: light`) quando o <html> NÃO estampou atributo
     escuro, e por atributo explícito. A vitrine estampa `html[data-theme="light|dark"]`; o dashboard estampa
     `html[data-tema="claro|escuro"]` (pre.js lê o localStorage e só estampa quando há preferência salva — por isso
     o fallback do sistema continua necessário). Os dois atributos são reconhecidos aqui.
   - O bloco claro está escrito duas vezes (media query × atributo) porque CSS não aceita @media numa lista de
     seletores; o teste confere que as duas cópias não divergem.

   Nomes: a vitrine usa os nomes em inglês (--bg, --text, --accent...); o dashboard, os em português (--fundo,
   --texto, --primaria...). No tema escuro os do dashboard são ALIASES (var()) dos da vitrine — é a mesma paleta D10
   (azul-marinho profundo, elevação por matiz). No claro o dashboard tem valores próprios, mais "institucionais"
   (só --superficie, --texto-3, --primaria, --primaria-contraste e --sucesso coincidem com a vitrine); ficaram como
   estavam. Os tokens que não são cor (raio, largura do painel de filtros) continuam em estilo.css. */

/* ================= tipografia (não depende do tema) ================= */
:root {
  --sans: 'Geist', -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* o dashboard tem a própria pilha (system-ui antes de -apple-system, Helvetica Neue/Arial no fim); unificar com
     --sans é decisão visual para outra onda, não desta (que não muda nada do que se vê) */
  --fonte: 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ================= tema ESCURO (base) — paleta D10 ================= */
:root {
  /* ---- vitrine ---- */
  --bg: #040b1a;
  --bg-2: #061024;
  --surface: #0a1526;
  --surface-2: #101f36;
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.18);
  --text: #ffffff;
  --text-2: #93a5bc;
  --text-3: #7b8fa9; /* era #63758c (3,9:1 sobre --surface) — agora 5,5:1 no cartão e 5,9:1 no fundo (AA p/ texto pequeno) */
  --accent: #38bdf8;
  --accent-2: #0ea5e9;
  --accent-strong: #27a6ff;
  --accent-ink: #04101f;
  --mint: #00e0a4;
  --gold: #f0c069;
  --alert: #ff6b5a;
  --alert-soft: rgba(255,107,90,.12);
  --violet: #c084fc; /* booleanos/null no JSON da consulta — 7,4:1 sobre --bg */
  /* glow deriva do accent (color-mix) em vez de repetir o RGB na mão: mudou o accent, o brilho acompanha
     (o dashboard usa o mesmo --glow: = rgba(56,189,248,.4)) */
  --glow: color-mix(in srgb, var(--accent) 40%, transparent);
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55);

  /* ---- dashboard: aliases da mesma paleta (elevação --fundo → --superficie → --superficie-2 → --superficie-3) ---- */
  --fundo:        var(--bg);
  --superficie:   var(--surface);
  --superficie-2: var(--surface-2);
  --superficie-3: #172a49;
  --borda:        var(--border);
  --borda-forte:  var(--border-strong);
  --texto:        var(--text);
  --texto-2:      var(--text-2);
  --texto-3:      var(--text-3); /* 5,5:1 sobre --superficie, 5,9:1 sobre --fundo, 5,0:1 sobre --superficie-2 (texto terciário nunca vai sobre --superficie-3, que só é fundo de hover) */

  --primaria:           var(--accent);
  --primaria-escura:    var(--accent-2);
  --primaria-suave:     rgba(56,189,248,.16);
  --primaria-contraste: var(--accent-ink);

  --sucesso:       var(--mint);
  --sucesso-suave: rgba(0,224,164,.14);
  --alerta:        var(--gold);
  --alerta-suave:  rgba(240,192,105,.14);
  --perigo:        var(--alert);
  --perigo-suave:  rgba(255,107,90,.12);

  /* sinais de compliance com matiz próprio — evita "parede vermelha" quando uma empresa acumula
     dívida + auto ambiental + lista suja ao mesmo tempo (Compliance & Risco, ficha 360°) */
  --risco-fiscal:            #f0954f;
  --risco-fiscal-suave:      #2c1f12;
  --risco-trabalhista:       #e07fa3;
  --risco-trabalhista-suave: #301b26;
  --risco-ambiental:         #4fb8c9;
  --risco-ambiental-suave:   #0f2a2e;
  --risco-integridade:       #9b8cf5;
  --risco-integridade-suave: #211c3a;

  --sombra: 0 0 0 1px rgba(56,189,248,.10), 0 16px 40px -12px rgba(2,6,16,.85);
  --anel-foco: 0 0 0 3px rgba(56,189,248,.35), 0 0 16px -4px var(--glow);
  color-scheme: dark;
}

/* ================= tema CLARO pelo sistema — só quando a página NÃO estampou atributo escuro ================= */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-tema="escuro"]) {
    /* ---- vitrine ---- */
    --bg: #f5f7fb; --bg-2: #eef2f8; --surface: #ffffff; --surface-2: #eef2f8;
    --border: rgba(9,20,38,.10); --border-strong: rgba(9,20,38,.20);
    --text: #0a1424; --text-2: #47576e; --text-3: #5b6b82; /* text-3 era #77869b (3,5:1) — agora 5,1:1 */
    --accent: #0a6fb0; --accent-2: #0369a1; --accent-strong: #085e96; --accent-ink: #ffffff; /* accent era #0e88d6 (3,6:1) — agora 5,0:1; branco sobre ele 5,4:1 */
    --mint: #007a57; --gold: #7a5c0b; --alert: #c23a29; --alert-soft: #fdeeeb; --violet: #6d28d9; /* mint era #00996f (3,4:1) → 5,0:1; gold era #92700f (4,3:1) → 5,8:1 */
    --glow: color-mix(in srgb, var(--accent) 16%, transparent);
    --shadow: 0 1px 2px rgba(9,20,38,.05), 0 16px 40px rgba(9,20,38,.08);
    /* ---- dashboard: tema claro próprio (mesma família azul/cinza, mais institucional). Contraste WCAG AA conferido
       (calculado, docs/auditorias/2026-10-15 frontend-10): --texto-3 #5b6b82 = 5,4:1 sobre #fff, 5,0:1 sobre --fundo,
       4,9:1 sobre --superficie-2 · --primaria #0a6fb0 sobre #fff = 5,4:1 (e #fff sobre ela = 5,4:1 nos botões) ·
       --sucesso #007a57 sobre #fff = 5,4:1 e 4,8:1 sobre --sucesso-suave. --primaria-escura tem o mesmo matiz da
       --primaria (o antigo #1747c2 era índigo e descolava no degradê dos botões). ---- */
    --fundo: #f4f6fa; --superficie: var(--surface); --superficie-2: #f0f3f8; --superficie-3: #e6eaf2;
    --borda: #dbe1ea; --borda-forte: #c3ccdb;
    --texto: #1b2433; --texto-2: #5a6678; --texto-3: var(--text-3);
    --primaria: var(--accent); --primaria-escura: #08588c; --primaria-suave: #e3f1fb; --primaria-contraste: var(--accent-ink);
    --sucesso: var(--mint); --sucesso-suave: #e3f6ee; --alerta: #b7791f; --alerta-suave: #fff4dd; --perigo: #c53030; --perigo-suave: #fde8e8;
    --risco-fiscal: #a8660f; --risco-fiscal-suave: #fdf1e0; --risco-trabalhista: #a3395f; --risco-trabalhista-suave: #fbe8ee;
    --risco-ambiental: #0d7c8a; --risco-ambiental-suave: #e1f3f6; --risco-integridade: #5b4bc4; --risco-integridade-suave: #ece9fb;
    --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --anel-foco: 0 0 0 3px var(--primaria-suave), 0 0 14px -4px var(--glow);
    color-scheme: light;
  }
}

/* ================= tema CLARO estampado no <html> (vitrine: data-theme="light" · dashboard: data-tema="claro") =================
   Cópia IDÊNTICA do bloco acima — o teste tokens.mjs falha se as duas divergirem. */
:root[data-theme="light"], :root[data-tema="claro"] {
  /* ---- vitrine ---- */
  --bg: #f5f7fb; --bg-2: #eef2f8; --surface: #ffffff; --surface-2: #eef2f8;
  --border: rgba(9,20,38,.10); --border-strong: rgba(9,20,38,.20);
  --text: #0a1424; --text-2: #47576e; --text-3: #5b6b82;
  --accent: #0a6fb0; --accent-2: #0369a1; --accent-strong: #085e96; --accent-ink: #ffffff;
  --mint: #007a57; --gold: #7a5c0b; --alert: #c23a29; --alert-soft: #fdeeeb; --violet: #6d28d9;
  --glow: color-mix(in srgb, var(--accent) 16%, transparent);
  --shadow: 0 1px 2px rgba(9,20,38,.05), 0 16px 40px rgba(9,20,38,.08);
  /* ---- dashboard ---- */
  --fundo: #f4f6fa; --superficie: var(--surface); --superficie-2: #f0f3f8; --superficie-3: #e6eaf2;
  --borda: #dbe1ea; --borda-forte: #c3ccdb;
  --texto: #1b2433; --texto-2: #5a6678; --texto-3: var(--text-3);
  --primaria: var(--accent); --primaria-escura: #08588c; --primaria-suave: #e3f1fb; --primaria-contraste: var(--accent-ink);
  --sucesso: var(--mint); --sucesso-suave: #e3f6ee; --alerta: #b7791f; --alerta-suave: #fff4dd; --perigo: #c53030; --perigo-suave: #fde8e8;
  --risco-fiscal: #a8660f; --risco-fiscal-suave: #fdf1e0; --risco-trabalhista: #a3395f; --risco-trabalhista-suave: #fbe8ee;
  --risco-ambiental: #0d7c8a; --risco-ambiental-suave: #e1f3f6; --risco-integridade: #5b4bc4; --risco-integridade-suave: #ece9fb;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --anel-foco: 0 0 0 3px var(--primaria-suave), 0 0 14px -4px var(--glow);
  color-scheme: light;
}