/* Paleta única do site.
 *
 * Antes cada folha (style.css, results.css, channels.css) tinha o seu :root
 * com cores próprias, e as telas antigas (player, timeline, relatório)
 * ficavam verdes enquanto o resto era lilás. Toda página carrega este
 * arquivo primeiro; as outras folhas só usam as variáveis.
 *
 * Os nomes antigos de cada folha continuam valendo como apelidos, para não
 * precisar reescrever todos os seletores de uma vez.
 */
:root {
  color-scheme: dark;

  /* Superfícies */
  --bg: #101116;
  --surface: #181a22;
  --surface-2: #11131a;
  --surface-hover: #20232e;
  --field: #0f1016;
  --sidebar: #0b0c10;
  --line: #2b2d38;
  --nav-current: #24283d;

  /* Texto */
  --text: #f1f2f7;
  --muted: #a1a5b6;

  /* Destaque: lilás. --accent para texto e bordas, --accent-fill para
     botões principais, com --ink como texto sobre ele. */
  --accent: #b3bdff;
  --accent-fill: #b3bdff;
  --accent-fill-hover: #c4ccff;
  --ink: #171e48;
  --accent-soft: rgb(179 189 255 / .07);
  --accent-ring: rgb(179 189 255 / .18);
  --accent-line: rgb(179 189 255 / .35);

  /* Estados (separados do destaque) */
  --success: #93d9b3;
  --warning: #edc593;
  --danger: #f2a4ae;

  /* Apelidos dos nomes antigos */
  --panel: var(--surface);
  --panel-hover: var(--surface-hover);
  --accent-strong: var(--accent-fill);
  --green: var(--success);

  --font: 'Segoe UI', system-ui, sans-serif;
  --nav-width: 190px;
  --page-gutter: 28px;
}

/* Regras comuns a todas as telas. */

/* "hidden" vale mesmo quando a folha da página dá display:flex/grid. */
[hidden] { display: none !important; }

/* Foco visível em tudo que recebe teclado, não só em links e botões. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }

/* "Ir para o conteúdo": escondido até receber foco. nav.js cria o link. */
.skip-link { position: fixed; top: -80px; left: 12px; z-index: 50; padding: 12px; border-radius: 8px; background: var(--accent-fill); color: var(--ink); font-weight: 600; }
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

[tabindex="-1"]:focus { outline: none; }