/* 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;
  /* O que se lê em cima de uma cor de SÉRIE (selo numerado dos gráficos). No admin escuro as
     séries são claras e o texto é escuro; fora do admin é o mesmo branco de sempre. */
  --sobre-serie:var(--sobre-preenchimento);

  /* 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;
  }
}

/* ══ A PELE NOVA DO ADMIN (27/09/2026) ══════════════════════════════════════════════════
   Decisão do Biel em 27/09/2026: o visual parte de hoje. Referência: a simulação aprovada
   (docs/superpowers/mockups/2026-09-27-visao-geral-simulacao.html) e os dashboards escuros
   que ele anexou. Sem a identidade nem as cores da Aprenda e Cresça. Plano:
   docs/superpowers/plans/2026-09-27-pele-nova-do-painel.md.

   Vale só para o ADMIN (`data-area="admin"`, carimbado por estado.js). O painel que os
   CLIENTES veem continua com a pele dele até a etapa 9, que o Biel confirma antes.

   DOIS TEMAS desde 30/09/2026 (pedido do Biel: "o beta não tem versão fundo claro?"). O botão
   de tema do cabeçalho vale no admin como no resto: sistema → claro → escuro. O bloco CLARO é
   a base; o ESCURO vence por `prefers-color-scheme` (quando a pessoa não escolheu claro) ou
   por `data-tema="escuro"` — o mesmo par de regras do painel antigo, logo acima.

   A MOLDURA (menu lateral, barra de baixo, toast, chips escuros) continua escura nos dois
   temas, de propósito e como sempre foi: todo texto em cima dela é `--moldura-texto` ou
   `--sobre-preenchimento`, e não muda de cor com o tema. Painel flutuante (caixa de entrada,
   dia do Diário) NÃO é moldura: usa `--superficie`, que acompanha o tema.

   Contraste, medido (scratchpad/contraste.js; regra: texto ≥ 4,5:1 nas TRÊS superfícies):
   CLARO — pior caso --superficie-2 #f1f3f5: --texto-5 5,61 · --acento-texto 6,02 ·
   --ok-texto 6,41 · --atencao-texto 6,16 · --erro-texto 5,82. Branco sobre preenchimento:
   --acento 5,17 · --ok 5,02 · --erro 4,83 · --destaque 6,98 · --atencao 4,92.
   ESCURO — pior caso --superficie-2 #1a1c20: --texto-5 5,11. Branco sobre preenchimento:
   --acento 5,17 · --ok 5,02 · --erro 4,83 · --destaque 5,38.
   Séries validadas pelo dataviz (ordem fixa; verde↔laranja na faixa de alerta de daltonismo
   nos dois temas, então nunca sem rótulo): claro contra #ffffff, escuro contra #141518. */
:root[data-area="admin"]{
  color-scheme: light;
  --fundo:#f5f5f7;
  --superficie:#ffffff;
  --superficie-2:#f7f8fa;
  --linha:#e5e5ea;
  --linha-suave:#f0f0f3;

  --texto:#1d1d1f;
  --texto-2:#3a3a3c;
  --texto-3:#525761;
  --texto-4:#62666f;
  --texto-5:#6b707a;

  --acento:#0071e3;
  --acento-texto:#0066cc;
  --acento-forte:#0058b9;
  --ok:#15803d;
  --ok-texto:#187a49;
  --atencao:#a16207;
  --atencao-texto:#946200;
  --erro:#dc2626;
  --erro-texto:#c72c38;
  --destaque:#7e22ce;
  --rosa:#be185d;

  --serie-1:#0071e3;
  --serie-2:#c2410c;
  --serie-3:#15803d;
  --serie-4:#7e22ce;
  --serie-5:#a16207;
  --sobre-preenchimento:#ffffff;
  --sobre-serie:#ffffff;

  --vidro:rgba(250,250,252,.91);

  --moldura:#0f1013;
  --moldura-2:#1a1c20;
  --moldura-3:#202329;
  --moldura-linha:#24262c;
  --moldura-texto:#f2f3f5;
  --moldura-texto-2:#a7abb4;
  --moldura-ativo:#f2f3f5;
  --tinta-topo:#0b0c0e;
  --ciano:#16a34a;

  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:20px;
  --font:'Inter',-apple-system,system-ui,'Helvetica Neue',sans-serif;

  /* Pele Apple (20/10/2026, aprovada pelo revisor em 9,2/10 · interações 9,1): tokens NOVOS.
     --marca-*: cor de MARCA GRÁFICA (arco, barra, ponto) — não é texto, por isso não entra na
     régua de 4,5:1; o texto que diz o mesmo status usa --ok-texto/--atencao-texto/--erro-texto.
     --lateral-*: o menu lateral. No claro é a barra clara e translúcida do macOS; no escuro
     volta a ser a moldura de sempre (blocos escuros abaixo). */
  --marca-ok:#2e9e5b;
  --marca-atencao:#e0a100;
  --marca-erro:#e5484d;
  --marca-trilha:#e9ebf0;
  --marca-antes:#6e7581;
  --fundo-ok:#eaf7ef;
  --fundo-atencao:#fff4de;
  --fundo-erro:#fcebed;
  --fundo-selecao:#eaf3ff;
  --controle-linha:#dee0e5;
  --controle-fundo:#e9eaef;
  --lateral:rgba(241,242,246,.91);
  --lateral-linha:#dde0e6;
  --lateral-texto:#1d1d1f;
  --lateral-texto-2:#6b707a;
  --lateral-icone:#0071e3;
  --lateral-hover:rgba(0,0,0,.045);
  --lateral-ativo:rgba(255,255,255,.85);
  --sombra-cartao:0 2px 10px rgba(28,31,38,.035);
  --raio-cartao:18px;
  --raio-controle:10px;
  --curva-sistema:cubic-bezier(.2,.8,.2,1);
}
/* O ESCURO do admin, idêntico nos dois gatilhos — mudou um, muda o outro
   (test/tema-admin.test.js confere que os dois blocos são iguais). */
