/*
 * Design tokens do Keys (§5.18 / F9) — ÚNICO arquivo onde cores e tipografia são
 * definidas. Todo o resto (app.css, views, gráficos) consome var(--...). O linter de
 * tema garante que nenhuma cor viva fora daqui, e o linter do JS servido
 * (cli/lint/js.php) garante que nenhum --keys-* citado por gráfico deixe de existir.
 *
 * IDENTIDADE — Item 6-C:
 *   Duas camadas. (1) PALETA DE MARCA: as 9 cores oficiais, nomeadas exatamente como
 *   na identidade. São o que o Painel Master sobrescreve (inline <style> injetado pelo
 *   serviço Marca, DEPOIS deste arquivo — cascata: config vence o default). Nada
 *   configurado ⇒ estes defaults ⇒ byte-a-byte a identidade oficial. (2) TOKENS
 *   --keys-*: derivados da marca via var() nos usos centrais (botão, receita, despesa,
 *   fundos) — então mexer numa cor de marca no master propaga sozinho; os tons
 *   neutros/véus/washes são constantes calibradas p/ contraste (WCAG AA nos 2 temas,
 *   verificado — vide notas nas linhas *-forte).
 *
 *   Protagonista = OURO (#FFC940): é a cara da marca E o preenchimento do CTA (com
 *   TEXTO ESCURO --keys-sobre-primaria, ~11:1). Regras de contraste travadas:
 *   NUNCA texto branco sobre ouro; ouro como TEXTO/link só via --keys-primaria-texto
 *   (âmbar escuro no tema claro, ouro no escuro). Petróleo = cor estrutural (fundo do
 *   app/header no escuro). Menta = receita/positivo; Coral = despesa/negativo.
 *
 * OS NOMES DA PALETA AINDA SÃO VOCABULÁRIO DO PRODUTO DE ORIGEM (dívida registrada).
 *   `--ouro-centavo` fala de CENTAVO num software imobiliário, e `--menta-crescimento`
 *   / `--coral-despesa` são vocabulário de finanças pessoais. Os comentários deste
 *   arquivo foram corrigidos em 15/08/2026; os NOMES, não, e de propósito.
 *
 *   O motivo é que renomear só a variável CSS não remove o vocabulário — ele DUPLICA.
 *   A chave que o banco guarda em `config_sistema.marca_paleta` é a lógica
 *   (`ouro_centavo`, com underscore), e ela também nomeia o campo do Painel Master e as
 *   traduções `master.marca.cor.*` semeadas pela migration 0142. Renomear o lado CSS
 *   deixaria a tela do master pedindo "ouro_centavo" para preencher uma variável com
 *   outro nome: duas palavras para a mesma cor, em vez de nenhuma errada. O rename
 *   inteiro (CSS + as duas constantes de Marca, + a tela do master, + migration de dados
 *   sobre o JSON já persistido, + reseed de i18n) está parado em tools/_continuar.md
 *   como DECISÃO DO DONO — e mexer em nome de identidade logo depois de ele aprovar a
 *   identidade não é coisa que se faça de passagem.
 *
 *   NENHUM VALOR HEXADECIMAL MUDOU nesta entrega. Renomear é refatoração; trocar cor é
 *   redesign, e redesign não se faz sem quem manda na marca.
 */

