/*
 * tokens.css — identidade visual compartilhada do Portal OMR.
 *
 * 01/09 — primeira rodada da revisão de UI/UX (achados "Identidade visual" e
 * "Acessibilidade" da auditoria). Antes, cada tela (index.html, admin.html,
 * monitoramento.html) definia seu próprio <style> isolado e usava o cinza
 * padrão do Tailwind (bg-gray-900) sem nenhuma cor própria do produto — só o
 * login.html tinha uma identidade visual de verdade (foto + degradê + vidro
 * fosco). Este arquivo é o começo de um lugar único pra essas decisões, pra
 * não continuar copiando/colando cor solta em cada tela nova.
 *
 * Escopo desta rodada: cor de identidade (cabeçalho) + foco visível global.
 * NÃO inclui ainda a rampa semântica de prioridade (site/alarme/escalonamento
 * continuam cada um com sua própria cor por enquanto — isso é um passo
 * separado, maior, puxando index.html e admin.html juntos).
 */

:root {
  /* Extraído do degradê escuro do login.html (overlay sobre a foto de fundo,
     de rgba(0,0,0,.55) a rgba(0,0,0,.72)) — em vez de um preto neutro, um
     azul-petróleo bem escuro que carrega a mesma "temperatura" do login,
     mas sólido (sem depender de foto) pra funcionar em qualquer cabeçalho. */
  --omr-header-de: #0c2536;
  --omr-header-ate: #123448;

  /* Acento — usado com moderação (links/realces pontuais), nunca para
     status de severidade (isso continua sendo vermelho/âmbar/verde em cada
     tela, sem mudança nesta rodada). */
  --omr-accent: #2dd4bf;
  --omr-accent-ink: #06342f;

  --omr-focus-ring: #2dd4bf;
}

/* Cabeçalho — substitui bg-gray-900 nas 3 telas internas (index/admin/
   monitoramento). O login.html mantém seu próprio tratamento (foto + vidro
   fosco), que já está correto e não precisa mudar. */
.omr-header {
  background: linear-gradient(135deg, var(--omr-header-de), var(--omr-header-ate));
}

/* Foco visível — mesmo tratamento que já existia (só) no botão de
   mostrar/ocultar senha do login.html (anel + espaçamento), agora como
   padrão em qualquer botão/link/campo do sistema. O Tailwind Play CDN não
   aplica um reset de :focus-visible sozinho, mas o navegador some com o
   anel padrão em alguns componentes (ex: dentro de position:relative com
   overflow:hidden) — declarar explícito garante que fique visível sempre,
   com uma cor que também é a mesma em todas as telas. */
:is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--omr-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Ícones SVG inline (substituem emoji nos pontos mais visíveis — cabeçalho,
   navegação, botões de ação). São desenhados no mesmo tamanho da fonte ao
   redor (1em) e herdam a cor do texto via stroke="currentColor" no próprio
   elemento, então não precisam de classe de cor separada. */
.omr-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.175em;
  flex-shrink: 0;
}