/* hero-tokens.css — v1.2.0 (2026-09-19)
   Identidade Hero nas aplicações internas (ADR-0012, revisão de estética de 19/09/2026).
   1.1.0: + --hero-fundo-login (fundo da tela de entrada, BRAND.md), + --botao-hover-bg por tema.
   1.2.0: --sync-vermelho = #C8283F nos dois temas (branco em cima dá 5,9:1; #E0413F dava 4,25).

   FONTE DA VERDADE: apps-platform/apps/bp/src/bp/web/static/hero-tokens.css.
   A toba (Cortex) e os geradores dos painéis levam uma CÓPIA inteira deste arquivo, sem editar
   (decisão D12); o número de versão acima é o que se confere no trimestre. Mudou aqui, copia lá.

   Duas camadas:
   1. primitivas da marca (--hero-*): literais do brandbook 2025 (slides 12 e 14). Nunca entram
      direto num componente — passam pela camada 2.
   2. semânticas (--bg, --panel, --text, --accent, --ok…): os nomes que a toba já usa em todas
      as páginas; o painel `rede` recebe apelidos (--card, --line, --ink, --mut) no fim.

   Tema: `:root` é o ESCURO (superfícies de monitoração: toba, painéis) e `[data-theme="light"]`
   é o CLARO (superfícies de leitura: portal, Banco de Pareceres). Sem carimbo vale a preferência
   do sistema. Regra da casa: claro para ler, escuro para monitorar (D4). Cada superfície carimba
   o seu tema em <html data-theme="…">; o carimbo sempre ganha do sistema.

   Sem url() aqui: a fonte e as imagens são de cada repositório (o @font-face fica no CSS da app).
   Contrastes medidos (WCAG 2.x) em apps/bp/tests/test_tokens.py — o teste falha se um valor cair. */