@media (prefers-color-scheme: dark){
  :root[data-area="admin"]:not([data-tema="claro"]){
  color-scheme: dark;
  --fundo:#0b0c0e;
  --superficie:#141518;
  --superficie-2:#1a1c20;
  --linha:#24262c;
  --linha-suave:#1d1f24;
  --texto:#f2f3f5;
  --texto-2:#d4d7dd;
  --texto-3:#a7abb4;
  --texto-4:#9aa0aa;
  --texto-5:#878d98;
  --acento:#2563eb;
  --acento-texto:#60a5fa;
  --acento-forte:#3b82f6;
  --ok:#15803d;
  --ok-texto:#4ade80;
  --atencao:#b7800a;
  --atencao-texto:#fbbf24;
  --erro:#dc2626;
  --erro-texto:#f87171;
  --destaque:#9333ea;
  --rosa:#f472b6;
  --serie-1:#3b82f6;
  --serie-2:#ea580c;
  --serie-3:#16a34a;
  --serie-4:#a855f7;
  --serie-5:#b7800a;
  --sobre-serie:#0b0c0e;
  --vidro:rgba(11,12,14,.85);
  --marca-ok:#16a34a;
  --marca-atencao:#b7800a;
  --marca-erro:#ef4444;
  --marca-trilha:#24262c;
  --marca-antes:#a7abb4;
  --fundo-ok:rgba(22,163,74,.16);
  --fundo-atencao:rgba(183,128,10,.18);
  --fundo-erro:rgba(220,38,38,.18);
  --fundo-selecao:rgba(37,99,235,.18);
  --controle-linha:#2b2e35;
  --controle-fundo:#1d1f24;
  --lateral:#0f1013;
  --lateral-linha:#24262c;
  --lateral-texto:#f2f3f5;
  --lateral-texto-2:#a7abb4;
  --lateral-icone:#60a5fa;
  --lateral-hover:#1a1c20;
  --lateral-ativo:#202329;
  }
}
:root[data-area="admin"][data-tema="escuro"]{
  color-scheme: dark;
  --fundo:#0b0c0e;
  --superficie:#141518;
  --superficie-2:#1a1c20;
  --linha:#24262c;
  --linha-suave:#1d1f24;
  --texto:#f2f3f5;
  --texto-2:#d4d7dd;
  --texto-3:#a7abb4;
  --texto-4:#9aa0aa;
  --texto-5:#878d98;
  --acento:#2563eb;
  --acento-texto:#60a5fa;
  --acento-forte:#3b82f6;
  --ok:#15803d;
  --ok-texto:#4ade80;
  --atencao:#b7800a;
  --atencao-texto:#fbbf24;
  --erro:#dc2626;
  --erro-texto:#f87171;
  --destaque:#9333ea;
  --rosa:#f472b6;
  --serie-1:#3b82f6;
  --serie-2:#ea580c;
  --serie-3:#16a34a;
  --serie-4:#a855f7;
  --serie-5:#b7800a;
  --sobre-serie:#0b0c0e;
  --vidro:rgba(11,12,14,.85);
  --marca-ok:#16a34a;
  --marca-atencao:#b7800a;
  --marca-erro:#ef4444;
  --marca-trilha:#24262c;
  --marca-antes:#a7abb4;
  --fundo-ok:rgba(22,163,74,.16);
  --fundo-atencao:rgba(183,128,10,.18);
  --fundo-erro:rgba(220,38,38,.18);
  --fundo-selecao:rgba(37,99,235,.18);
  --controle-linha:#2b2e35;
  --controle-fundo:#1d1f24;
  --lateral:#0f1013;
  --lateral-linha:#24262c;
  --lateral-texto:#f2f3f5;
  --lateral-texto-2:#a7abb4;
  --lateral-icone:#60a5fa;
  --lateral-hover:#1a1c20;
  --lateral-ativo:#202329;
}