:root {
  --bg-gradient-start: #0f172a;
  --bg-gradient-end: #1e1b4b;
  --surface: #1e293b;
  --surface-alt: #0f172a;
  --border: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-faint: #64748b;
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-light: #818cf8;
  --danger: #f87171;
  --success: #34d399;
  --warning: #fbbf24;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
  color-scheme: dark;
}

/* Foco visível global (acessibilidade / navegação por teclado) - cobre
   botões, links e qualquer coisa clicável que não tenha um :focus próprio
   definido (inputs de formulário já têm o próprio anel via box-shadow nos
   CSS de cada página, então isso aqui é o reforço padrão pra tudo que não
   tem). :focus-visible em vez de :focus evita o anel aparecer em clique de
   mouse, só em navegação por Tab/teclado - carregado em toda página porque
   variables.css é o primeiro CSS de todas elas. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}