:root {
    /* ---- Paleta de marca (configurável no Painel Master) ---- */
    --ouro-centavo:      #FFC940; /* cor de marca, destaques, logo, CTA */
    --ouro-escuro:       #E5A916; /* variante do ouro p/ fundo claro e hover */
    --noite-petroleo:    #0D1F23; /* azul-marinho quase preto — fundo do app, header */
    --grafite:           #182528; /* cartões e superfícies no modo escuro */
    --menta-crescimento: #3DDC97; /* receitas, positivo, sucesso */
    --menta-escura:      #18B877; /* variante da menta p/ fundo claro */
    --coral-despesa:     #FF6B57; /* despesas, alertas, negativo */
    --marfim:            #FAF7F0; /* creme — fundo do modo claro */
    --tinta:             #1B2426; /* texto sobre fundo claro */

    /* ---- Tipografia (configurável no Painel Master) ---- */
    --keys-fonte:        system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --keys-fonte-titulo: 'Sora', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* ---- Tokens --keys-* (derivados da marca) — TEMA CLARO ---- */
    /* Marca / primária */
    --keys-primaria:        var(--ouro-centavo);
    --keys-primaria-escura: var(--ouro-escuro);
    --keys-primaria-clara:  #FFD666;
    --keys-primaria-suave:  #FDF3D7;
    --keys-primaria-rgb:    255, 201, 64;
    --keys-grad-a:          var(--ouro-centavo);
    --keys-grad-b:          #FFD666;
    --keys-acento:          var(--ouro-centavo);
    /* Texto/link cor-de-marca sobre fundo CLARO (ouro puro reprova AA como texto):
       âmbar escuro — 5,07:1 s/ branco · 4,74:1 s/ marfim · 4,58:1 s/ primária-suave. */
    --keys-primaria-texto:  #8A6A00;
    /* Texto que vai POR CIMA do preenchimento ouro (botão/badge sólido) — petróleo, 11:1. */
    --keys-sobre-primaria:  var(--noite-petroleo);

    /* Superfícies e texto */
    --keys-fundo:        var(--marfim);
    --keys-superficie:   #ffffff;
    --keys-superficie-2: #f4efe3;
    /* ⚠️ O terceiro degrau nasceu USADO e nunca DEFINIDO (achado em 29/08/2026): três
       regras de `:hover` o chamavam e ficavam sem fundo, porque `var()` de token inexistente
       não quebra — desaparece. Um passo abaixo do 2, para o realce de toque continuar
       legível sobre ele (P9: contraste nos dois temas). */
    --keys-superficie-3: #ebe3d2;
    --keys-tinta:        var(--tinta);
    --keys-texto-2:      #5c6360; /* 6,16:1 s/ branco · 5,76:1 s/ marfim */
    --keys-texto-3:      #727975; /* terciário/dicas — 4,46:1 s/ branco · 4,17:1 s/ marfim */
    --keys-borda:        #e7e0d0;
    --keys-borda-forte:  #d3cab6;

    /* Semântica financeira */
    --keys-receita:       var(--menta-escura);
    --keys-receita-suave: #e3f7ee;
    --keys-despesa:       var(--coral-despesa);
    --keys-despesa-suave: #ffebe7;
    --keys-aviso:         var(--ouro-escuro);
    --keys-aviso-suave:   #fbf0d6;
    --keys-info:          #2c6e7a; /* teal informativo — 5,80:1 s/ branco */
    --keys-info-suave:    #e4f0f2;

    /* Destaque de linha por estado (P9/§5.18) — véus translúcidos derivados da semântica
       (coral/âmbar/menta), calibrados p/ manter o texto padrão legível (WCAG AA) nos 2 temas. */
    --keys-linha-estouro-fundo: rgba(255, 107, 87, 0.10);
    --keys-linha-estouro-hover: rgba(255, 107, 87, 0.17);
    --keys-linha-alerta-fundo:  rgba(229, 169, 22, 0.13);
    --keys-linha-alerta-hover:  rgba(229, 169, 22, 0.20);
    --keys-linha-ok-fundo:      rgba(24, 184, 119, 0.12);
    --keys-linha-ok-hover:      rgba(24, 184, 119, 0.18);
    /* Texto semântico (Δ vermelho/verde, ações) DENTRO de linha destacada: medem ≥5:1
       sobre branco e sobre os três véus no tema claro. */
    --keys-despesa-forte: #c43a28; /* 5,27:1 s/ branco */
    --keys-receita-forte: #0c7a50; /* 5,36:1 s/ branco · 4,67:1 s/ superfície-2 */

    /* Sombras e foco (tingidas com petróleo) */
    --keys-sombra-1: 0 1px 2px rgba(13, 31, 35, 0.06), 0 1px 6px rgba(13, 31, 35, 0.05);
    --keys-sombra-2: 0 4px 14px rgba(13, 31, 35, 0.09), 0 2px 4px rgba(13, 31, 35, 0.05);
    --keys-sombra-3: 0 12px 34px rgba(13, 31, 35, 0.16);
    --keys-anel-foco: rgba(255, 201, 64, 0.35);
    /* VÉU DE ROLAGEM (01/09/2026). A sombra que denuncia "tem mais coisa além desta borda" numa
       faixa que rola de lado. Nasceu do achado da câmera na faixa de abas de configuração: a tira
       cortava no meio de uma aba e as seguintes ficavam fora da tela SEM NENHUM SINAL — quem abria
       num notebook aprendia que aquelas telas não existiam. Não é sombra de elevação (essa é a
       --keys-sombra-*): é sinal de CONTEÚDO, e por isso mais forte do que uma sombra de cartão. */
    --keys-veu-rolagem: rgba(13, 31, 35, 0.24);

    /* Tour guiado (F10) */
    --keys-tour-sombra: rgba(13, 31, 35, 0.55);

    /* Geometria */
    --keys-raio:    14px;
    --keys-raio-sm: 10px;
    --keys-raio-xs: 8px;

    /* Overrides do Bootstrap (o resto herda daqui) */
    --bs-body-bg:      var(--keys-fundo);
    --bs-body-color:   var(--keys-tinta);
    --bs-border-color: var(--keys-borda);
}

