/* Paleta de cores do Alerta10 — única fonte de verdade, compartilhada por
   todas as telas via <link>. Antes cada página declarava seu próprio bloco
   :root, duplicado em ~17 arquivos; centralizado aqui (Ago/2026) pra toda
   tela nova nascer com as cores certas e, no dia que o modo escuro entrar
   em pauta, a paleta ter um único lugar pra ganhar sua versão dark.

   Set/2026 — ESTE ARQUIVO SUBSTITUI css/tokens.css. O que mudou:
     1. Nenhuma variável existente foi renomeada ou removida. Tudo que já era
        usado (--primary, --action, --bg, --border, --text, --text-2,
        --green*, --amber*, --red*, --gray*, --status-*) continua com o mesmo
        nome e o mesmo hexadecimal. Trocar o arquivo não muda nenhuma tela.
     2. Entraram tokens que hoje estão escritos à mão dentro do <style> de
        cada página ou do sidebar.css: superfícies (--surface, --surface-2,
        --border-2), terceiro nível de texto (--text-3), tinta de ação
        (--action-tint, que é o #EFF6FF repetido 8 vezes no sidebar.css),
        sombras, raios, tipografia e densidade.
     3. O modo escuro deixou de ser hipótese: está no bloco
        :root[data-theme="dark"] abaixo. Ele só entra em vigor quando alguém
        colocar data-theme="dark" no <html> — sem isso, nada muda.
        ATENÇÃO: o modo escuro só fica correto depois que os hexadecimais
        cravados no sidebar.css e nos <style> de página forem trocados pelos
        tokens correspondentes. Ver GUIA-DESIGN.md, seção 4. */

