/* Utility Classes */

/* Spacing */
.mt-sm {
  margin-top: var(--spacing-sm);
}
.mt-md {
  margin-top: var(--spacing-md);
}
.mt-lg {
  margin-top: var(--spacing-lg);
}
.mt-xl {
  margin-top: var(--spacing-xl);
}

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

.p-sm {
  padding: var(--spacing-sm);
}
.p-md {
  padding: var(--spacing-md);
}
.p-lg {
  padding: var(--spacing-lg);
}
.p-xl {
  padding: var(--spacing-xl);
}

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

/* Display */
.flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Colors */
.text-primary {
  color: var(--color-primary);
}
.text-accent {
  color: var(--color-accent-teal);
}
.text-secondary {
  color: var(--color-text-secondary);
}

.bg-primary {
  background-color: var(--color-primary);
}
.bg-surface {
  background-color: var(--color-surface);
}
.bg-accent {
  background-color: var(--color-accent-teal);
}

/* Borders */
.border-top {
  border-top: 1px solid var(--color-border);
}
.border-bottom {
  border-bottom: 1px solid var(--color-border);
}

/* Visibility */
.hidden {
  display: none;
}
.visible {
  display: block;
}

/* Image Effects */
.img-hover-zoom {
  overflow: hidden;
  border-radius: var(--border-radius);
}

.img-hover-zoom img {
  transition: transform var(--transition-speed);
}

.img-hover-zoom:hover img {
  transform: scale(1.05);
}

/* Section Backgrounds */
.section-light {
  background-color: var(--color-background);
}

.section-dark {
  background-color: var(--color-surface);
}

/* Max Width Utilities */
.max-w-sm {
  max-width: 600px;
  margin: 0 auto;
}
.max-w-md {
  max-width: 800px;
  margin: 0 auto;
}
.max-w-lg {
  max-width: 1000px;
  margin: 0 auto;
}