/* Cores da marca Smart NX. Paleta oficial: #1893EF (Azul Smart), #00BEFF (Azul Ciano), #0365CC (Azul Médio),
   #00112B (Preto Azulado), #F4F2F2 (Off White), #E5E5E5 (Cinza Gelo), #ABAEB5 (Cinza Médio).
   O app usa só o modo escuro (Preto Azulado como base). Os demais CSS só leem estas variáveis, sem cor própria.
   Texto pequeno não usa Cinza Médio direto sobre o fundo (contraste abaixo de 4,5:1): --muted e --accent-texto
   são tons derivados da paleta que passam no AA. */
:root {
  --snx-azul: #1893EF; --snx-ciano: #00BEFF; --snx-azul-medio: #0365CC;
  --snx-preto: #00112B; --snx-off-white: #F4F2F2; --snx-gelo: #E5E5E5; --snx-cinza: #ABAEB5;
  --display: Helvetica, "Helvetica Neue", Arial, system-ui, sans-serif;
  --body: Helvetica, "Helvetica Neue", Arial, system-ui, sans-serif;
}
:root {
  --bg: var(--snx-preto);
  --panel: rgba(0, 17, 43, 0.96);
  --superficie: #0a2342;
  --card: #0f2a4d;
  --line: rgba(244, 242, 242, 0.16);
  --fg: var(--snx-off-white);
  --muted: #c3cad4;  /* clareado em 2026-10-31 para o vidro ficar mais transparente sem perder o AA (vidro.css) */
  --suave: var(--snx-cinza);
  --accent: var(--snx-azul);
  --accent-texto: #4aaef5;
  --sobre-accent: var(--snx-preto);
  --foco: var(--snx-ciano);
  --ok: #4cc38a; --erro: #ff8a80; --erro-fundo: #3d1c24; --aviso: #f0c14b;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4);
  --veu: rgba(0, 8, 22, 0.72);
  --vinheta: rgba(0, 17, 43, 0.4);  /* leve: a cidade em dia de sol aparece nas bordas */
  color-scheme: dark;
  /* Camadas da interface sobre o mapa (docs/especificacao/camadas-da-interface.md): a lousa embaixo, os balões que
     seguem as pessoas, o HUD e a barra, os avisos e o minichat, e os painéis abertos por cima de tudo. */
  --z-lousa: 9; --z-mapa: 10; --z-hud: 11; --z-barra: 12; --z-midia: 13; --z-avisos: 14; --z-painel: 30;
}

/* Aparecer e sumir suave (app/client/ui/suave.js, mostrarSuave): o elemento entra crescendo ou subindo, com um leve
   passar do ponto, e sai mais rápido, encolhendo. Usa translate e scale (propriedades próprias), para não brigar com o
   transform que posiciona cada elemento. */
[data-suave] { transition: opacity .18s ease-out, scale .26s cubic-bezier(.34, 1.56, .64, 1), translate .26s cubic-bezier(.34, 1.56, .64, 1); }
[data-suave][data-visivel="nao"] { opacity: 0; transition: opacity .14s ease-in, scale .15s ease-in, translate .15s ease-in; }
[data-suave="escala"][data-visivel="nao"] { scale: .94; }
[data-suave="sobe"][data-visivel="nao"] { translate: 0 8px; }
[data-suave="desce"][data-visivel="nao"] { translate: 0 -8px; }
@media (prefers-reduced-motion: reduce) {
  [data-suave], [data-suave][data-visivel="nao"] { transition: opacity .12s linear; scale: none; translate: none; }
}

/* "Reduzir movimento" = Sim (data-reduzir-movimento="sim", conta.acessibilidade): sem animações nem transições, mesmo com o
   sistema sem preferência (o JS usa ui/acessibilidade.js, reduzirMovimento()). "Sistema" e "Não" não mexem aqui: os @media
   prefers-reduced-motion de cada CSS seguem o sistema. */
:root[data-reduzir-movimento="sim"] *:not([data-suave]), :root[data-reduzir-movimento="sim"] *::before, :root[data-reduzir-movimento="sim"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
:root[data-reduzir-movimento="sim"] [data-suave], :root[data-reduzir-movimento="sim"] [data-suave][data-visivel="nao"] { transition: opacity .12s linear; scale: none; translate: none; }

/* Barras de rolagem de todo o app finas e no azul da marca, sem o cinza padrão. scrollbar-color vale no Chrome e no
   Firefox; o ::-webkit-scrollbar, no Safari (o Chrome o ignora quando scrollbar-color está definido). Quem quer outra
   barra (as fichas de time do chat, as reações rápidas sem barra) sobrescreve com uma classe. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 70%, transparent) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }