/* ========================================
   🎨 UTILITIES CSS — CLEAN
======================================== */

/* SPACING */
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }

.mb-8  { margin-bottom: 8px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }

.p-0 { padding: 0; }
.m-0 { margin: 0; }

/* TEXT */
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-success { color: #25d366; }

.text-muted { color: #666; }
.text-dark { color: #333; }

.text-white-light { color: rgba(255,255,255,0.8); }

/* LINKS */
.link-primary {
  color: var(--primary);
  text-decoration: none;
}
.link-primary:hover { text-decoration: underline; }

.link-white {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}
.link-white:hover { color: #fff; }

/* ICONS */
.icon-primary { color: var(--primary); margin-left: 8px; }
.icon-accent { color: var(--accent); margin-left: 8px; }
.icon-success { color: #25d366; margin-left: 8px; }

/* RESET */
.list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* FLEX */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }