/* ==========================================================================
   moneytalks -- tokens visuais
   ==========================================================================

   Esta e a **unica** casa dos tokens: nao ha copia em Python, nem tabela
   paralela em teste. `tests/test_tokens.py` le este arquivo e afirma sobre ele.

   A autoridade sobre os valores e o frontmatter de
   `_bmad-output/planning-artifacts/ux-designs/ux-moneytalks-2026-08-13/DESIGN.md`.
   Divergir dele e erro, nao escolha de implementacao.

   ---------------------------------------------------------------------------
   A identidade de 16-09-2026: "Grafite" no claro, "Painel escuro" no escuro
   ---------------------------------------------------------------------------
   A primeira identidade copiava a referencia PolicyPilot -- cantos de 8 a 20px,
   gradiente, sombra difusa, azul vivo. O operador a recusou por inteiro e
   escolheu, entre tres direcoes renderizadas lado a lado, uma mais minimalista:
   a "A" para o claro e a "B" para o escuro. O que as duas tem em comum e o que
   este arquivo fixa:

     - **Canto reto em todo lugar.** Todo `--raio-*` vale `0`, inclusive o
       `--raio-full` da antiga pilula. Os tokens continuam existindo porque
       `casca.css` os consome em trinta pontos; zera-los aqui e o que garante
       que nenhum deles volte a arredondar sem que alguem edite este arquivo.
     - **Linha no lugar de sombra.** A separacao vem da borda de 1px e da
       diferenca entre canvas e cartao; `--elevacao-cartao` vale `none`.
     - **Uma cor de acao so.** Azul-tinta (`#1D3FBF`) no claro; no escuro a acao
       e o proprio cinza-claro da tinta, e a cor que aparece e a de estado.
     - **Sem gradiente.** O cartao-destaque era o unico bloco cromatico, e saiu
       da Fila em 19-09-2026. Os tres `--cor-destaque-*` ficam **sem consumidor
       na folha** de proposito: eles espelham as chaves `feature-*` do
       `DESIGN.md`, e `tests/test_tokens.py::CORES_DO_DESIGN` cobra cada uma
       delas aqui. Apaga-los pede tirar o bloco do `DESIGN.md` junto.

   A paleta escura deixou de ser derivada pelo designer: ela e escolha do
   operador, e a marcacao de revisao que a acompanhava saiu junto.

   ---------------------------------------------------------------------------
   Tres camadas, nesta ordem, e a ordem e o mecanismo
   ---------------------------------------------------------------------------
     1. `:root`                       -- o tema claro, o piso.
     2. `prefers-color-scheme: dark`  -- o escuro do dispositivo, **exceto**
                                         quando o operador escolheu claro.
     3. `html:root[data-tema="escuro"]` -- a escolha explicita, que vence.

   O `:not([data-tema="claro"])` da camada 2 e o que dispensa `!important`: sem
   ele, escolher `claro` num aparelho em modo escuro nao teria efeito nenhum,
   porque a media query viria depois na cascata.

   O `html:root` da camada 3 e por especificidade, e nao por estilo: a camada 2
   soma (0,2,0) e um `[data-tema="escuro"]` cru somaria (0,1,0) -- perderia para
   ela num aparelho em modo escuro, que e exatamente onde a escolha explicita
   mais precisa valer.

   O atributo `data-tema` e escrito no `<html>` pelo servidor (`web/tema.py`),
   antes do primeiro byte -- entao nao existe o flash de tema errado que todo
   alternador feito no cliente tem, e nada aqui depende de JavaScript.

   ---------------------------------------------------------------------------
   Contraste: WCAG 2.2 AA, medido e nao suposto
   ---------------------------------------------------------------------------
   `tests/test_contraste.py` calcula a razao de contraste de todo par que a UI
   de fato pinta -- texto sobre superficie (>= 4.5:1) e limite de componente
   (>= 3:1) -- nos dois temas.

   A paleta de 16-09-2026 foi escolhida ja passando: nenhum valor diverge do
   `DESIGN.md` por AA, ao contrario da anterior, que precisou de tres
   escurecimentos. A escada de tres tokens por estado continua -- `tint` e o
   fundo do badge, a cor cheia e o **ponto** (>= 3:1), o `-forte` e o **rotulo**
   (>= 4,5:1) --, e hoje cada `-forte` e igual a sua cor cheia, com duas
   excecoes: `inalcancada` nos dois temas, cujo ponto e apagado de proposito, e
   `reaproveitada` no claro. A escada fica porque os componentes ja a consomem.

   `--cor-borda-campo` continua separada de `--cor-borda`: 1.4.11 governa o
   limite de um campo de formulario (>= 3:1) e nao governa uma borda decorativa
   de cartao.

   ---------------------------------------------------------------------------
   A familia: IBM Plex, servida daqui
   ---------------------------------------------------------------------------
   IBM Plex Sans para o texto e IBM Plex Mono para numeral. Os arquivos moram em
   `web/static/fonts/` (subconjunto Latin-1, que cobre o portugues) com a
   licenca OFL ao lado, e o `@font-face` esta em `base.css`. Servidos pelo
   proprio produto, e nunca buscados em host externo: o Google Fonts contaria a
   um terceiro toda vez que o operador abre a propria ferramenta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Camada 1 -- tema claro (o piso): "Grafite"
   -------------------------------------------------------------------------- */
