/*
 * Tema do SINAL — tokens de cor partilhados por toda a aplicação.
 *
 * Dois aspetos:
 *   - Claro (por defeito, sem classe nenhuma em <html>) — branco e neutro.
 *   - .dark — modo escuro, preto.
 *
 * (Existiu também um terceiro aspeto "Sistema", com o azul-marinho da
 * landing page como fundo — foi removido a pedido; o Claro passou a ser
 * o aspeto por defeito.)
 *
 * Em vez de escrever "bg-white dark:bg-gray-900" em cada elemento de cada
 * página, usa-se uma única classe (ex: "bg-surface") em todo o lado. A cor
 * muda sozinha consoante a classe .dark estar ou não presente em <html> —
 * nunca é preciso duplicar nada no HTML das páginas.
 */

:root {
  /* CLARO — branco e neutro, sem azul */
  --color-surface: #ffffff;
  --color-surface-sunken: #f9fafb;
  --color-surface-hover: #f3f4f6;
  --color-surface-alt: #f3f4f6;

  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6b7280;
  --color-text-faint: #9ca3af;

  --color-border: #d1d5db;
  --color-border-subtle: #e5e7eb;

  /* Fundo claro — o azul-marinho da marca lê-se bem aqui */
  --color-accent: #073B66;
  --color-accent-border: #bfdbfe;
  --color-accent-soft: #eff6ff;
}

.dark {
  /* ESCURO — preto */
  --color-surface: #141414;
  --color-surface-sunken: #000000;
  --color-surface-hover: #1f1f1f;
  --color-surface-alt: #1f1f1f;

  --color-text-primary: #f5f5f5;
  --color-text-secondary: #d4d4d4;
  --color-text-muted: #a3a3a3;
  --color-text-faint: #737373;

  --color-border: #2e2e2e;
  --color-border-subtle: #1f1f1f;

  /* Fundo preto — precisa de azul claro para se ler bem */
  --color-accent: #4FA3D9;
  --color-accent-border: #1e3a5f;
  --color-accent-soft: rgba(79, 163, 217, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════
   Níveis de aviso (Amarelo, Laranja, Vermelho) — FONTE ÚNICA das cores.

   Todas as páginas usam estas classes em vez de repetir cores: para mudar uma
   cor basta mudar a variável aqui (este ficheiro é carregado pelo base.html e
   pela página pública).

   Escolhas (contraste WCAG do texto sobre o preenchimento):
     amarelo   #FACC15 + texto #422006   9,5:1
     laranja   #F97316 + texto #431407   5,6:1   (o branco só dá 2,8:1)
     vermelho  #DC2626 + texto #FFFFFF   4,8:1
   Preenchimento e texto são fixos (não dependem do tema claro/escuro): por isso
   o contraste é o mesmo nos dois. O contorno (nível não selecionado) é que muda
   com o tema, para ter pelo menos 3:1 contra o fundo.

   Classes:
     .nivel-{amarelo|laranja|vermelho}           etiqueta preenchida / nível selecionado
     .nivel-borda-{...}                          borda do nível selecionado
     .nivel-contorno-{...}                       contorno do nível não selecionado (+ hover)
     .nivel-topo-{...}                           barra de cor no topo de cartões
   Uso em Jinja:  class="... nivel-{{ event.level|lower }}"
   Uso em JS:     'nivel-' + level.toLowerCase()
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --nivel-amarelo: #FACC15;
  --nivel-amarelo-texto: #422006;
  --nivel-amarelo-borda: #CA8A04;
  --nivel-amarelo-contorno: #A16207;
  --nivel-amarelo-hover: rgba(250, 204, 21, 0.20);

  --nivel-laranja: #F97316;
  --nivel-laranja-texto: #431407;
  --nivel-laranja-borda: #C2410C;
  --nivel-laranja-contorno: #EA580C;
  --nivel-laranja-hover: rgba(249, 115, 22, 0.20);

  --nivel-vermelho: #DC2626;
  --nivel-vermelho-texto: #FFFFFF;
  --nivel-vermelho-borda: #991B1B;
  --nivel-vermelho-contorno: #DC2626;
  --nivel-vermelho-hover: rgba(220, 38, 38, 0.15);
}

.dark {
  --nivel-amarelo-contorno: #FACC15;
  --nivel-laranja-contorno: #FB923C;
  --nivel-vermelho-contorno: #EF4444;
}

.nivel-amarelo  { background-color: var(--nivel-amarelo);  color: var(--nivel-amarelo-texto); }
.nivel-laranja  { background-color: var(--nivel-laranja);  color: var(--nivel-laranja-texto); }
.nivel-vermelho { background-color: var(--nivel-vermelho); color: var(--nivel-vermelho-texto); }

.nivel-borda-amarelo  { border-color: var(--nivel-amarelo-borda); }
.nivel-borda-laranja  { border-color: var(--nivel-laranja-borda); }
.nivel-borda-vermelho { border-color: var(--nivel-vermelho-borda); }

.nivel-contorno-amarelo  { border-color: var(--nivel-amarelo-contorno); }
.nivel-contorno-laranja  { border-color: var(--nivel-laranja-contorno); }
.nivel-contorno-vermelho { border-color: var(--nivel-vermelho-contorno); }
.nivel-contorno-amarelo:hover  { background-color: var(--nivel-amarelo-hover); }
.nivel-contorno-laranja:hover  { background-color: var(--nivel-laranja-hover); }
.nivel-contorno-vermelho:hover { background-color: var(--nivel-vermelho-hover); }

.nivel-topo-amarelo  { border-top-color: var(--nivel-amarelo); }
.nivel-topo-laranja  { border-top-color: var(--nivel-laranja); }
.nivel-topo-vermelho { border-top-color: var(--nivel-vermelho); }