:root {
  /* ---------------------------------------------------------- 1. marca (brandbook 2025) */
  --hero-roxo-profundo: #440077;   /* degradês, fundos profundos; texto só sobre claro */
  --hero-roxo: #7A05C6;            /* primário: botão, link, navegação ativa (sobre claro) */
  --hero-roxo-vivo: #A30DFF;       /* hover, realce */
  --hero-roxo-claro: #C98BFF;      /* texto de ênfase SOBRE ESCURO; nunca texto sobre claro (2,44:1) */
  --hero-roxo-palido: #ECCCFF;     /* chips e preenchimentos; nunca texto sobre claro (1,43:1) */
  --hero-magenta: #D80073;         /* acento: filtro ativo, foco, CTA, 2ª série de gráfico */
  --hero-magenta-claro: #FF5CA8;   /* hover do acento sobre escuro; "danger" sobre escuro (D3) */
  --hero-preto: #000000;
  --hero-branco: #FFFFFF;
  --hero-cinza: #E4E4E4;
  /* Reservado ao logo e ao ÚNICO CTA da tela. Título com degradê é violação da marca. */
  --hero-gradiente: linear-gradient(135deg, #D80073 0%, #7A05C6 80%);
  --hero-brilho-cta: 0 8px 22px -8px rgba(122, 5, 198, .75);
  /* Fundo da tela de entrada (BRAND.md): radiais da marca sobre o roxo profundo. Só ali. */
  --hero-fundo-login: radial-gradient(ellipse at 82% 8%, rgba(216, 0, 115, .50), transparent 55%),
                      radial-gradient(ellipse at 5% 118%, rgba(163, 13, 255, .45), transparent 55%),
                      linear-gradient(135deg, #2a0148 0%, #4a0782 62%, #5c0a9c 100%);

  /* --------------------------------------------------------------------- tipografia */
  --fonte: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-mono: ui-monospace, Menlo, Consolas, monospace;
  --fs-eyebrow: 10.5px;  --fs-meta: 11.5px;  --fs-label: 12.5px;  --fs-body: 13.5px;
  --fs-h3: 14.5px;       --fs-h2: 17px;      --fs-h1: 22px;       --fs-kpi: 28px;
  --fs-leitura: 15px;    /* corpo de texto longo (pareceres); os painéis ficam em --fs-body */
  --ls-eyebrow: .14em;   --ls-kpi: -.02em;   --ls-wordmark: .06em;
  --lh-corpo: 1.5;       --lh-titulo: 1.2;
  /* Montserrat até 700. Nunca 800 nem 900 (brandbook). */
  --peso-corpo: 400;  --peso-medio: 500;  --peso-titulo: 600;  --peso-kpi: 700;

  /* ------------------------------------------------------------ espaço (base 4 px) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;
  --td-pad: 8px 10px;

  /* ---------------------------------------------------- raio, sombra, foco, movimento */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-pill: 999px;
  --sombra-card: 0 0 16px rgba(17, 17, 26, .10);
  --transicao: 150ms ease;
  --icone-traco: 1.75;   /* ícones Lucide em <svg> inline, stroke: currentColor */

  /* ------------------------------------------- 2. semântica — ESCURO ("Command deck") */
  --bg: #0b0b0d;  --chrome: #0e0e11;  --panel: #141418;  --panel2: #1d1d22;  --inner: #0f0f13;
  --border: #1e1e23;  --border-forte: #26262c;
  --text: #FAFAFA;  --text2: #C9C9CF;  --muted: #8A8A93;
  --heading: #C98BFF;              /* títulos e valores de KPI, chapados: 7,54:1 sobre --panel */
  --accent: #D80073;               /* preenchimento e borda (3,65:1): nunca texto sobre --panel */
  --accent2: #7A05C6;
  --accent-texto: #C98BFF;         /* link e texto de ênfase */
  --accent-chip-bg: rgba(216, 0, 115, .16);  --accent-chip-texto: #FF8FC4;
  --foco: 0 0 0 3px rgba(201, 139, 255, .35);  --foco-borda: #C98BFF;
  --realce-bg: rgba(201, 139, 255, .18);  --realce-texto: #ECCCFF;   /* trecho encontrado na busca */
  --botao-bg: #7A05C6;  --botao-texto: #FFFFFF;  --botao-hover-bg: #A30DFF;
  --cta-bg: var(--hero-gradiente);  --cta-texto: #FFFFFF;  --cta-sombra: var(--hero-brilho-cta);
  /* Estado sempre em chip: fundo a 14 %, borda a 32 %, texto na cor. `danger` é o rosa da marca
     (D3); se em uso real ele se confundir com o acento, a reserva é #FF7A7A. */
  --ok: #4ADE9B;  --warn: #F0C060;  --danger: #FF5CA8;  --info: #6BA6FF;
  --ok-bg: rgba(74, 222, 155, .14);      --ok-borda: rgba(74, 222, 155, .32);
  --warn-bg: rgba(240, 192, 96, .14);    --warn-borda: rgba(240, 192, 96, .32);
  --danger-bg: rgba(255, 92, 168, .14);  --danger-borda: rgba(255, 92, 168, .32);
  --info-bg: rgba(107, 166, 255, .14);   --info-borda: rgba(107, 166, 255, .32);
  /* Gráficos: no máximo 3 séries categóricas (a marca tem dois matizes); a 4ª é "Outros" ou
     um gráfico a mais. Toda barra "Top N" usa a rampa ordinal. Cor de estado nunca vira série. */
  --serie-1: #C98BFF;  --serie-2: #D80073;  --serie-3: #A30DFF;  --serie-outros: #8A8A93;
  --ordinal-1: #ECCCFF;  --ordinal-2: #C98BFF;  --ordinal-3: #A30DFF;  --ordinal-4: #7A05C6;
  --meta: #D80073;       /* linha de meta: tracejada 6 6, opacidade .7 */
  --grade: #1e1e23;
  --brilho-pagina: radial-gradient(1200px 500px at 85% -10%, rgba(216, 0, 115, .10), transparent 60%),
                   radial-gradient(900px 400px at -10% 110%, rgba(163, 13, 255, .08), transparent 60%);
  --sync-vermelho: #C8283F;   /* toba/Cortex: a única exceção documentada — "Sincronizar RRI" escreve fora; texto branco */
  color-scheme: dark;
}

/* ------------------------------------------------- semântica — CLARO (portal, Banco de Pareceres)
   Valores claros do brandbook (papel, névoa, linha, tinta). ok/warn medidos sobre o chip a 10 % e
   sobre --panel2, não só sobre branco: por isso são mais escuros que os do relatório. */
:root[data-theme="light"] {
  --bg: #F6F4FB;  --chrome: #FFFFFF;  --panel: #FFFFFF;  --panel2: #F0ECF8;  --inner: #FBFAFD;
  --border: #E7E3F0;  --border-forte: #D7D1E6;
  --text: #1F1F1F;  --text2: #3F3F46;  --muted: #5B5B63;
  --heading: #440077;
  --accent: #D80073;
  --accent2: #7A05C6;
  --accent-texto: #7A05C6;
  --accent-chip-bg: rgba(216, 0, 115, .10);  --accent-chip-texto: #A8005A;
  --foco: 0 0 0 3px rgba(122, 5, 198, .18);  --foco-borda: #7A05C6;
  --realce-bg: #F6E6FF;  --realce-texto: #440077;
  --botao-bg: #7A05C6;  --botao-texto: #FFFFFF;  --botao-hover-bg: #440077;
  --cta-bg: var(--hero-gradiente);  --cta-texto: #FFFFFF;  --cta-sombra: var(--hero-brilho-cta);
  --ok: #0B7049;  --warn: #805800;  --danger: #C0134F;  --info: #1D5FD6;
  --ok-bg: rgba(11, 112, 73, .10);       --ok-borda: rgba(11, 112, 73, .35);
  --warn-bg: rgba(128, 88, 0, .10);      --warn-borda: rgba(128, 88, 0, .35);
  --danger-bg: rgba(192, 19, 79, .10);   --danger-borda: rgba(192, 19, 79, .35);
  --info-bg: rgba(29, 95, 214, .10);     --info-borda: rgba(29, 95, 214, .35);
  --serie-1: #7A05C6;  --serie-2: #D80073;  --serie-3: #C98BFF;  --serie-outros: #8A8A93;
  --ordinal-1: #C98BFF;  --ordinal-2: #A30DFF;  --ordinal-3: #7A05C6;  --ordinal-4: #440077;
  --meta: #D80073;
  --grade: #E7E3F0;
  --brilho-pagina: none;
  --sync-vermelho: #C8283F;
  color-scheme: light;
}

/* Sem carimbo, a preferência do sistema decide; um data-theme explícito sempre ganha.
   Bloco idêntico ao de cima — o teste confere. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F6F4FB;  --chrome: #FFFFFF;  --panel: #FFFFFF;  --panel2: #F0ECF8;  --inner: #FBFAFD;
    --border: #E7E3F0;  --border-forte: #D7D1E6;
    --text: #1F1F1F;  --text2: #3F3F46;  --muted: #5B5B63;
    --heading: #440077;
    --accent: #D80073;
    --accent2: #7A05C6;
    --accent-texto: #7A05C6;
    --accent-chip-bg: rgba(216, 0, 115, .10);  --accent-chip-texto: #A8005A;
    --foco: 0 0 0 3px rgba(122, 5, 198, .18);  --foco-borda: #7A05C6;
    --realce-bg: #F6E6FF;  --realce-texto: #440077;
    --botao-bg: #7A05C6;  --botao-texto: #FFFFFF;  --botao-hover-bg: #440077;
    --cta-bg: var(--hero-gradiente);  --cta-texto: #FFFFFF;  --cta-sombra: var(--hero-brilho-cta);
    --ok: #0B7049;  --warn: #805800;  --danger: #C0134F;  --info: #1D5FD6;
    --ok-bg: rgba(11, 112, 73, .10);       --ok-borda: rgba(11, 112, 73, .35);
    --warn-bg: rgba(128, 88, 0, .10);      --warn-borda: rgba(128, 88, 0, .35);
    --danger-bg: rgba(192, 19, 79, .10);   --danger-borda: rgba(192, 19, 79, .35);
    --info-bg: rgba(29, 95, 214, .10);     --info-borda: rgba(29, 95, 214, .35);
    --serie-1: #7A05C6;  --serie-2: #D80073;  --serie-3: #C98BFF;  --serie-outros: #8A8A93;
    --ordinal-1: #C98BFF;  --ordinal-2: #A30DFF;  --ordinal-3: #7A05C6;  --ordinal-4: #440077;
    --meta: #D80073;
    --grade: #E7E3F0;
    --brilho-pagina: none;
    --sync-vermelho: #C8283F;
    color-scheme: light;
  }
}

/* Apelidos para o CSS de componentes que o painel `rede` já tem (--card, --line, --ink, --mut):
   ele passa a seguir o tema sem reescrever regra nenhuma. */
:root { --card: var(--panel); --line: var(--border); --ink: var(--text); --mut: var(--muted); }