/* ---------- Fontes hospedadas no projeto (Set/2026) ----------
   A identidade visual declara Inter desde sempre e as 23 telas escrevem
   font-family:'Inter' — mas a fonte NUNCA foi carregada: não havia <link>
   nem @font-face em lugar nenhum, e o sistema inteiro rodou no tipo padrão
   do sistema operacional (item 110 do backlog). Isto fecha esse item.

   Por que os arquivos ficam em css/fontes/ e não no link do Google Fonts:
   o link faz o navegador de cada visitante pedir a fonte ao servidor do
   Google, entregando o IP e a página visitada a um terceiro — inclusive nas
   páginas públicas (site, login, política de privacidade), o que obrigaria
   a declarar o Google como mais um operador na Política. Hospedando aqui,
   nenhum pedido sai para fora e a fonte ainda carrega mais rápido, porque
   vem do mesmo domínio que já está aberto.

   São fontes VARIÁVEIS: um arquivo por família cobre a faixa inteira de
   peso, em vez de um arquivo por peso. E só o subconjunto latino — os
   subconjuntos cirílico, grego e vietnamita do Google não servem a nada
   aqui. Total: 132 KB para as três famílias.

   O unicode-range é o que protege o resto: caractere fora dessa faixa
   (✓, ⚠, ▲, ☰) continua vindo do tipo do sistema, exatamente como hoje —
   o navegador nem chega a pedir o arquivo da fonte para desenhá-lo. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;   /* eixo completo do arquivo variável */
  font-display:swap;     /* texto aparece na hora e troca quando a fonte chega */
  src:url('fontes/inter.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fontes/inter-tight.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url('fontes/jetbrains-mono.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --primary:#14304D; --action:#2D6CDF; --action-hover:#1F53BC;
  --bg:#EFF3F8; --border:#E3E9F0; --text:#0F2338; --text-2:#64748B;
  --green:#16A34A; --green-bg:#F0FDF4; --green-text:#166534;
  --amber:#F59E0B; --amber-bg:#FFFBEB; --amber-text:#92400E;
  --red:#DC2626; --red-bg:#FEF2F2; --red-text:#991B1B;
  --gray:#94A3B8; --gray-bg:#F8FAFC;

  /* ---------- Cores de STATUS (Ago/2026) ----------
     RESERVADAS: significam conformidade e nada mais, em qualquer tela do
     sistema. Nunca usar como cor decorativa, de categoria ou de identidade
     visual — foi exatamente isso que produziu o defeito que motivou a
     mudança: os 8 pilares do Diagnóstico tinham uma cor fixa cada um, e o
     pilar "Regras de Ouro de Desenergização" aparecia VERMELHO mesmo a 100%
     de conformidade, porque a cor era identidade, não status.

     Faixas (mesmas em todo lugar; ver statusConformidade() em
     js/supabase-client.js, que é quem decide — o CSS só pinta):
       conforme      >= 90%
       atencao       70% a 89%
       nao-conforme  < 70%
       sem-dado      sem resposta / sem base de cálculo

     São os mesmos hexadecimais de --green/--amber/--red/--gray de propósito:
     o objetivo aqui não é introduzir cor nova, é dar NOME reservado ao uso,
     para que trocar o tom de "atenção" um dia não mexa em nenhum âmbar
     decorativo espalhado pelo produto. */
  --status-conforme:#16A34A;      --status-conforme-bg:#F0FDF4;      --status-conforme-text:#166534;
  --status-atencao:#F59E0B;       --status-atencao-bg:#FFFBEB;       --status-atencao-text:#92400E;
  --status-nao-conforme:#DC2626;  --status-nao-conforme-bg:#FEF2F2;  --status-nao-conforme-text:#991B1B;
  --status-sem-dado:#94A3B8;      --status-sem-dado-bg:#F8FAFC;      --status-sem-dado-text:#475569;

  /* ---------- Superfícies (Set/2026) ----------
     Três níveis, na ordem em que se empilham: --bg é o fundo da página,
     --surface é o card em cima dele, --surface-2 é a faixa dentro do card
     (cabeçalho de tabela, rodapé de nota, caixa de estado vazio).
     O #fff cravado em `.card` (componentes.css) e nos <style> de página é
     este --surface. --ink é o azul-petróleo da sidebar; hoje ela usa
     --primary, que continua valendo — --ink existe para o dia em que o
     fundo da navegação precisar escurecer sem mexer na cor de marca. */
  --ink:#14304D;
  /* --primary-fill e --action-contraste nasceram ao ligar o tema escuro, e os
     dois existem pelo mesmo motivo: um token que serve de PREENCHIMENTO e de
     TEXTO ao mesmo tempo nao pode clarear nem escurecer sem estragar um dos
     dois papeis.
       --primary-fill  = o navy de marca quando ele e FUNDO (ícone do logo,
         topo do crachá, toast). Fica igual nos dois temas, com texto branco
         por cima a 13,46 de contraste. Isso libera --primary para clarear no
         escuro e continuar legivel nos 72 lugares em que ele e COR DE TEXTO.
       --action-contraste = o que se desenha EM CIMA do preenchimento de acao
         (rotulo de .btn-primary, chip de filtro ativo, item ativo do menu).
         No claro e branco; no escuro precisa ser ESCURO, porque --action
         clareia para poder ser lido como texto sobre o card — medido: branco
         sobre o azul claro do tema escuro da 3,31, abaixo do minimo. */
  --primary-fill:#14304D;
  --action-contraste:#FFFFFF;

  /* ---------- Sidebar escura (Set/2026) ----------
     A navegação passou a ser ESCURA NOS DOIS TEMAS, como o desenho de
     referência. Isso é o que --ink sempre existiu para ser, e é o motivo de
     os tokens abaixo NÃO terem contraparte no bloco do tema escuro: o fundo
     da sidebar já é escuro no claro, então o texto dela é o mesmo nos dois —
     um único conjunto, sem par claro/escuro para manter em sincronia.
     Medido sobre os dois fundos possíveis (#14304D no tema claro, #050F18 no
     escuro): --ink-text dá 11,41 e 16,36; --ink-text-2 dá 5,56 e 7,98. Um
     terceiro nível mais claro chegou a ser testado (#7C93AB) e foi descartado
     por dar 4,24 sobre o navy — abaixo do mínimo de texto pequeno. */
  --ink-text:#E6EDF5;                     /* rótulo de item de menu */
  --ink-text-2:#93A9C0;                   /* rótulo de grupo, cargo, subtítulo */
  --ink-hover:rgba(255,255,255,.07);
  --ink-border:rgba(255,255,255,.12);
  --ink-ativo-bg:rgba(78,139,245,.22);    /* item da página atual */
  --ink-ativo-text:#CFE0FF;               /* 7,38 e 10,80 sobre o fundo acima */
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --border-2:#CBD5E1;   /* borda de input e de divisor mais presente */
  /* --text-3 veio do handoff como #94A3B8 e foi ESCURECIDO aqui, por dois
     motivos medidos. (1) #94A3B8 é o hexadecimal exato de --gray e de
     --status-sem-dado: usá-lo em cabeçalho de coluna e rótulo de KPI pinta
     texto comum com a cor reservada de "sem dado", que é a mesma família de
     defeito já corrigida duas vezes neste produto. (2) Contraste: onde a
     camada v2 usa este token é tudo texto pequeno (cabeçalho de 9,5px,
     rótulo de KPI, nota de 11px, detalhe de linha), que exige 4,5:1 —
     #94A3B8 dá 2,56 sobre o card. #6A7792 é o cinza-ardósia MAIS CLARO que
     ainda alcança 4,5 sobre o card, então continua sendo um terceiro nível
     abaixo de --text-2 (#64748B, 4,76) sem deixar de ser legível. */
  /* --text-2-forte NAO veio do handoff; nasceu ao migrar os hexadecimais
     cravados. O guia mandava trocar o #475569 de 14 lugares por --text-2,
     e isso NAO e o mesmo valor: o contraste sobre o card cai de 7,58 para
     4,76. E os 14 lugares sao rotulo de controle — botao fantasma, chip de
     filtro, badge cinza, o link "Sair" da sidebar —, texto que se le e
     clica, nao legenda. Entao o tom escuro virou token proprio, de valor
     identico ao que estava la, em vez de ser aproximado para o vizinho.
     (Existe --status-sem-dado-text com este mesmo numero, mas usar token de
     status em texto comum e exatamente o que a regra da casa proibe.) */
  --text-2-forte:#475569;
  --text-3:#6A7792;     /* legenda, rótulo de coluna, texto desabilitado */
  --action-tint:#EFF6FF;  /* fundo de hover da sidebar e de ícone de ação */
  /* Texto e ícone DESENHADOS SOBRE --action-tint (badge azul, ícone da
     hierarquia, pílula selecionada do diagnóstico). Precisa de token próprio
     porque no tema escuro a tinta vira #122F4E: o #1D4ED8 que estava cravado
     em 10 lugares cai para 2,03 de contraste ali e some. */
  --action-text:#1D4ED8;
  --arc:#F97316;          /* destaque de arco elétrico — nunca como status */

  /* ---------- Tipografia (Set/2026) ----------
     Inter continua a fonte de UI. Inter Tight entra só em título, para o
     título de tela não ficar com a mesma textura do corpo. JetBrains Mono
     entra em dado de norma, TAG, data e percentual — texto corrido nunca.
     Se preferir não adicionar duas famílias agora, apague as duas linhas
     abaixo: tudo volta a ser Inter e nada quebra. */
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-titulo:'Inter Tight','Inter',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* ---------- Raio ---------- */
  --raio-xs:5px;    /* badge — igual ao que .badge já usa */
  --raio-sm:7px;
  --raio-md:9px;    /* botão, input */
  --raio-lg:12px;   /* card — igual ao que .card já usa */
  --raio-xl:16px;   /* card de destaque, modal */
  --raio-pill:99px;

  /* ---------- Sombra ----------
     Repouso, hover e modal. Só três, de propósito: elevação no produto
     significa "isso reage ao mouse" ou "isso está acima da página". */
  --sombra-sm:0 1px 2px rgba(15,35,56,.06);
  --sombra-md:0 10px 28px -12px rgba(15,35,56,.22);
  --sombra-lg:0 28px 64px -24px rgba(8,24,37,.5);

  /* ---------- Densidade ----------
     Os três valores que mudam quando a tela fica apertada ou quando a
     pessoa escolhe modo compacto. Trocados em runtime pelo atributo
     data-density no <html> (ver bloco abaixo) — nenhuma outra medida do
     sistema é variável. */
  --row-pad:11px;    /* padding vertical de linha de tabela */
  --card-pad:22px;   /* padding de .card — igual ao atual */
  --gap:16px;        /* espaço entre cards e entre blocos */

  /* ---------- Transição ---------- */
  --t-rapida:.12s; --t-base:.14s; --t-lenta:.18s;
}

/* Modo compacto — mesma tela, menos respiro. Ativar com
   <html data-density="compacta">. */
:root[data-density="compacta"]{
  --row-pad:7px; --card-pad:15px; --gap:12px;
}

/* ---------- Modo escuro (Set/2026) ----------
   Ativar com <html data-theme="dark">. Só as variáveis que precisam mudar
   aparecem aqui; o resto é herdado do :root acima.
   Os hexadecimais de --green/--amber/--red/--gray NÃO mudam: status é a
   mesma cor nos dois temas, muda só o fundo e o texto do badge. */
:root[data-theme="dark"]{
  --ink:#050F18;
  --primary:#8FB4D8;          /* como TEXTO: 7,58 sobre o card, 8,56 na sidebar */
  --primary-fill:#14304D;     /* como FUNDO: o navy de marca nao muda */
  --action-contraste:#08192B; /* 5,35 sobre o azul de acao do tema escuro */
  --bg:#081420;
  --surface:#0E2130;
  --surface-2:#13293A;
  --border:#1D3447;
  --border-2:#2A4659;
  --text:#E8EFF5;
  --text-2:#94A9BA;
  --text-2-forte:#B7C6D4;   /* no escuro o "mais forte" e mais CLARO que --text-2 */
  --text-3:#6E8598;

  --action:#4E8BF5;         /* azul claro o bastante para ler sobre #0E2130 */
  --action-hover:#6BA0FA;
  --action-tint:#122F4E;
  --action-text:#93C0FF;

  --green-bg:#0D2A1C; --green-text:#6FE0A0;
  --amber-bg:#2A2110; --amber-text:#F5C266;
  --red-bg:#2C1516;   --red-text:#F79B98;
  --gray-bg:#112332;

  --status-conforme-bg:#0D2A1C;      --status-conforme-text:#6FE0A0;
  --status-atencao-bg:#2A2110;       --status-atencao-text:#F5C266;
  --status-nao-conforme-bg:#2C1516;  --status-nao-conforme-text:#F79B98;
  --status-sem-dado-bg:#112332;      --status-sem-dado-text:#94A9BA;

  --sombra-sm:0 1px 2px rgba(0,0,0,.4);
  --sombra-md:0 12px 30px -14px rgba(0,0,0,.7);
}