/*
 * Cores do landing público (/) e do portal /manager — separado de
 * cores-app.css (painel logado) a pedido do usuário: LOCAL ÚNICO pra
 * controlar a paleta destas duas áreas sem mexer no /app.
 *
 * Escopado em .zona-publica (aplicado no host do componente Landing,
 * Manager e ManagerLogin — ver host: { class: 'zona-publica' } em
 * landing.ts/manager.ts/manager-login.ts), não em :root: como landing e
 * manager são páginas globais sem tenant, a cor aqui é sempre fixa — ao
 * contrário do /app, nunca deve variar por escritório.
 *
 * São só 4 cores de marca desde 28/09/2026: Marinho da logo (textos/
 * headers/fundos escuros), Turquesa #20a7b9 (primária/CTAs/destaques,
 * escolha do usuário), Água da logo (acento/decoração), Cinza Neutro
 * (fundo/cards). Antes eram Azul Elétrico #1947dc e Ciano Neón #00d2ff,
 * do guia de marca v1.0 (02/09). Pra mudar a identidade visual do
 * landing/manager, mexe só nos valores abaixo — o restante do design
 * (reset/tipografia/componentes .card/.row/.button/etc.) vem de
 * design-system.css, compartilhado com cores-app.css.
 */
.zona-publica {
  /* Marinho do "Tramitex" (#1c2a4a) e água da seta da logo (#5cc6d0, só
     como acento/decoração e sobre o marinho, 7:1) — 28/09/2026, pedido do
     usuário pra usar mais as cores da logo. Primária logo abaixo. */
  --paper: #f4f6f8;
  --paper-raised: #ffffff;
  --paper-raised-nav: #ffffff;
  --ink: #1c2a4a;
  --ink-soft: #4c5b71;
  --ink-faint: #5f6f85;
  --line: #dbe2ea;
  --content-scroll: var(--line);
  --content-scroll-hover: var(--ink-faint);

  /* Primária turquesa #20a7b9 (28/09/2026, escolha do usuário). Clara
     demais pra texto branco em cima (2,9:1) — texto sobre ela é o
     marinho da logo (4,9:1, acima do AA). E como COR DE TEXTO sobre o
     fundo claro também não passa (2,7:1): pra isso existe
     --primary-texto, o mesmo tom mais fechado (4,65:1). Regra: fundo/
     borda/ícone grande = --primary; letra = --primary-texto. */
  --primary: #20a7b9;
  --primary-texto: #147a88;
  --primary-soft: #e0f4f6;
  --primary-fg: #1c2a4a;
  --accent: #5cc6d0;
  --accent-soft: #e1f5f7;
  --accent-fg: #1c2a4a;

  /* Degradê turquesa → água (como a seta da logo), só em detalhes
     decorativos — nunca atrás de texto. */
  --marca-gradiente: linear-gradient(135deg, #147a88 0%, #20a7b9 50%, #5cc6d0 100%);

  --nav-bg: #1c2a4a;
  --nav-fg: rgba(255, 255, 255, 0.7);
  --nav-fg-strong: rgba(255, 255, 255, 0.85);
  --nav-fg-faint: rgba(255, 255, 255, 0.55);
  --nav-hover-bg: rgba(255, 255, 255, 0.08);
  --nav-hover-bg-strong: rgba(255, 255, 255, 0.14);
  --nav-scroll: rgba(255, 255, 255, 0.18);
  --nav-scroll-hover: rgba(255, 255, 255, 0.3);
  --nav-border: rgba(255, 255, 255, 0.16);

  --list-accent: #1c2a4a;
  --list-accent-soft: #eef1f5;

  --card-bg: var(--paper-raised);
  --card-fg: var(--ink);
  --card-fg-soft: var(--ink-soft);
  --card-fg-faint: var(--ink-faint);

  --menu-icon-fg: var(--nav-fg);
  --dash-icon-fg: var(--card-fg);
}

/* Classes compartilhadas de design-system.css que usam --primary como COR
   DE LETRA — na zona pública a primária é clara demais pra texto, então
   aqui elas usam o tom de texto (ver --primary-texto acima). */
.zona-publica :is(.eyebrow, .pill.tag, .btn, button.secundario.active, .scope-note b) {
  color: var(--primary-texto);
}

/* Hover do botão primário (<a uiBtn>, ui/button.ts): o padrão do /app
   ESCURECE a primária, o que com letra marinho cairia pra 2,6:1. Aqui ele
   clareia (6,1:1). `html .zona-publica` só pra vencer a declaração de
   tokens.css (mesmo seletor .zona-publica, carregada depois). */
html .zona-publica {
  --ui-primary-hover: color-mix(in srgb, var(--primary) 80%, #fff);
}