/* ==============================================
   ccMonet v2 Utilities
   ============================================== */

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

/* --- Text Color --- */
.text-primary { color: var(--color-primary-500); }
.text-muted { color: var(--color-gray-500); }
.text-dark { color: var(--color-gray-900); }
.text-white { color: #fff; }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }

/* --- Font Weight --- */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* --- Spacing --- */
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mx-auto { margin-left: auto; margin-right: auto; }

.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

/* --- Width --- */
.w-full { width: 100%; }
.max-w-md { max-width: 448px; }
.max-w-lg { max-width: 640px; }
.max-w-xl { max-width: 800px; }

/* --- Display --- */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

/* --- Visibility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 768px) {
  .hide-mobile { display: none; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none; }
}

/* --- Border --- */
.rounded-full { border-radius: var(--radius-full); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }

/* --- Position --- */
.relative { position: relative; }
.absolute { position: absolute; }

/* --- Opacity --- */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* --- Animations --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.animate-fade-in {
  animation: fadeIn 0.5s var(--ease-spring) forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s var(--ease-spring) forwards;
}

/* Stagger delays for children */
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 80ms; }
.stagger > *:nth-child(3) { animation-delay: 160ms; }
.stagger > *:nth-child(4) { animation-delay: 240ms; }
.stagger > *:nth-child(5) { animation-delay: 320ms; }
.stagger > *:nth-child(6) { animation-delay: 400ms; }