/*
 * Tokens do padrão visual do ArcaneLab. Variáveis CSS puras (sem pré-processador) —
 * qualquer componente novo em components.css consome só o que está aqui, nunca um hex
 * direto. Ver docs/UI.md para a regra de uso.
 *
 * Cores WUBRG (branco/azul/preto/vermelho/verde de Magic) NUNCA aparecem aqui: elas só
 * existem como resposta da Scryfall para símbolos de mana (ver /mana/:symbol.svg e
 * manaCost.ts), nunca como cor de marca, botão ou estado.
 */
:root {
  /* Superfícies */
  --bg: #0b0d12;
  --panel: #121722;
  --panel-2: #171d29;
  --panel-3: #1d2433;
  --line: #252d3d;

  /* Texto — --muted-strong é a variante usada em texto pequeno (rótulos, metadados)
     porque --muted sozinho (#9098aa) não bate 4.5:1 sobre --panel; ver docs/UI.md#contraste. */
  --text: #f5f7fb;
  --muted: #9098aa;
  --muted-strong: #aab1c4;

  /* Marca (roxo) e acento secundário (teal) — reservados para UI, nunca reaproveitados
     como cor de mana. */
  --accent: #9b6cff;
  --accent-2: #5ad5c9;
  --accent-strong: #7c4fe0;

  /* Semântico — também nunca coincide com as cores oficiais de mana W/U/B/R/G. */
  --danger: #ff6f91;
  --danger-strong: #e14d72;
  --warning: #f3c969;
  --success: #3ddc84;
  --info: #6cc0ff;

  --shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.28);

  --radius-lg: 18px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --sidebar-width: 248px;
  --sidebar-width-collapsed: 76px;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  --transition-fast: 0.15s ease;
  --transition: 0.2s ease;
}

/* prefers-reduced-motion desliga qualquer transform/transition de hover em todo o app
   (regra do board) — cada componente com transform de hover tem o par ":hover" anulado
   aqui em vez de precisar lembrar disso arquivo por arquivo. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}