:root {
  /* Motifs reutilizáveis: grid modular, nós de conexão, hairline gradiente. */
  --pattern-grid: linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
                  linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  --pattern-grid-size: var(--grid-size) var(--grid-size);
  --pattern-dots: radial-gradient(circle at center, var(--grid-line) 1px, transparent 1.2px);
  --pattern-dots-size: 24px 24px;
}

/* Utilitários mínimos — a fonte de verdade continua sendo os tokens. */
.mw-grid-bg { background-image: var(--pattern-grid); background-size: var(--pattern-grid-size); }
.mw-dots-bg { background-image: var(--pattern-dots); background-size: var(--pattern-dots-size); }
.mw-glow-bg { background-image: var(--glow-brand), var(--glow-accent); background-repeat: no-repeat; }
.mw-hairline { height: 1px; border: 0; background: var(--gradient-hairline); }
.mw-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.mw-label { font: var(--font-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); }
.mw-gradient-text { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }