:root {
  /* BRAND.md §2 — cores */
  --azul-900: #0B3558;
  --azul-700: #17507F;
  --azul-500: #2E6DA4;
  --azul-100: #E6EEF6;

  --fundo: #F6F7F9;
  --superficie: #FFFFFF;
  --borda: #E3E7EC;
  --conector: #C9D3DD;

  --texto: #0B3558;
  --texto-fraco: #6B7C8F;

  --genero-m: #2E6DA4;
  --genero-f: #C2566E;
  --genero-x: #8896A6;

  --protegido-fundo: #EDF0F3;
  --protegido-silhueta: #A8B4C0;

  --destrutivo: #B3453C;

  /* decker.app — mark do ecossistema no header */
  --decker-azul-forte: #185FA5;
  --decker-azul-tint: #B5D4F4;

  /* §4 — forma */
  --raio-card: 12px;
  --raio-sheet: 20px;
  --raio-chip: 999px;
  --raio-conector: 8px;

  --traco-conector: 1px;
  --traco-foco: 2px;
  --faixa-genero: 3px;

  --sombra-card: 0 1px 2px rgba(11, 53, 88, .06), 0 2px 8px rgba(11, 53, 88, .04);
  --sombra-sheet: 0 -4px 24px rgba(11, 53, 88, .10);

  /* §5 — espaçamento, escala base 4 */
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-6: 24px;
  --espaco-8: 32px;
  --espaco-12: 48px;

  /* §7 — movimento */
  --duracao-recentralizar: 320ms;
  --easing-recentralizar: cubic-bezier(.2, .7, .3, 1);
  --duracao-sheet: 240ms;
  --duracao-hover: 120ms;
  --duracao-fantasma: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracao-recentralizar: 0ms;
    --duracao-sheet: 0ms;
    --duracao-hover: 0ms;
    --duracao-fantasma: 0ms;
  }
}