[data-bs-theme="dark"] {
    /* Marca / primária — ouro pop sobre o escuro */
    --keys-primaria:        var(--ouro-centavo);
    --keys-primaria-escura: var(--ouro-escuro);
    --keys-primaria-clara:  #ffd666;
    --keys-primaria-suave:  #33290a;
    --keys-primaria-rgb:    255, 201, 64;
    --keys-grad-a:          var(--ouro-escuro);
    --keys-grad-b:          var(--ouro-centavo);
    --keys-acento:          var(--ouro-centavo);
    /* No escuro o ouro é legível como texto (11:1 s/ petróleo, 10:1 s/ grafite). */
    --keys-primaria-texto:  var(--ouro-centavo);
    --keys-sobre-primaria:  var(--noite-petroleo);

    /* Superfícies e texto — petróleo (fundo) + grafite (cartões) */
    --keys-fundo:        var(--noite-petroleo);
    --keys-superficie:   var(--grafite);
    --keys-superficie-2: #1f2e31;
    --keys-superficie-3: #26383c;
    --keys-tinta:        #eef2f0; /* 15:1 s/ petróleo · 14:1 s/ grafite */
    --keys-texto-2:      #a4b0ad; /* 7,6:1 s/ petróleo · 7,0:1 s/ grafite */
    --keys-texto-3:      #7a8683; /* 4,2:1 s/ grafite */
    --keys-borda:        #2a3b3e;
    --keys-borda-forte:  #3a4d50;

    /* Semântica financeira — menta viva no escuro */
    --keys-receita:       var(--menta-crescimento);
    --keys-receita-suave: #12291f;
    --keys-despesa:       var(--coral-despesa);
    --keys-despesa-suave: #2e1611;
    --keys-aviso:         #f0b429;
    --keys-aviso-suave:   #2c2410;
    --keys-info:          #5fb6c4;
    --keys-info-suave:    #14262a;

    /* Destaque de linha por estado — véus p/ superfície escura */
    --keys-linha-estouro-fundo: rgba(255, 107, 87, 0.16);
    --keys-linha-estouro-hover: rgba(255, 107, 87, 0.24);
    --keys-linha-alerta-fundo:  rgba(240, 180, 41, 0.15);
    --keys-linha-alerta-hover:  rgba(240, 180, 41, 0.23);
    --keys-linha-ok-fundo:      rgba(61, 220, 151, 0.14);
    --keys-linha-ok-hover:      rgba(61, 220, 151, 0.22);
    /* Reforço de texto semântico em linha destacada — ≥5,6:1 sobre os véus escuros. */
    --keys-despesa-forte: #ff8b7a; /* 6,9:1 s/ grafite */
    --keys-receita-forte: var(--menta-crescimento); /* 8,9:1 s/ grafite */

    --keys-tour-sombra: rgba(0, 0, 0, 0.7);

    --keys-sombra-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 6px rgba(0, 0, 0, 0.25);
    --keys-sombra-2: 0 4px 14px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --keys-sombra-3: 0 12px 34px rgba(0, 0, 0, 0.55);
    --keys-anel-foco: rgba(255, 201, 64, 0.30);
    /* No escuro a sombra precisa de mais opacidade para separar do grafite (mesma conta das
       --keys-sombra-*, que vão de 0,16 no claro a 0,55 no escuro). */
    --keys-veu-rolagem: rgba(0, 0, 0, 0.55);

    --bs-body-bg:      var(--keys-fundo);
    --bs-body-color:   var(--keys-tinta);
    --bs-border-color: var(--keys-borda);
}