:root {
  /* Superficie e texto. O canvas e um branco quebrado so o bastante para o
     cartao branco ter de que se destacar -- a sombra saiu, e quem separa agora
     e a borda mais esta diferenca. */
  --cor-fundo: #F7F7F5;
  --cor-texto: #141517;
  --cor-cartao: #FFFFFF;
  --cor-cartao-texto: #141517;
  --cor-suave: #F0F1F2;
  --cor-suave-texto: #5B6069;
  --cor-borda: #E4E6E8;
  /* 3,42:1 sobre o cartao -- o limite de campo que 1.4.11 exige. */
  --cor-borda-campo: #868B94;

  /* Acao. Reservada: botao primario, item de navegacao ativo, etapa em
     execucao. Quando o azul aparece, ele significa "aqui e onde se age" ou
     "isto esta acontecendo agora" -- nunca decora cromo ou fundo de secao. */
  --cor-primaria: #1D3FBF;
  --cor-primaria-texto: #FFFFFF;

  /* Anel de foco. Visivel contra o fundo nos dois temas -- WCAG 2.2 AA. */
  --cor-anel: #1D3FBF;

  /* Link nu -- a rede embaixo do primeiro `<a>` escrito sem classe. O azul de
     acao ja da 7,78:1 sobre o canvas, entao o link e ele. */
  --cor-link: #1D3FBF;

  /* Item de navegacao ativo: a cor de acao informando onde o operador esta.
     7,27:1 sobre o proprio tint. */
  --cor-item-ativo: #1D3FBF;
  --cor-item-ativo-tint: #ECEFFA;

  /* Cartao-destaque: o bloco cromatico do `DESIGN.md` (`feature-*`). **Sem
     consumidor e sem medicao desde 19-09-2026**, quando a tira da Fila saiu:
     nenhuma folha o pinta e `tests/test_contraste.py` deixou de medi-lo. Fica
     so porque `tests/test_tokens.py` o prende ao `DESIGN.md` -- ver o
     cabecalho. */
  --cor-destaque-de: #1D3FBF;
  --cor-destaque-ate: #1D3FBF;
  --cor-destaque-texto: #FFFFFF;

  /* Estado semantico: tint de fundo, cor cheia no texto e no ponto. */
  --cor-sucesso: #17693F;
  --cor-sucesso-forte: #17693F;
  --cor-sucesso-tint: #E9F3EC;
  --cor-aviso: #8F5A0A;
  --cor-aviso-forte: #8F5A0A;
  --cor-aviso-tint: #FBF3E6;
  --cor-erro: #B3261E;
  --cor-erro-forte: #B3261E;
  --cor-erro-tint: #FBECEA;
  --cor-info-tint: #ECEFFA;

  /* Estados de pipeline -- vocabulario proprio do moneytalks.
     `--cor-etapa-reaproveitada` e CINZA de proposito: marca a etapa que uma
     retomada reaproveitou em vez de refazer (CAP-10), e e a prova visual de que
     a API nao foi paga duas vezes. Verde ali diria "executei de novo com
     sucesso", que e exatamente a mentira a evitar. */
  --cor-etapa-executando: #1D3FBF;
  --cor-etapa-executando-forte: #1D3FBF;
  --cor-etapa-executando-tint: #ECEFFA;
  --cor-etapa-concluida: #17693F;
  --cor-etapa-concluida-forte: #17693F;
  --cor-etapa-concluida-tint: #E9F3EC;
  --cor-etapa-reaproveitada: #6B7079;
  /* Continua cinza -- ver o teste que recusa matiz aqui. */
  --cor-etapa-reaproveitada-forte: #5B6069;
  --cor-etapa-reaproveitada-tint: #F0F1F2;
  /* Etapa que a falha tornou inalcancavel nao e "pendente" -- e interrompida, e
     precisa parecer apagada, nao em espera. E o cinza mais claro da escala.

     O **ponto** deste estado e o unico do sistema que fica abaixo de 3:1 sobre
     o proprio tint (1,85:1), e fica de proposito: 1.4.11 nao governa indicador
     redundante, e o rotulo textual acompanha todo estado por contrato de
     acessibilidade da espinha. Quem precisa ser legivel e o rotulo, e para ele
     existe o `-forte` (5,04:1). */
  --cor-etapa-inalcancada: #B4B9C1;
  --cor-etapa-inalcancada-forte: #646B78;
  --cor-etapa-inalcancada-tint: #F7F8F9;

  /* Elevacao: nenhuma. O token continua existindo porque `base.css` e
     `casca.css` o consomem e a paridade entre temas o exige; o valor diz que a
     separacao entre superficies e trabalho da borda. */
  --elevacao-cartao: none;

  /* O veu por tras do `Sheet` de celular.

     **Fora de `tests/test_contraste.py`, de proposito.** Ele nao e um par
     frente/fundo: e uma camada translucida sobre conteudo arbitrario, e razao
     de contraste nao se aplica. A notacao tambem e a moderna (`rgb(... / %)`),
     que o `_luminancia` daquele arquivo nao le. */
  --cor-veu: rgb(20 21 23 / 45%);
}

