/* ============================================
   Utility Classes
   ============================================ */

/* --- Text --- */
.text-center { text-align: center; }
.text-left { text-align: left; }

.gradient-text {
  background: var(--accent-glow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-dark { color: var(--text-dark); }
.text-light { color: var(--text-body-light); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* --- Spacing --- */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --- Display --- */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { flex-direction: column; }
.gap-1 { gap: 0.75rem; }
.gap-2 { gap: 2rem; }

/* --- Neon glow text (with blur shadow) --- */
.neon-text {
  background: var(--accent-glow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.neon-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  background: var(--accent-glow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: blur(30px);
  opacity: 0.4;
  z-index: -1;
}