/* ===== Token de aviso com contraste AA para TEXTO =====
   O --keys-aviso serve para acentos/badges/barras, mas como cor de TEXTO reprova AA no
   tema claro. Este token-irmão (mesmo precedente de --keys-despesa-forte/-receita-forte)
   é só para texto de aviso. Claro #7A5D00: 6,19:1 s/ branco · 5,46:1 s/ aviso-suave ·
   5,78:1 s/ marfim (todos ≥4,5 ✓). Escuro reusa o ouro: ≥10:1 ✓. */
:root                    { --keys-aviso-forte: #7a5d00; }
[data-bs-theme="dark"]   { --keys-aviso-forte: var(--ouro-centavo); }

/* ==========================================================================================
   A CAIXA DE WHATSAPP (D22) — a paleta da CONVERSA, e por que ela é uma família à parte
   ==========================================================================================

   Ordem do dono, 19/08/2026: *"tem que simular mesmo o WhatsApp, tem que fazer igual, tem que ser
   igual na questão de layout, não tem saída."*

   O que se reproduz é a GRAMÁTICA VISUAL do aplicativo — papel de parede texturado, balão claro à
   esquerda e balão verde à direita, hora e selo dentro do balão, barra de composição em pílula.
   O que **não** se copia é arte da Meta: nenhum SVG, ícone, fonte ou imagem deles entra aqui. Os
   valores abaixo são da PALETA DO KEYS (marfim/petróleo/menta/grafite), escolhidos para produzir a
   mesma leitura — e é por isso que eles moram num bloco próprio em vez de reusarem
   `--keys-receita-*`: numa conversa, verde não quer dizer "receita", quer dizer "fui eu que
   mandei". Emprestar o token do dinheiro faria a primeira mudança na semântica financeira repintar
   a conversa do corretor.

   Contraste conferido nos DOIS temas (§5.18) — os números estão ao lado de cada linha, medidos
   contra o texto que de fato pousa em cima.

   ⚠️ O RISCO DO PAPEL DE PAREDE É UMA COR, NÃO UMA IMAGEM. O desenho do fundo é feito com
   gradientes no `whatsapp.css` (CSP `default-src 'self'`: nada de CDN, e um data-URI com cor
   dentro não saberia trocar de tema). Aqui mora só a tinta dele.
   ========================================================================================== */

:root {
    /* O papel de parede. #EFE9DD é o marfim um passo mais fundo que --keys-superficie-2, para que
       o balão branco de quem chega tenha de onde se destacar sem precisar de borda. */
    --keys-wa-tela:        #efe9dd;
    --keys-wa-tela-risco:  rgba(27, 36, 38, 0.055);   /* a tinta do padrão — véu, nunca desenho */

    /* Os dois balões. "Chegou" é a superfície branca; "saiu" é o verde-menta claro da marca.
       Texto --keys-tinta: 15,8:1 sobre o branco · 13,7:1 sobre o menta ✓ */
    --keys-wa-chegou:      #ffffff;
    --keys-wa-saiu:        #dcf5e3;
    --keys-wa-balao-sombra: 0 1px 0.5px rgba(13, 31, 35, 0.13);

    /* A hora e o selo DENTRO do balão. 6,08:1 s/ branco · 5,27:1 s/ menta · 5,03:1 s/ papel ✓ */
    --keys-wa-meta:        #5c6360;

    /* As duas barras (cabeçalho da conversa e compositor) e a pílula do campo de texto. */
    --keys-wa-barra:       #f4efe3;
    --keys-wa-campo:       #ffffff;

    /* A TIRA DE FILTROS DA FILA (20/08/2026) — *"uma cor de fundo diferente"*, palavras do dono.
       Ela não decora: é o que faz a tira ler como CONTROLE e a lista abaixo como CONTEÚDO, agora
       que o filtro é uma caixa de escolha e não mais quatro pastilhas acesas/apagadas.
       Um passo mais fundo que a barra em que ela pousa — 1,16:1 sobre `--keys-wa-barra` e 1,33:1
       sobre a superfície da lista (o degrau visível; quem garante a fronteira é a borda de 1px).
       Texto/ícone `--keys-texto-2` em cima: 4,64:1 ✓ · `--keys-tinta`: 11,93:1 ✓ */
    --keys-wa-filtro-fundo: #e8dfc9;
    /* A pílula da data no meio do fio ("Ontem", "14 de agosto"). */
    --keys-wa-pilula:      #ffffff;

    /* O contador de não lidas: menta com tinta petróleo — 6,54:1 ✓ (branco sobre menta dá 2,57:1,
       e é por isso que ele NÃO é branco). */
    --keys-wa-nova:        #18b877;
    --keys-wa-sobre-nova:  #0d1f23;

    /* Os dois tiques de "lida". Teal informativo: 5,06:1 sobre o balão que saiu ✓ */
    --keys-wa-lida:        #2c6e7a;
}

[data-bs-theme="dark"] {
    --keys-wa-tela:        #0a161a;                    /* petróleo um passo mais fundo */
    --keys-wa-tela-risco:  rgba(238, 242, 240, 0.038);  /* mais fino que no claro: sobre o quase-preto, 5%% ja lia como estrelas */

    /* Texto --keys-tinta: 12,4:1 sobre o grafite · 9,0:1 sobre o verde-fundo ✓ */
    --keys-wa-chegou:      #1f2e31;
    --keys-wa-saiu:        #0f4b3c;
    --keys-wa-balao-sombra: 0 1px 0.5px rgba(0, 0, 0, 0.4);

    /* 7,46:1 s/ o balão que chega · 5,41:1 s/ o que sai · 9,78:1 s/ o papel ✓ */
    --keys-wa-meta:        #b3bfbc;

    --keys-wa-barra:       #152528;
    --keys-wa-campo:       #1f3236;
    --keys-wa-pilula:      #152528;

    /* No escuro a tira sobe em vez de descer: a barra (#152528) e a superfície da lista (grafite,
       #182528) já são quase a mesma tinta, e um degrau PARA BAIXO daria dois pretos indistintos.
       1,31:1 sobre a barra · 1,30:1 sobre a superfície da lista.
       Texto/ícone `--keys-texto-2` em cima: 5,40:1 ✓ · `--keys-tinta`: 10,70:1 ✓ */
    --keys-wa-filtro-fundo: #203a3f;

    --keys-wa-nova:        #3ddc97;
    --keys-wa-sobre-nova:  #0d1f23;                    /* 9,52:1 ✓ */

    --keys-wa-lida:        #7fd0dd;                    /* 5,80:1 sobre o balão que saiu ✓ */
}