/* As tres aparencias da tela, e so elas. Areia e salvia e Grafite suave vieram
   com o redesenho visual (06/11/2026), no lugar das catorze paletas de
   paletas.css, da paleta personalizada e do botao claro/escuro; Cura Ecclesiae
   (as cores da logo) entrou em 07/11/2026 e e a padrao. No mesmo dia a escura,
   Noite azulada (C), saiu a pedido do dono.
   Specs: docs/superpowers/specs/2026-11-06-redesenho-visual-design.md e
   docs/superpowers/specs/2026-11-07-cura-ecclesiae-nome-e-marca-design.md

   ---------- A FORMA ----------
   Cada aparencia produz OS MESMOS tokens que o resto do CSS ja consumia das
   paletas (--fundo, --papel, --texto...). Por isso a troca repinta todas as
   telas sem mexer em regra nenhuma; o redesenho das telas vem depois, por
   cima destes tokens. testes/aparencias.test.js confere que nenhum falta.

   D (Cura Ecclesiae) e tambem o :root nu: quem nunca escolheu, ou cujo
   pre-pintor falhou, cai nela. Quem escolheu B quando ela era a padrao
   continua em B. Quem estava na C (que saiu) cai na D. O data-tema agora e
   sempre "claro" (quem escreve e js/aparencia-antes.js); as correcoes de
   escuro espalhadas pelo CSS ficaram, inertes.

   ---------- O QUE CADA UM E ----------
     fundo           a pagina (a mesa)
     papel           cartoes, tabelas, fichas (a superficie)
     superficie-2    o tom de dentro da superficie: cabecalho de tabela,
                     secao de formulario, seletor segmentado
     borda           toda borda
     texto / -suave  a tinta
     destaque        o botao principal, o item atual, a barra cheia
     destaque-tinta  o texto sobre o destaque
     destaque-claro  o fundo de um filtro ligado, uma etiqueta
     lateral*        a barra de navegacao a esquerda

   ---------- NADA DE BRANCO PURO ----------
   O dono: a tela clara "doi na vista quando acessado do computador". As tres
   sao tons medios.

   ---------- AS SITUACOES ----------
   --sit-X (a cor da spec antiga) NAO mora aqui e nao muda: e a cor do papel.
   Aqui moram so as variantes de TEXTO (--sit-X-texto), escurecidas nas duas
   primeiras ate 4,6:1 sobre a superficie mais escura — o ambar de Abandono da
   spec caia para 4,2 sobre a areia. A Cura Ecclesiae usa as mesmas de B
   (medidas: todas >= 4,72 sobre o creme dela). */

