/* =====================================================================
   MARCA — a paleta e a forma que o site e o app compartilham
   =====================================================================
   Decisão do dono em 06/09/2026: "Sim, unificar". Até aqui, cada uma das
   sete páginas com `<style>` próprio declarava a sua paleta, e o app
   declarava a dele em `app.css`. Os valores não divergiam — havia trava
   para isso — mas o VOCABULÁRIO divergia, e é essa a duplicação que
   apodrece: a mesma cor com dois nomes deixa alguém mudar um e esquecer o
   outro. Foi exatamente assim que a home passou a usar `--muted` sem o
   declarar.

   Medido antes de escrever (06/09/2026, em `9b54755`): 9 valores tinham
   mais de um nome no projeto — `#32302F` era `--tinta` e `--ink`,
   `#6E6763` era `--muted` e `--tinta-2`, `#E4DED4` era `--rule` e
   `--linha`, `#F4F1EC` era `--paper`, `--fundo-2` E `--areia`.

   O NOME QUE FICOU FOI O MAIS USADO, contado e não escolhido por gosto —
   `--muted` (108 usos) sobre `--tinta-2` (50), `--tinta` (49) sobre
   `--ink` (15), `--paper` (13) sobre `--fundo-2` (7) e `--areia` (2). O
   resultado é um vocabulário misto, metade em português e metade em
   inglês, e isso é uma escolha consciente: alinhar a língua custaria
   renomear 108 usos de `--muted` em `app.js`, e a troca é reversível por
   um `sed` com teste, enquanto um erro de valor não é.

   DUAS COISAS QUE DELIBERADAMENTE NÃO ESTÃO AQUI, e as duas são armadilha
   para quem vier "terminar" a unificação:

   1. `--raio`. Ele vale 14px na home e 12px no app, e a diferença é
      DELIBERADA — está escrita em `app.css` desde 04/09/2026: o cartão do
      app é menor e mais denso, e 14px nele fica inchado. É a única
      divergência de valor entre tokens de mesmo nome no projeto. Trazê-lo
      para cá colapsaria os dois num só e mudaria a interface inteira sem
      ninguém pedir.

   2. A família do cabeçalho escuro (`--ink-texto`, `--ink-fio`,
      `--papel-escuro`, `--verde-claro`, `--ocre-claro`,
      `--vermelho-claro`). Alguns deles têm o MESMO valor que tokens daqui
      — `--ink-texto` é `#FFFFFF` como o `--fundo` — e ainda assim NÃO são
      sinônimos: contraste é relação, então sobre fundo escuro os tons são
      outros, e o nome carrega a relação, não a cor. Unificar por valor os
      fundiria e a semântica sumiria no primeiro tema escuro.

   A SEPARAÇÃO ENTRE `--acento` E AS CORES SEMÂNTICAS continua valendo e
   vem do `app.css`: `--acento` é INTERAÇÃO (link, foco, botão, aba ativa)
   e o verde é SEMÂNTICA de "tudo certo". Os dois já foram a mesma cor, e
   era por isso que a interface parecia estar sempre dizendo "ok". As
   semânticas ficam no `app.css` porque só o app as usa hoje; se o site
   passar a usá-las, elas sobem para cá — e o teste que guarda esta folha
   acusa a duplicação no dia em que alguém as copiar.

   DUAS GUARDAS QUE PARECEM UMA SÓ, E NÃO SÃO — observação da frente Leitura
   por IA ao revisar esta mudança, e ela fica escrita porque é fácil achar que
   a primeira cobre a segunda:

   - que NÃO se renomeie o que não devia. É o que impede `--ink` de comer
     `--ink-texto` numa substituição por prefixo. Guardada por um controle que
     exige que a família do cabeçalho escuro continue existindo depois de
     qualquer troca de nome.
   - que todo nome AINDA USADO continue tendo definição. Órfão não quebra: o
     `var()` cai no valor herdado, calado, e cor com SIGNIFICADO — verde de
     conferido, vermelho de erro — vira cor qualquer. Guardada pelas varreduras
     de `teste/app-cor-por-token.js` e `teste/site-contrato.js`.

   A segunda não é teórica: na primeira versão desta folha o `--vermelho` ficou
   só no `app.css`, e as páginas de assinatura, que não ligam aquela folha,
   passaram a pintar o texto de ERRO com a cor herdada. O portão acusou. Por
   isso o `--vermelho` está aqui.

   COMO ELA CHEGA ÀS PÁGINAS: o servidor serve `publico/` na raiz, então
   `/marca.css` vale tanto para as páginas do app quanto para as do site,
   que saem de `site/` mas na MESMA origem. Não foi preciso mexer no mapa
   de caminhos do servidor, que é de outra frente.
   ===================================================================== */
