/*
 * Design tokens — extraídos do GTM (/opt/gtm/public/*.html) e alinhados com o
 * caminho que o News já seguiu em app/templates/base.html.
 *
 * Nota de arqueologia: o GTM não tem folha de estilos. São 15 ficheiros HTML com
 * o CSS inline copiado entre si, sem componentes e sem escala de severidade. O
 * News foi o primeiro a extrair estes valores para `:root` e é esse o padrão que
 * o SiteWatch continua. Onde os dois divergem (--body-bg), fica o valor do GTM,
 * que é a referência visual.
 *
 * Se e quando isto for partilhado pelas três apps, é este ficheiro que se serve
 * estaticamente — não um package de componentes. GTM (HTML estático), News
 * (Jinja2) e SiteWatch não partilham camada de rendering.
 */

:root {
  /* Marca */
  --brand: #ff3100;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;

  /* Sidebar */
  --sidebar-w: 220px;
  --sidebar-bg1: #14171d;
  --sidebar-bg2: #0b1b2f;
  --sidebar-border: #1d2f46;
  --sidebar-text: #eef4fb;
  --sidebar-nav-text: #b9c8d9;
  --sidebar-nav-hover: rgba(255, 255, 255, 0.08);
  --sidebar-nav-active: rgba(255, 255, 255, 0.14);
  --sidebar-muted: #7e93aa;

  /* Superfícies */
  --body-bg: #f4f6f9;
  --surface: #fff;
  --border: #e8eaed;
  --topbar-h: 54px;

  /* Texto */
  --text: #1a1a1a;
  --text-muted: #888;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala */
  --radius-sm: 3px;
  --radius: 10px;
  --radius-lg: 12px;

  /*
   * Severidades. Não existiam no GTM — os badges de lá são ad-hoc por página
   * (.badge-aberto, .badge-tipo.email). Estes valores são novos, escolhidos
   * dentro da paleta existente, e mapeiam o enum de `incidents.severity`.
   */
  --ok-bg: #dcfce7;
  --ok-fg: #15803d;
  --warning-bg: #fef3c7;
  --warning-fg: #92400e;
  --critical-bg: #fee2e2;
  --critical-fg: #b91c1c;
  --muted-bg: #f3f4f6;
  --muted-fg: #6b7280;
}

.badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.badge-ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge-warning { background: var(--warning-bg); color: var(--warning-fg); }
.badge-critical { background: var(--critical-bg); color: var(--critical-fg); }
.badge-muted { background: var(--muted-bg); color: var(--muted-fg); }