/* ==========================================================================
   Outglocal Theme — utilities.css
   Utilitários pequenos e previsíveis. Usar com moderação;
   preferir sempre os estilos de componente.
   ========================================================================== */

/* Alinhamento */
.text-center {
	text-align: center;
}

/* Espaçamentos pontuais (usar apenas quando o layout do componente não chega) */
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

/* Fundos */
.bg-surface {
	background: var(--color-surface);
}

/* Grelha genérica (para composições rápidas em páginas) */
.grid {
	display: grid;
	gap: var(--spacing-md);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
}