/* public/css/tokens.css
   ══════════════════════════════════════════════════════════════════════════════════════
   A camada de tokens do Painel Central. Criada em 17/09/2026 pela Fase 1 do redesign
   (docs/superpowers/plans/2026-09-17-fase1-camada-de-tokens.md).

   Antes dela o painel tinha QUATRO paletas vivas e 260 cores cruas: o :root original de
   painel.css, o bloco "REDESIGN PAINEL CLIENTES (c2)" que o sobrescrevia em hex, um terceiro
   :root na L563, e o Cockpit com nomes próprios. Trocar a pele significava caçar hex em nove
   arquivos. Agora significa mudar valor aqui.

   ⚠️ Os valores CLAROS são, byte a byte, as cores que o painel já usava ANTES desta fase.
   Isso é de propósito: a Fase 1 troca a fundação SEM mudar aparência, e
   test/tokens-preservam-valores.test.js cobra essa igualdade token a token. Mudar valor aqui
   é trabalho da Fase 3 — e exige mudar a tabela daquele teste na mesma commit.

   Nome de token é PAPEL, nunca valor: `--texto-3`, não `--cinza-medio`.
   ══════════════════════════════════════════════════════════════════════════════════════ */
:root{
  /* Anuncia que a página sabe os dois: é o que faz o NAVEGADOR escurecer o que é dele —
     seta de <select>, barra de rolagem, calendário nativo, cor de foco. Sem isto sobram
     ilhas brancas no escuro que nenhum CSS nosso alcança. */
  color-scheme: light dark;

  /* superfície */
  --fundo:#f5f5f7;
  --superficie:#ffffff;
  --superficie-2:#f0f0f2;
  --linha:#ececf0;
  --linha-suave:#f5f5f7;

  /* texto — cinco degraus, do mais forte ao mais fraco. Conferidos contra as TRÊS
     superfícies do tema; o pior caso é --superficie-2, e o degrau mais fraco fica em 4,87.
     A Fase 1 herdou #86868b (3,33) e #aeaeb2 (2,03), que reprovavam desde sempre — e
     reprovavam justamente na linha pequena que explica o número grande. Morreram aqui.
     Regra: o degrau mais fraco não é "o mais fraco possível"; é o mais fraco QUE PASSA. */
  --texto:#1d1d1f;
  --texto-2:#3a3a3d;
  --texto-3:#4a4a4e;
  --texto-4:#59595e;
  --texto-5:#68686d;

  /* ação e sinal. Cor que PREENCHE e cor que ESCREVE são degraus diferentes da mesma
     família: #0071e3 como texto sobre --fundo dá 4,31 e reprova; preencher botão com ele
     continua valendo. É por isso que cada família tem os dois. */
  --acento:#0071e3;
  --acento-texto:#0068d1;
  --acento-forte:#0062c4;
  --ok:#34c759;
  --ok-texto:#1f7a35;
  --atencao:#ff9f0a;
  --atencao-texto:#8a5a00;
  --erro:#ff3b30;
  --erro-texto:#d70015;
  --destaque:#5e5ce6;
  --rosa:#ff375f;

  /* Séries de gráfico: a única família que não é semântica, e a única exceção ao "cores
     padrão". Um gráfico de duas linhas precisa de duas cores distinguíveis. Paleta
     categórica validada pelo script da skill dataviz — seis checagens nos dois temas,
     inclusive separação para daltonismo (ΔE 24,7 protan no claro, 26,8 no escuro).
     Ordem FIXA, nunca ciclada: série 3 não nasce de um gerador de matiz. */
  --serie-1:#2a78d6;
  --serie-2:#eb6834;

  /* A cor que se lê EM CIMA de um preenchimento semântico — botão azul, selo vermelho, pílula
     verde. Branco nos DOIS temas, e isso é decisão: o preenchimento já é escuro o bastante em
     ambos, e escurecer o texto no tema escuro daria texto escuro sobre azul escuro.

     Sem este token, `#fff` usado como COR DE TEXTO vira `--superficie` no mapeamento por
     papel — e no tema escuro a superfície é escura. Foi exatamente o que aconteceu ao ligar o
     escuro no admin: o título do cabeçalho saiu a 1,04:1, invisível. */
  --sobre-preenchimento:#ffffff;

  /* A superfície da moldura — e só dela. Card, tabela e gráfico são opacos. */
  --vidro:rgba(255,255,255,.72);

  /* moldura — a sidebar escura que o bloco c2 introduziu. Hoje é cor chapada; a Fase 4b
     troca por vidro. Os valores são iguais nos dois temas de propósito: a moldura já era
     escura mesmo no tema claro. */
  --moldura:#0e1116;
  --moldura-2:#191e26;
  --moldura-3:#1d2530;
  --moldura-linha:#1c222b;
  --moldura-texto:#e8eaee;
  --moldura-texto-2:#8a93a0;
  --moldura-ativo:#7c9cff;
  --tinta-topo:#07111a;
  --ciano:#12d9b2;

  /* forma e tempo */
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:20px;
  --curva:cubic-bezier(.22,.61,.36,1);
  --dur-rapida:150ms; --dur-normal:250ms;
}

/* O escuro parte dos valores que o Cockpit já usa desde 17/09 — é a única paleta escura do
   projeto que foi desenhada, e não improvisada. */
