/* Utility Classes */

/* Text Colors */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-accent {
  color: var(--color-accent);
}

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

.bg-secondary {
  background-color: var(--color-secondary);
}

/* Width Utilities */
.w-full {
  width: 100%;
}

.max-w-2xl {
  max-width: 672px;
}

.max-w-4xl {
  max-width: 896px;
}

.max-w-6xl {
  max-width: 1152px;
}

/* Margin Auto */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Cursor */
.cursor-pointer {
  cursor: pointer;
}

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

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

.absolute {
  position: absolute;
}

/* Z-Index */
.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-50 {
  z-index: 50;
}

/* Opacity */
.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-100 {
  opacity: 1;
}

/* Transitions */
.transition {
  transition: all var(--transition-base);
}

.transition-fast {
  transition: all var(--transition-fast);
}

/* Aspect Ratio */
.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

/* Object Fit */
.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}

/* Border Radius */
.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-full {
  border-radius: var(--radius-full);
}

/* Shadow */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}