/*
 * Design system do KairósHub.
 *
 * As cores da marca escritas UMA vez. Nenhuma tela inventa hexadecimal:
 * se a cor não está aqui, ela não existe no Hub. Fonte: docs/MARCA.md.
 *
 * A régua estética: a KAIRÓS entrega relatório técnico assinado. O Hub deve
 * parecer da mesma casa — documento, não painel. Isso significa borda fina em
 * vez de sombra pesada, tipografia com hierarquia clara, cor usada como
 * significado e não como decoração.
 */

:root {
  /* ── Institucionais ───────────────────────────────────────────── */
  --purpura: #3e1a72;
  --purpura-noturno: #130728;
  --ouro: #d4a017;
  --lavanda: #f2edf9;

  /* Derivadas. Nenhuma cor nova: o mesmo púrpura com transparência. */
  --purpura-suave: rgba(62, 26, 114, 0.06);
  --purpura-medio: rgba(62, 26, 114, 0.11);
  --purpura-borda: rgba(62, 26, 114, 0.15);
  --purpura-claro: #6b4a9e;
  --ouro-suave: rgba(212, 160, 23, 0.12);
  --ouro-escuro: #8a6708;

  /* ⚠️ **O GRIFO das anotações — 28/08/2026, com o motivo escrito.**

     Cor não se inventa nesta casa, e esta precisou de degrau novo: o Richard
     pediu marca-texto nos campos livres, e **nenhuma cor da paleta serve**.
     `--ouro-suave` é translúcido a 12% — desenho de fundo, não grifo; e as três
     cores de nível são reservadas ao nível de um caso.

     ⚠️ **O tom persegue o AMARELO DO WORD, e não o ouro da marca.** O realce do
     `.docx` vem de uma paleta fechada de dezesseis nomes, e `yellow` é o único
     que se lê como marca-texto — não há como pedir o ouro ali. Tela em ouro e
     papel em amarelo seriam duas cores para a mesma marcação, e quem grifa
     esperaria ver no papel o que viu na tela.

     ⚠️ **O editor LÊ este token** (`getPropertyValue('--grifo')`), em vez de
     repetir o hexadecimal no JavaScript. Cor escrita em dois lugares é cor que
     um dia diverge. */
  --grifo: #fdf3c8;

  /* ── As quatro cores de grifo — 31/08/2026, escolha dele ────────────────
     ⛔ **Elas NÃO mudam no tema escuro, e isso é deliberado.** O editor grava a
     cor dentro do texto; se o token mudasse de valor, o grifo aplicado de dia
     deixaria de ser reconhecido à noite e voltaria como amarelo. A legibilidade
     no escuro é resolvida forçando a tinta escura por cima, em `clientes.css`.
     ⚠️ **São pastéis de propósito:** realce existe para destacar, não para
     esconder o texto. E as quatro têm par na paleta fechada do Word. */
  --grifo-amarelo: #fdf3c8;
  --grifo-azul: #cfe8fb;
  --grifo-verde: #d3f0d6;
  --grifo-vermelho: #fbd5d5;

  /* ── Níveis de serviço ────────────────────────────────────────── */
  /* Reservadas. Só o nível de um caso usa estas três — nada mais. */
  --nivel-insight: #2f1555;
  --nivel-forensic: #072139;
  --nivel-kairos: #670000;

  /* ── Semânticas ───────────────────────────────────────────────── */
  /* Atrasado usa o vinho da marca: é a cor da gravidade. */
  --atrasado: #670000;
  --atrasado-fundo: rgba(103, 0, 0, 0.06);
  --atrasado-borda: rgba(103, 0, 0, 0.22);

  /* ── A faixa do índice de probabilidade de negociação ──────────
     Decisão do Richard, 21/08/2026: alta verde, média laranja, baixa
     vermelha. ⚠️ **Verde e laranja não existiam no Hub** — foram acrescentados
     aqui, e não improvisados no arquivo da tela, que é a regra da casa para
     quando falta um degrau.

     ⚠️ **São tons SÓBRIOS de propósito.** A paleta da casa é púrpura profundo,
     ouro e vinho; um verde de semáforo de trânsito ao lado dela faria a tela
     parecer painel de aplicativo, e o tom de voz da marca não eleva a voz.

     ⚠️ **O laranja é mais escuro e mais vermelho que o Ouro** (`#d4a017`). Se
     fossem parecidos, "média" e o acento da casa se confundiriam na mesma
     tela — e o acento perderia o significado que tem.

     ⚠️ **A baixa reusa o vinho da marca**, que já é a cor da gravidade no Hub
     (atraso, estouro de fundo de custas). Vermelho novo seria uma segunda cor
     dizendo a mesma coisa. */
  --faixa-alta: #2e6f4e;
  --faixa-media: #b8600f;
  --faixa-baixa: var(--atrasado);

  --tinta: #191322;
  /* A cor de título. No claro é o Noturno da marca; no escuro TEM que virar
     a cor de leitura, senão o título some no fundo — foi o que aconteceu na
     primeira versão do tema escuro. */
  --tinta-titulo: #130728;
  --tinta-media: #575061;
  --tinta-fraca: #8b8496;
  --papel: #ffffff;
  --linha: rgba(25, 19, 34, 0.09);
  --linha-forte: rgba(25, 19, 34, 0.16);

  /* ── Tipografia ───────────────────────────────────────────────── */
  --fonte-titulo: 'Cormorant Garamond', Georgia, serif;

  /*
   * ── O PESO DO CORMORANT — decisão de 15/08/2026 ──
   *
   * O dossiê da marca diz **SemiBold (600)**. O Hub usava **700**. Parecia
   * conflito; não é. São dois problemas ópticos diferentes, e a resposta certa
   * depende do tamanho:
   *
   * O Cormorant é serifa de haste fina. O peso APARENTE cai quando o texto
   * encolhe, sobe em caixa alta e cai de novo quando a entreletra abre. No
   * dossiê, os títulos são grandes, em caixa mista e com folga: 600 fica
   * elegante. Na interface, todo título é pequeno (19 a 28px), em CAIXA ALTA e
   * com entreletra aberta — as três coisas que comem peso ao mesmo tempo. Ali
   * o 600 esvanece e a pessoa perde tempo procurando onde começa cada seção.
   *
   * Então: **600 é o peso da marca; 700 é a compensação óptica da interface.**
   * Mesma família, mesma personalidade, presença equivalente em cada tamanho.
   * A proposta em PDF usa 600 nos títulos grandes, porque lá o cliente compara
   * com o material institucional — e os dois têm de parecer a mesma casa.
   */
  --peso-titulo: 700;
  --peso-marca: 600;
  --fonte-corpo: 'DM Sans', system-ui, -apple-system, sans-serif;
  --fonte-dado: 'DM Mono', ui-monospace, 'SF Mono', monospace;

  /*
   * A escada de leitura. **Não invente tamanho: o degrau já existe.**
   *
   * A regra sempre esteve escrita aqui, e mesmo assim o CSS inventava em 33
   * lugares — conviviam 0,78 · 0,8 · 0,82 · 0,85 · 0,88 · 0,9rem, seis tamanhos
   * quase iguais. Diferença pequena demais para ter intenção, grande o
   * bastante para o olho estranhar sem saber dizer o quê: é exatamente assim
   * que uma tela passa impressão de amadorismo. Arrumado em 15/08/2026, a
   * pedido do Richard.
   *
   * `--t-medio` entrou nesse mesmo dia: havia um degrau faltando entre o corpo
   * e a seção, e era ele que estava sendo improvisado como 1 · 1,02 · 1,05rem
   * no código do caso, no título do cartão e no valor do resumo.
   */
  --t-display: 2.25rem;
  --t-titulo: 1.75rem;
  --t-secao: 1.2rem;
  --t-medio: 1.063rem;
  --t-corpo: 0.938rem;
  --t-pequeno: 0.844rem;
  --t-minusculo: 0.766rem;
  --t-rotulo: 0.688rem;
  /* ⭐ O título de folha do sistema visual 2026 (14/09/2026): Cormorant em
     caixa mista, entre `--t-secao` e `--t-titulo`. Com `--t-secao` o título
     sumia ao lado do botão; com `--t-titulo` competia com o nome do cliente. */
  --t-folha: 1.375rem;

  /* ── Espaço e forma ───────────────────────────────────────────── */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  --canto: 8px;
  --canto-pequeno: 5px;
  /* ⭐ **O degrau que faltava, acrescentado na faxina de 08/09/2026.**
     A auditoria achou **onze raios crus** — 2px e 3px — em barra de progresso,
     esqueleto de carregamento, selo de natureza e aviso. São peças pequenas,
     onde `--canto-pequeno` arredonda demais e come a altura útil.

     ⚠️ **Um degrau, com o motivo escrito** — é a regra que a casa já aplica à
     escada de texto. Duas medidas quase iguais (2 e 3) viram uma. */
  --canto-minimo: 3px;

  /* Borda fina define; sombra apenas separa do fundo. Documento, não app. */
  /* ═══ Tinta sobre COR DE MARCA ═══════════════════════════════════════
     ⭐ **Nasceu da faxina de 08/09/2026**, quando ele pediu padronização e a
     auditoria achou `#fff` escrito **treze vezes** — em botão primário, no
     cabeçalho, na aba ativa, no botão destrutivo, na escolha ativa.

     ⚠️ **Não é `--papel`, e a diferença importa:** papel é a superfície da
     página e **vira escuro** no tema escuro. Esta é a tinta que fica legível
     sobre púrpura, noturno e vermelho — e esses fundos são escuros nos dois
     temas, então ela é branca sempre. Trocar uma pela outra apagaria o texto
     do botão primário no escuro. */
  --tinta-sobre-marca: #ffffff;

  /* ═══ Papel de DESENHO ════════════════════════════════════════════════
     ⚠️ **Branco fixo, e é decisão antiga que estava sem nome.** O painel de
     ativos, a árvore genealógica e o mapa de vínculos são SVGs com tinta
     escura — os mesmos que viram PNG no documento. Herdar o papel escuro do
     tema apagaria o traço.

     ⛔ **Por isso ele NÃO acompanha o tema**, ao contrário de `--papel`. Estava
     escrito como `#ffffff` cru em três lugares, com o motivo em comentário mas
     sem nome que o carregasse. */
  --papel-de-desenho: #ffffff;

  /* Ouro um degrau mais escuro que `--ouro-escuro`, para texto pequeno sobre
     fundo claro alcançar o contraste exigido. Estava cru em dois lugares. */
  --ouro-forte: #6b5209;

  /* ═══ A família SOBRE FUNDO DE MARCA ══════════════════════════════════
     O cabeçalho, o menu da conta e os botões sobre púrpura precisam de tinta e
     de superfície próprias — e elas estavam escritas cruas **quinze vezes**,
     com opacidades que não conversavam.

     ⛔ **O que a auditoria de 08/09/2026 achou:** `0,72` e `0,70` para a mesma
     tinta secundária, e **três hovers com três opacidades** (0,06 · 0,08 ·
     0,08). Diferenças pequenas demais para ter intenção e grandes o bastante
     para o olho estranhar sem saber dizer o quê. */
  --tinta-sobre-marca-forte: rgba(255, 255, 255, 0.82);
  --tinta-sobre-marca-media: rgba(255, 255, 255, 0.72);
  --tinta-sobre-marca-fraca: rgba(255, 255, 255, 0.34);
  --linha-sobre-marca: rgba(255, 255, 255, 0.1);
  --superficie-sobre-marca: rgba(255, 255, 255, 0.08);
  /* ⚠️ **O ATIVO precisa se distinguir do hover.** Ele era `0,09` contra um
     hover de `0,08` — um centésimo de diferença, invisível na prática: a aba
     em que se está parecia igual à aba sob o mouse. */
  --superficie-sobre-marca-ativa: rgba(255, 255, 255, 0.16);

  /* ═══ Realce sobre PAPEL ══════════════════════════════════════════════
     ⛔ **Era a MESMA tinta escrita de dois jeitos** — `rgba(25,19,34)` e
     `rgba(26,20,36)` —, em quatro opacidades. Uma diferença de um ponto em cada
     canal, que ninguém escolheu e ninguém vê, mas que fazia o mesmo cinza
     existir duas vezes no sistema. */
  --realce: rgba(25, 19, 34, 0.06);
  --realce-fraco: rgba(25, 19, 34, 0.02);

  /* A cortina que escurece a página atrás de um diálogo. */
  --cortina: rgba(19, 7, 40, 0.5);

  /* O vermelho pressionado do botão destrutivo. Estava cru, e era o único
     hover da casa com cor própria. */
  --atrasado-forte: #4d0000;

  --sombra: 0 1px 2px rgba(19, 7, 40, 0.04);
  --sombra-alta: 0 4px 16px rgba(19, 7, 40, 0.1);

  /* ⭐⭐ **O SISTEMA VISUAL 2026 — aprovado por ele em 14/09/2026.**
     A tela deixa de ser lavanda cheia: é lavanda a 55% sobre o papel, o que
     faz a folha branca destacar sem sombra pesada. Sai de token, não de
     hexadecimal novo — no escuro, a mesma mistura dá o fundo escuro. */
  --tela: color-mix(in srgb, var(--lavanda) 55%, var(--papel));
  /* A largura do menu lateral, que substituiu o cabeçalho de abas. */
  --lateral: 256px;
  /* Duas alturas só: a do que está na tela, e a da folha que se destaca. */
  --elev-1: 0 1px 2px rgba(19, 7, 40, 0.04), 0 1px 1px rgba(19, 7, 40, 0.02);
  --elev-2: 0 1px 2px rgba(19, 7, 40, 0.05), 0 12px 32px -16px rgba(19, 7, 40, 0.14);

  --transicao: 140ms ease;

  /* Alvo de toque mínimo. Tela de celular não tem hover. */
  --toque: 44px;

  /* A página acompanha a janela inteira, com uma margem para não encostar na
     borda. **Sem teto** — decisão do Richard, 15/08/2026.

     O teto de 1440px existia porque linha de texto muito longa cansa a leitura:
     o olho perde onde a linha recomeça. A ressalva foi apresentada e ele optou
     por aproveitar o monitor. Se um dia incomodar, o conserto é local — dar
     medida de leitura só ao texto corrido (anotação, observação), sem mexer em
     tabela nem em cartão, que ganham com a largura. */
  --largura: calc(100% - 3rem);
}

/* ═══════════════════════════════════════════════════════════════════
   MODO ESCURO
   Derivado da própria marca, não inventado: o Púrpura Noturno já é o
   fundo institucional da KAIRÓS, e a Lavanda já é a cor de leitura.
   No claro, Noturno é o cabeçalho e Lavanda o fundo; no escuro, os dois
   trocam de papel. Nenhuma cor nova entra.
   ═══════════════════════════════════════════════════════════════════ */
:root[data-tema='escuro'] {
  --lavanda: #0d0419;
  --papel: #1a0f2e;
  --tinta: #ece7f4;
  --tinta-titulo: #f4f0fa;
  --tinta-media: #a79dba;
  --tinta-fraca: #7d7391;
  --linha: rgba(236, 231, 244, 0.1);
  --linha-forte: rgba(236, 231, 244, 0.18);

  /* A ação precisa clarear: o púrpura institucional sobre fundo escuro
     não alcança o contraste exigido para texto branco pequeno. */
  --purpura: #7d5bb8;
  --purpura-noturno: #150a29;
  --purpura-suave: rgba(125, 91, 184, 0.14);
  --purpura-medio: rgba(125, 91, 184, 0.26);
  --purpura-borda: rgba(125, 91, 184, 0.36);

  --ouro-suave: rgba(212, 160, 23, 0.16);
  --ouro-escuro: #e8bc4d;

  /* ⚠️ No escuro o grifo claro cegaria, e o texto por cima dele some. Vai
     rebaixado, mantendo a leitura — e o `.anotacao-caixa mark` força a tinta
     escura por cima, senão texto claro sobre grifo claro fica ilegível. */
  --grifo: #6b5a1f;

  /* Verde e laranja clareiam sobre fundo escuro, como o vinho — a mesma
     família, um degrau acima, para não sumirem na barra de 8px. */
  --faixa-alta: #5fbf8c;
  --faixa-media: #e39a4a;

  /* O vinho da marca some sobre fundo escuro; clareia mantendo a família. */
  --atrasado: #e57373;
  --atrasado-fundo: rgba(229, 115, 115, 0.12);
  --atrasado-borda: rgba(229, 115, 115, 0.34);

  /* ⚠️ **`--tinta-sobre-marca` e `--papel-de-desenho` NÃO se redefinem aqui**,
     e é deliberado: os fundos que elas cobrem — púrpura, noturno, vermelho e o
     papel branco dos SVGs — continuam os mesmos no escuro.

     ⭐ **O ouro forte, sim, inverte.** Ouro escuro sobre fundo escuro fica
     ilegível; ele acompanha `--ouro-escuro`, um degrau acima para não sumir. */
  --ouro-forte: #f0cd75;
  --atrasado-forte: #f19c9c;

  /* ⚠️ **No escuro o realce INVERTE:** um véu escuro sobre fundo escuro não
     aparece. A família "sobre marca" continua branca — os fundos que ela cobre
     são escuros nos dois temas. */
  --realce: rgba(236, 231, 244, 0.07);
  --realce-fraco: rgba(236, 231, 244, 0.03);
  --cortina: rgba(6, 2, 13, 0.66);

  /* As três cores de nível clareiam o suficiente para o selo se distinguir
     do fundo. Continuam sendo as mesmas três, e de mais ninguém. */
  --nivel-insight: #6a44a8;
  --nivel-forensic: #2a5b86;
  --nivel-kairos: #b04040;

  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-alta: 0 4px 20px rgba(0, 0, 0, 0.55);
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
}

/* No modo escuro o menu lateral não pode ser mais escuro que a página, senão
   some: ver `.lateral` em `casca.css`, que usa este mesmo tom (#150a29). */

:root[data-tema='escuro'] .login-fundo {
  /* O mesmo desenho do claro, sobre o fundo da página no escuro (#0d0419 é o
     `--lavanda` deste tema). */
  background:
    radial-gradient(40rem 28rem at 12% 0%, color-mix(in srgb, var(--purpura-noturno) 90%, transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, var(--superficie-sobre-marca) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--lavanda);
}