:root[data-tema="escuro"]{
  --fundo:#0e1014;
  --superficie:#171a20;
  --superficie-2:#1e222a;
  --linha:#2a2f3a;
  --linha-suave:#222731;

  /* Escada conferida contra a superfície MAIS CLARA do tema (--superficie-2), que é o pior
     caso: os cinco degraus passam em 4,5:1. Os valores herdados do Cockpit não passavam —
     --texto-5 dava 3,94 sobre o fundo e 4,29 sobre --superficie-2.
     Regra: o degrau mais fraco de um tema não pode ser "o mais fraco possível"; ele é o mais
     fraco QUE AINDA PASSA. */
  --texto:#eef1f6;
  --texto-2:#c8cfd9;
  --texto-3:#b0b8c4;
  --texto-4:#99a1af;
  --texto-5:#878f9d;

  /* #2f7df6 dava 3,90:1 com texto branco em cima — e `--acento` é COR DE PREENCHIMENTO:
     botão primário, aba ativa, selo. Escurecido para passar em 4,5:1 com branco. Quem escreve
     em azul usa `--acento-texto`, que é outro degrau e é mais claro, porque escreve SOBRE
     fundo escuro. Preencher e escrever puxam a cor em direções opostas no tema escuro. */
  --acento:#1f6fe8;
  --acento-texto:#5b9bf8;
  --acento-forte:#5b9bf8;
  --ok:#2ecb7f;
  --ok-texto:#3ddc91;
  --atencao:#e3a53f;
  --atencao-texto:#f0b757;
  --erro:#ef5a68;
  --erro-texto:#ff8a96;
  --destaque:#8b89f0;
  --rosa:#ff6b85;

  --serie-1:#3987e5;
  --serie-2:#d95926;
  --sobre-preenchimento:#ffffff;

  --vidro:rgba(23,26,32,.72);

  --moldura:#0e1116;
  --moldura-2:#191e26;
  --moldura-3:#1d2530;
  --moldura-linha:#1c222b;
  --moldura-texto:#e8eaee;
  --moldura-texto-2:#8a93a0;
  --moldura-ativo:#7c9cff;
  --tinta-topo:#07111a;
  --ciano:#12d9b2;
}

/* ══ O ESCURO AUTOMÁTICO — ESCOPADO À ÁREA DO CLIENTE ═══════════════════════════════════
   Ligado em 17/09/2026, na Fase 3, e só aqui.

   A Fase 1 tinha deixado este bloco de fora de propósito: naquele momento `painel.css` estava
   começando a ler token, e acender o interruptor teria virado o painel INTEIRO escuro de uma
   vez — para todo usuário de sistema escuro, antes de existir UMA tela desenhada para o
   escuro. A tela mostrou isso durante a própria fase.

   Em 17/09 ele acendeu só para a área do CLIENTE, porque só ela tinha tela desenhada para o
   escuro. Na Fase 5 o escopo caiu: o Biel escolheu que o admin também segue o sistema, e para
   isso as 137 cores cruas de painel.css viraram token — cor fixa não adapta, e era ela que
   impedia o admin de escurecer.

   O COCKPIT segue de fora, preso em `data-tema="escuro"` no próprio <html>: ele já é escuro
   por decisão de 17/09 e não tem por que seguir o sistema. `data-area` continua sendo
   carimbado por `estado.js` — vale para CSS que precise distinguir as duas áreas.

   O `:not([data-tema="claro"])` deixa a escolha da pessoa vencer o sistema. O par dele é o
   bloco `:root[data-tema="escuro"]` acima, que vence no outro sentido.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
  --fundo:#0e1014;
  --superficie:#171a20;
  --superficie-2:#1e222a;
  --linha:#2a2f3a;
  --linha-suave:#222731;

  /* Escada conferida contra a superfície MAIS CLARA do tema (--superficie-2), que é o pior
     caso: os cinco degraus passam em 4,5:1. Os valores herdados do Cockpit não passavam —
     --texto-5 dava 3,94 sobre o fundo e 4,29 sobre --superficie-2.
     Regra: o degrau mais fraco de um tema não pode ser "o mais fraco possível"; ele é o mais
     fraco QUE AINDA PASSA. */
  --texto:#eef1f6;
  --texto-2:#c8cfd9;
  --texto-3:#b0b8c4;
  --texto-4:#99a1af;
  --texto-5:#878f9d;

  /* #2f7df6 dava 3,90:1 com texto branco em cima — e `--acento` é COR DE PREENCHIMENTO:
     botão primário, aba ativa, selo. Escurecido para passar em 4,5:1 com branco. Quem escreve
     em azul usa `--acento-texto`, que é outro degrau e é mais claro, porque escreve SOBRE
     fundo escuro. Preencher e escrever puxam a cor em direções opostas no tema escuro. */
  --acento:#1f6fe8;
  --acento-texto:#5b9bf8;
  --acento-forte:#5b9bf8;
  --ok:#2ecb7f;
  --ok-texto:#3ddc91;
  --atencao:#e3a53f;
  --atencao-texto:#f0b757;
  --erro:#ef5a68;
  --erro-texto:#ff8a96;
  --destaque:#8b89f0;
  --rosa:#ff6b85;

  --serie-1:#3987e5;
  --serie-2:#d95926;
  --sobre-preenchimento:#ffffff;

  --vidro:rgba(23,26,32,.72);

  --moldura:#0e1116;
  --moldura-2:#191e26;
  --moldura-3:#1d2530;
  --moldura-linha:#1c222b;
  --moldura-texto:#e8eaee;
  --moldura-texto-2:#8a93a0;
  --moldura-ativo:#7c9cff;
  --tinta-topo:#07111a;
  --ciano:#12d9b2;
  }
}