/* --------------------------------------------------------------------------
   Camada 2 -- o escuro do dispositivo, exceto quando o operador escolheu
   claro: "Painel escuro"

   ATENCAO: este bloco tem um gemeo identico logo abaixo (camada 3). Os dois sao
   o mesmo tema e a cascata exige os dois; alterar um sem o outro produz uma
   divergencia que o operador que escolheu `escuro` nunca ve, ou que so ele ve.
   `tests/test_tokens.py::test_as_duas_camadas_escuras_declaram_a_mesma_coisa`
   e o que impede isso.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-fundo: #0B0C0E;
    --cor-texto: #E8EAED;
    --cor-cartao: #121418;
    --cor-cartao-texto: #E8EAED;
    --cor-suave: #1B1E23;
    --cor-suave-texto: #8D939C;
    --cor-borda: #23262B;
    /* 3,14:1 sobre o cartao -- o limite de campo que 1.4.11 exige. */
    --cor-borda-campo: #5E6570;

    /* No escuro a acao nao tem matiz: e o cinza-claro da tinta, cheio, com
       texto quase preto por cima. A cor fica toda para o estado. */
    --cor-primaria: #D9DDE3;
    --cor-primaria-texto: #0B0C0E;

    --cor-anel: #D9DDE3;

    /* O link e a excecao ao "acao sem matiz": um link cinza-claro no meio de
       texto cinza-claro nao se distingue do texto. E o azul de execucao,
       8,16:1 sobre o canvas. */
    --cor-link: #7FA8F0;

    --cor-item-ativo: #D9DDE3;
    --cor-item-ativo-tint: #1B1E23;

    /* Sem consumidor e sem medicao -- ver o tema claro. */
    --cor-destaque-de: #1E2A4A;
    --cor-destaque-ate: #1E2A4A;
    --cor-destaque-texto: #FFFFFF;

    --cor-sucesso: #5CC08A;
    --cor-sucesso-forte: #5CC08A;
    --cor-sucesso-tint: #15261D;
    --cor-aviso: #E0A038;
    --cor-aviso-forte: #E0A038;
    --cor-aviso-tint: #2A2013;
    --cor-erro: #F07A6E;
    --cor-erro-forte: #F07A6E;
    --cor-erro-tint: #2C1714;
    --cor-info-tint: #172033;

    /* A excecao da escada e `inalcancada`: o ponto da 2,21:1, apagado de
       proposito, e o `-forte` clareia so o bastante para o rotulo (4,94:1). */
    --cor-etapa-executando: #7FA8F0;
    --cor-etapa-executando-forte: #7FA8F0;
    --cor-etapa-executando-tint: #172033;
    --cor-etapa-concluida: #5CC08A;
    --cor-etapa-concluida-forte: #5CC08A;
    --cor-etapa-concluida-tint: #15261D;
    --cor-etapa-reaproveitada: #8D939C;
    --cor-etapa-reaproveitada-forte: #8D939C;
    --cor-etapa-reaproveitada-tint: #1B1E23;
    --cor-etapa-inalcancada: #4A505A;
    --cor-etapa-inalcancada-forte: #7E8795;
    --cor-etapa-inalcancada-tint: #15171B;

    --elevacao-cartao: none;

    /* Mais opaco no escuro: sobre um canvas ja escuro, 45% nao separa o painel
       do que ficou atras dele. */
    --cor-veu: rgb(0 0 0 / 62%);
  }
}