:root{
  /* tinta */
  --tinta:#17243A;
  --tinta-hover:#283650;
  --muted:#5D6B80;

  /* fundo */
  --fundo:#FFFFFF;
  --paper:#F4F7FB;
  /* o fundo mais leve que o `--paper`, para zebrado de tabela e caixa
     neutra. Ele existe como TOKEN de propósito, e não cravado: quando foi
     criado, o `app.css` tinha 17 sítios de cor quase-branca fora do `:root`
     — 6 das duas cores que uma busca por VALOR achava, e 11 de outras seis
     que só uma varredura por PROPRIEDADE acha. Todas tinham sobrevivido a
     uma migração de paleta inteira pela mesma razão mecânica: **token
     trocado não alcança cor que não passa por token.** Cravar a cor certa
     repetiria o defeito com o valor bonito. */
  --paper-suave:#EDF2F8;
  --rule:#DCE4EE;
  --rule-strong:#B8C5D5;

  /* interação — NUNCA semântica, ver o cabeçalho */
  --acento:#7157D9;
  --acento-esc:#5C43C5;
  --acento-soft:#EEEAFD;
  --acao:#7157D9;
  --acao-hover:#5C43C5;
  --acao-texto:#FFFFFF;
  --texto-inverso:#FFFFFF;
  --marca-turquesa:#22B99A;

  /* ocre: atenção e moeda estrangeira. O `-esc` existe porque `--ocre`
     sobre `--ocre-soft` dava 3,35 contra um piso de 4,5 — era a única das
     cinco variantes de etiqueta que reprovava. Este dá 5,90 e cai dentro
     da faixa das irmãs (5,60 / 5,85 / 6,12 / 4,93). */
  --ocre:#9A7019;
  --ocre-soft:#F7EFD9;
  --ocre-esc:#6F5010;

  /* forma. `--raio` NÃO está aqui, de propósito — ver o cabeçalho. */
  --pilula:100px;          /* botão */

  /* SEMANTICA DE ERRO. Ela subiu para cá no mesmo dia em que esta folha
     nasceu, e não por gosto: as páginas de assinatura (`assinar.html` e
     `assinar-plano.html`) usam `.erro{color:var(--vermelho)}` e NÃO ligam o
     `app.css`. Quem apontou foi o portão, ao acusar as duas usando um token
     que nenhuma folha delas declarava — que é exatamente o caso previsto no
     cabeçalho: semântica que deixa de ser só do app sobe, não se copia.
     O resto da família de erro (`--vermelho-soft`, `--vermelho-fio`) fica no
     `app.css` enquanto só o app a usar. */
  --vermelho:#A63D42;

  /* tipografia */
  --display:'Libre Caslon Display',Georgia,'Times New Roman',serif;
}

html[data-tema="noturno"]{
  color-scheme:dark;
  --tinta:#EEF3FF;
  --tinta-hover:#FFFFFF;
  --muted:#9CABC1;
  --fundo:#152235;
  --paper:#0F1827;
  --paper-suave:#1B2A40;
  --rule:#2B3A50;
  --rule-strong:#475A76;
  --acento:#9A7CF2;
  --acento-esc:#C2B2FF;
  --acento-soft:#2C2748;
  --acao:#7355D8;
  --acao-hover:#6F52D4;
  --acao-texto:#FFFFFF;
  --texto-inverso:#FFFFFF;
  --marca-turquesa:#66DFC0;
  --ocre:#F0BF59;
  --ocre-soft:#44371E;
  --ocre-esc:#F5D58C;
  --vermelho:#FF9A91;
}

/* Um único controle acompanha a pessoa em todas as páginas. */
.seletorTema{display:inline-grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:var(--paper-suave);border:1px solid var(--rule);border-radius:var(--pilula);font-family:'Jost','Segoe UI',system-ui,sans-serif;line-height:1;flex:none}
.seletorTema button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:6px 10px;border:0;border-radius:var(--pilula);background:transparent;color:var(--muted);font:inherit;font-size:11.5px;cursor:pointer;white-space:nowrap}
.seletorTema button:hover{color:var(--tinta)}
.seletorTema button.ativo{background:var(--fundo);color:var(--tinta);box-shadow:0 1px 4px rgba(11,20,35,.14)}
.seletorTema button:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
.seletorTemaPublico{margin-left:auto}
html body .btn{background:var(--acao);color:var(--acao-texto)}
html body .btn:hover{background:var(--acao-hover)}
.seletorTemaFlutuante{position:fixed;top:14px;right:14px;z-index:300}
@media(max-width:620px){.seletorTema button span:last-child{display:none}.seletorTema button{width:40px;min-height:40px;padding:6px}.seletorTemaPublico{margin-left:auto}}