:root {
  --color-bg: #eef5ea;
  --color-surface: #ffffff;
  --color-surface-soft: #f8fbf7;
  --color-border: #e3eadf;
  --color-text: #004b50;
  --color-text-muted: #5b6b7d;
  --color-green: #008800;
  --color-green-dark: #0b4f43;
  --color-green-soft: #c8edbd;
  --color-blue: #044d7d;
  --color-shadow: rgba(15, 23, 42, 0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --sidebar-width: 300px;
  --font-sans: "Open Sans", "Segoe UI", Arial, sans-serif;
  --font-display: "Space Grotesk", "Segoe UI", Arial, sans-serif;
}

/* Médio (auditoria manual, 19/07/2026, achado "não respeita
   prefers-reduced-motion"): nenhuma animação/transição do site (spinner
   de carregamento, menu lateral deslizando, cartões de suporte, etc.)
   tinha alternativa pra quem configurou o sistema operacional pra reduzir
   movimento. Regra global, carregada em toda página (tokens.css é
   compartilhado) -- encurta qualquer animação/transição existente pra
   praticamente instantânea, sem precisar tocar em cada seletor
   individualmente em cards.css/sidebar.css/base.css/login.css. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Médio (auditoria manual, 19/07/2026, achado "foco de teclado
   inconsistente"): só login.css e uma parte de cards.css tinham regra de
   foco própria -- base.css, forms.css, header.css e sidebar.css não
   definiam nada, deixando o botão/link no que o navegador desse por
   padrão (varia entre Chrome/Firefox/Safari, às vezes pouco visível).
   Baseline global aqui (tokens.css é compartilhado por toda página); só
   :focus-visible (navegação por teclado), nunca aparece em clique de
   mouse. Qualquer regra de foco mais específica já existente (ex.:
   #login-section .input:focus) continua vencendo por especificidade CSS. */
:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
}