/* --------------------------------------------------------------------------
   Camada 3 -- a escolha explicita do operador, que vence o dispositivo

   Gemeo do bloco acima; ver a nota de atencao la. O seletor e `html:root[...]`
   por especificidade -- ver o cabecalho.
   -------------------------------------------------------------------------- */
html:root[data-tema="escuro"] {
  --cor-fundo: #0B0C0E;
  --cor-texto: #E8EAED;
  --cor-cartao: #121418;
  --cor-cartao-texto: #E8EAED;
  --cor-suave: #1B1E23;
  --cor-suave-texto: #8D939C;
  --cor-borda: #23262B;
  /* 3,14:1 sobre o cartao -- o limite de campo que 1.4.11 exige. */
  --cor-borda-campo: #5E6570;

  /* No escuro a acao nao tem matiz: e o cinza-claro da tinta, cheio, com
     texto quase preto por cima. A cor fica toda para o estado. */
  --cor-primaria: #D9DDE3;
  --cor-primaria-texto: #0B0C0E;

  --cor-anel: #D9DDE3;

  /* O link e a excecao ao "acao sem matiz": um link cinza-claro no meio de
     texto cinza-claro nao se distingue do texto. E o azul de execucao,
     8,16:1 sobre o canvas. */
  --cor-link: #7FA8F0;

  --cor-item-ativo: #D9DDE3;
  --cor-item-ativo-tint: #1B1E23;

  /* Sem consumidor e sem medicao -- ver o tema claro. */
  --cor-destaque-de: #1E2A4A;
  --cor-destaque-ate: #1E2A4A;
  --cor-destaque-texto: #FFFFFF;

  --cor-sucesso: #5CC08A;
  --cor-sucesso-forte: #5CC08A;
  --cor-sucesso-tint: #15261D;
  --cor-aviso: #E0A038;
  --cor-aviso-forte: #E0A038;
  --cor-aviso-tint: #2A2013;
  --cor-erro: #F07A6E;
  --cor-erro-forte: #F07A6E;
  --cor-erro-tint: #2C1714;
  --cor-info-tint: #172033;

  /* A excecao da escada e `inalcancada`: o ponto da 2,21:1, apagado de
     proposito, e o `-forte` clareia so o bastante para o rotulo (4,94:1). */
  --cor-etapa-executando: #7FA8F0;
  --cor-etapa-executando-forte: #7FA8F0;
  --cor-etapa-executando-tint: #172033;
  --cor-etapa-concluida: #5CC08A;
  --cor-etapa-concluida-forte: #5CC08A;
  --cor-etapa-concluida-tint: #15261D;
  --cor-etapa-reaproveitada: #8D939C;
  --cor-etapa-reaproveitada-forte: #8D939C;
  --cor-etapa-reaproveitada-tint: #1B1E23;
  --cor-etapa-inalcancada: #4A505A;
  --cor-etapa-inalcancada-forte: #7E8795;
  --cor-etapa-inalcancada-tint: #15171B;

  --elevacao-cartao: none;

  /* Mais opaco no escuro: sobre um canvas ja escuro, 45% nao separa o painel
     do que ficou atras dele. */
  --cor-veu: rgb(0 0 0 / 62%);
}