:root,
:root[data-aparencia="d"] {
  color-scheme: light;
  /* Cura Ecclesiae — a padrao, cores da logo */
  --fundo: #E9E1D4;
  --papel: #F3EDE3;
  --superficie-2: #EBE3D6;
  --realce: #EBE3D6;
  --secao-fundo: #EBE3D6;
  --borda: #D9CCB8;
  --borda-mesa: #D9CCB8;
  --texto: #1C241F;
  --texto-suave: #5F5749;
  --tinta-mesa: #1C241F;
  --tinta-mesa-suave: #5F5749;
  --cabecalho-fundo: #EBE3D6;
  --cabecalho-texto: #1C241F;
  --cabecalho-texto-suave: #5F5749;
  --destaque: #1F4A36;
  --destaque-tinta: #FBF6EC;
  --destaque-texto: #7A5612;
  --destaque-claro: #E6DCC4;
  --filete-marca: #B8892F;
  --lateral: #163828;
  --lateral-texto: #CFC4AA;
  --lateral-ativo: #21493A;
  --lateral-tinta: #F6EBD3;

  --veu-marca: color-mix(in srgb, #1F4A36 5%, transparent);
  --veu-marca-forte: color-mix(in srgb, #1F4A36 12%, transparent);
  --cabecalho-filete: color-mix(in srgb, var(--texto) 14%, transparent);
  --cabecalho-realce: color-mix(in srgb, var(--texto) 8%, transparent);
  --barra: color-mix(in srgb, var(--texto) 20%, transparent);
  --barra-viva: color-mix(in srgb, var(--texto) 38%, transparent);
  --panorama-trilho: color-mix(in srgb, var(--texto) 10%, transparent);
  --panorama-tinta: color-mix(in srgb, var(--destaque) 85%, transparent);
  --sombra: 0 1px 2px rgba(40, 30, 15, .08), 0 4px 14px -6px rgba(40, 30, 15, .14);
  --sombra-cabecalho: 0 1px 2px rgba(40, 30, 15, .10), 0 10px 20px -14px rgba(40, 30, 15, .30);
  --ordem-1: color-mix(in srgb, #1F4A36 11%, transparent);
  --ordem-2: color-mix(in srgb, #1F4A36 6%, transparent);
  --ordem-3: color-mix(in srgb, #1F4A36 3%, transparent);
  --aviso-fundo: #EFE3C8;
  --seta-lista: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.75 4.5 6 7.75 9.25 4.5' fill='none' stroke='%235F5749' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --sit-M-texto: #0E723A;   --sit-CDNM-texto: #0B6D74;
  --sit-N-texto: #55647A;   --sit-A-texto: #895900;
  --sit-SD-texto: #A04A08;  --sit-DI-texto: #6B3FA0;
  --sit-TR-texto: #1D5FA8;  --sit-E-texto: #A31515;
  --sit-FA-texto: #3F3F46;
  --ambar-texto: #885915;
}

:root[data-aparencia="b"] {
  color-scheme: light;
  /* Areia e salvia — a padrao ate 07/11/2026 */
  --fundo: #E5E1D9;
  --papel: #EFECE6;
  --superficie-2: #E8E4DC;
  --realce: #E8E4DC;
  --secao-fundo: #E8E4DC;
  --borda: #D6CFC3;
  --borda-mesa: #D6CFC3;
  --texto: #25231F;
  --texto-suave: #6A645A;
  --tinta-mesa: #25231F;
  --tinta-mesa-suave: #6A645A;
  --cabecalho-fundo: #E8E4DC;
  --cabecalho-texto: #25231F;
  --cabecalho-texto-suave: #6A645A;
  --destaque: #4B7662;
  --destaque-tinta: #FFFFFF;
  --destaque-texto: #436957;
  --destaque-claro: #D9E4DC;
  --filete-marca: #4B7662;
  --lateral: #2C2B27;
  --lateral-texto: #B5AFA3;
  --lateral-ativo: #3A3833;
  --lateral-tinta: #F3F1EC;

  --veu-marca: color-mix(in srgb, #4B7662 5%, transparent);
  --veu-marca-forte: color-mix(in srgb, #4B7662 12%, transparent);
  --cabecalho-filete: color-mix(in srgb, var(--texto) 14%, transparent);
  --cabecalho-realce: color-mix(in srgb, var(--texto) 8%, transparent);
  --barra: color-mix(in srgb, var(--texto) 20%, transparent);
  --barra-viva: color-mix(in srgb, var(--texto) 38%, transparent);
  --panorama-trilho: color-mix(in srgb, var(--texto) 10%, transparent);
  --panorama-tinta: color-mix(in srgb, var(--destaque) 85%, transparent);
  --sombra: 0 1px 2px rgba(60, 50, 35, .08), 0 4px 14px -6px rgba(60, 50, 35, .14);
  --sombra-cabecalho: 0 1px 2px rgba(60, 50, 35, .10), 0 10px 20px -14px rgba(60, 50, 35, .30);
  --ordem-1: color-mix(in srgb, #4B7662 11%, transparent);
  --ordem-2: color-mix(in srgb, #4B7662 6%, transparent);
  --ordem-3: color-mix(in srgb, #4B7662 3%, transparent);
  --aviso-fundo: #EFE3C8;
  --seta-lista: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.75 4.5 6 7.75 9.25 4.5' fill='none' stroke='%236A645A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --sit-M-texto: #0E723A;   --sit-CDNM-texto: #0B6D74;
  --sit-N-texto: #55647A;   --sit-A-texto: #895900;
  --sit-SD-texto: #A04A08;  --sit-DI-texto: #6B3FA0;
  --sit-TR-texto: #1D5FA8;  --sit-E-texto: #A31515;
  --sit-FA-texto: #3F3F46;
  --ambar-texto: #885915;
}

:root[data-aparencia="a"] {
  color-scheme: light;
  /* Grafite suave */
  --fundo: #E2E5E9;
  --papel: #EDEFF2;
  --superficie-2: #E6E9ED;
  --realce: #E6E9ED;
  --secao-fundo: #E6E9ED;
  --borda: #D2D7DD;
  --borda-mesa: #D2D7DD;
  --texto: #1E242B;
  --texto-suave: #5E6873;
  --tinta-mesa: #1E242B;
  --tinta-mesa-suave: #5E6873;
  --cabecalho-fundo: #E6E9ED;
  --cabecalho-texto: #1E242B;
  --cabecalho-texto-suave: #5E6873;
  --destaque: #3A6A8C;
  --destaque-tinta: #FFFFFF;
  --destaque-texto: #396889;
  --destaque-claro: #D6E2EB;
  --filete-marca: #3A6A8C;
  --lateral: #262B32;
  --lateral-texto: #AEB6C0;
  --lateral-ativo: #353C45;
  --lateral-tinta: #F3F1EC;

  --veu-marca: color-mix(in srgb, #3A6A8C 5%, transparent);
  --veu-marca-forte: color-mix(in srgb, #3A6A8C 12%, transparent);
  --cabecalho-filete: color-mix(in srgb, var(--texto) 14%, transparent);
  --cabecalho-realce: color-mix(in srgb, var(--texto) 8%, transparent);
  --barra: color-mix(in srgb, var(--texto) 20%, transparent);
  --barra-viva: color-mix(in srgb, var(--texto) 38%, transparent);
  --panorama-trilho: color-mix(in srgb, var(--texto) 10%, transparent);
  --panorama-tinta: color-mix(in srgb, var(--destaque) 85%, transparent);
  --sombra: 0 1px 2px rgba(30, 40, 55, .08), 0 4px 14px -6px rgba(30, 40, 55, .14);
  --sombra-cabecalho: 0 1px 2px rgba(30, 40, 55, .10), 0 10px 20px -14px rgba(30, 40, 55, .30);
  --ordem-1: color-mix(in srgb, #3A6A8C 11%, transparent);
  --ordem-2: color-mix(in srgb, #3A6A8C 6%, transparent);
  --ordem-3: color-mix(in srgb, #3A6A8C 3%, transparent);
  --aviso-fundo: #EDE4CF;
  --seta-lista: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.75 4.5 6 7.75 9.25 4.5' fill='none' stroke='%235E6873' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --sit-M-texto: #0E743A;   --sit-CDNM-texto: #0B6E75;
  --sit-N-texto: #55647A;   --sit-A-texto: #8C5B00;
  --sit-SD-texto: #A24B08;  --sit-DI-texto: #6B3FA0;
  --sit-TR-texto: #1D5FA8;  --sit-E-texto: #A31515;
  --sit-FA-texto: #3F3F46;
  --ambar-texto: #8B5B15;
}

/* AS CORES DA MARCA, NA TELA, VIRAM O DESTAQUE. O verde, o vinho e o vermelho
   do brasao estavam espalhados pela tela como cor de botao, de foco e de
   marcacao — o "Cadastrar pessoa" era verde e o "Novo cadastro", vinho: a
   mesma acao em duas cores. Agora sao uma so, a da aparencia. O seletor e
   html:root[data-aparencia] para vencer tanto o :root de estilo.css quanto o
   :root[data-tema="escuro"] dele (que traz um vinho rosado), que carregam depois.
   No papel as cores da marca voltam: impressao.css e #livreto (diretorio.css)
   as devolvem. */
html:root[data-aparencia] {
  --marca-verde: var(--destaque);
  --marca-vermelho: var(--destaque);
  --marca-vinho: var(--destaque-texto);
  --marca-tinta: var(--destaque-tinta);
  --vinho-texto: var(--destaque-texto);
}

/* Os tons de situacao da TELA (spec §5.2): abafados, da mesma familia, iguais
   nas tres aparencias. Marcam (ponto, faixa, barra); nao sao cor de texto —
   o texto de situacao usa --sit-X-texto, acima. A cor do PAPEL continua sendo
   --sit-X (estilo.css), e impressao.css e #livreto (diretorio.css) devolvem
   cada --tom-X a ela: o que sai impresso nao muda. */
:root {
  --tom-M: #4F8A6B;   --tom-CDNM: #3B8A8E; --tom-N: #7A8594;
  --tom-A: #B08A3E;   --tom-SD: #B0674A;   --tom-DI: #7D62A8;
  --tom-TR: #4F74A8;  --tom-E: #A8505A;    --tom-FA: #6B6B6B;
}

/* As miniaturas (a grade de Ajustes e a troca rapida da lateral). Cores
   escritas aqui, e nao herdadas: cada miniatura mostra a SUA aparencia, nao a
   que esta ligada. */
[data-mini="d"] { --mini-lateral: #163828; --mini-mesa: #E9E1D4; --mini-cartao: #F3EDE3; --mini-destaque: #B8892F; }
[data-mini="b"] { --mini-lateral: #2C2B27; --mini-mesa: #E5E1D9; --mini-cartao: #EFECE6; --mini-destaque: #4B7662; }
[data-mini="a"] { --mini-lateral: #262B32; --mini-mesa: #E2E5E9; --mini-cartao: #EDEFF2; --mini-destaque: #3A6A8C; }