/* --------------------------------------------------------------------------
   Forma, espaco e tipografia -- iguais nos dois temas, por isso fora das
   camadas acima. Um raio nao muda com a luz do ambiente.
   -------------------------------------------------------------------------- */
:root {
  /* Canto reto, sem excecao -- decisao do operador em 16-09-2026. A escala
     continua nomeada porque os consumidores a nomeiam; o valor e o mesmo em
     todos os degraus, e um degrau que volte a arredondar e violacao. */
  --raio-sm: 0;
  --raio-md: 0;
  --raio-lg: 0;
  --raio-xl: 0;
  /* A antiga pilula (badge, contador, ponto do badge).
     Tambem reta: o ponto do badge vira um quadrado. */
  --raio-full: 0;

  /* Os 24px do cartao **nao encolhem** para ganhar densidade: se o conteudo
     nao cabe, o cartao cresce ou o conteudo se divide. */
  --espaco-cartao: 24px;
  --espaco-entre-cartoes: 16px;
  --espaco-entre-secoes: 32px;
  /* Medida de texto para ler inteiro, nao de rotulo de interface. E o papel
     `prose` que a habita: a justificativa da IA. */
  --medida-de-leitura: 68ch;

  /* Alvo de toque minimo -- restricao declarada da espinha de experiencia, e
     nao preferencia de folha. Quem acrescentar um controle novo herda o valor
     em vez de redescobri-lo. */
  --alvo-de-toque: 44px;

  /* IBM Plex, servida de `web/static/fonts/` -- ver o cabecalho. O resto da
     pilha e a rede para o instante antes de o arquivo chegar. */
  --fonte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Numeral: digitos de desenho tecnico, para contagem e tempo lerem como
     medida e nao como manchete. */
  --fonte-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Os sete papeis. Titulo de superficie, um por tela. A Plex ja nasce
     firme, e o tracking negativo da familia anterior a espremeria. */
  --texto-display-tamanho: 28px;
  --texto-display-peso: 600;
  --texto-display-entrelinha: 1.2;
  --texto-display-espacamento: -0.01em;

  /* Titulo de estado vazio, cabecalho de cartao grande. */
  --texto-display-sm-tamanho: 20px;
  --texto-display-sm-peso: 600;
  --texto-display-sm-entrelinha: 1.3;
  --texto-display-sm-espacamento: -0.005em;

  /* Numeral grande como display, em `--fonte-mono`. Factual, nunca KPI:
     clipes esperando aceite, clipes na fila, tempo decorrido de etapa. */
  --texto-numeral-tamanho: 28px;
  --texto-numeral-peso: 500;
  --texto-numeral-entrelinha: 1;
  --texto-numeral-espacamento: 0;

  /* A justificativa da IA. Unico bloco de leitura corrida do produto, e o papel
     que mais importa da lista. */
  --texto-prose-tamanho: 15px;
  --texto-prose-peso: 400;
  --texto-prose-entrelinha: 1.65;

  /* Texto de interface geral -- e o texto **integral** de um erro de etapa.
     Miniaturizar a mensagem devolveria o direito que CAP-11 comprou de
     diagnosticar sem abrir log no servidor. */
  --texto-body-tamanho: 14px;
  --texto-body-peso: 400;
  --texto-body-entrelinha: 1.5;

  /* Rotulos de campo, cabecalho de coluna, nome de etapa. */
  --texto-label-tamanho: 13px;
  --texto-label-peso: 500;
  --texto-label-entrelinha: 1.4;

  /* Badge, timestamp, tamanho de arquivo. */
  --texto-caption-tamanho: 12px;
  --texto-caption-peso: 400;
  --texto-caption-entrelinha: 1.4;
}