/* Utility Classes */

/* Layout Containers */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Typography Classes */
.display-xl {
  font-size: var(--text-display-xl);
  line-height: var(--leading-tight);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.display-lg {
  font-size: var(--text-display-lg);
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.display-md {
  font-size: var(--text-display-md);
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.heading-xl {
  font-size: var(--text-heading-xl);
  line-height: var(--leading-tight);
  font-weight: 600;
}

.heading-lg {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-normal);
  font-weight: 600;
}

.heading-md {
  font-size: var(--text-heading-md);
  line-height: var(--leading-normal);
  font-weight: 600;
}

.body-xl {
  font-size: var(--text-body-xl);
  line-height: var(--leading-relaxed);
  font-weight: 400;
}

.body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  font-weight: 400;
}

.body-md {
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  font-weight: 400;
}

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

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

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

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

/* Spacing Utilities */
.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.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-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.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); }

/* Display Utilities */
.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

/* Flexbox Utilities */
.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: var(--space-2);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-6 {
  gap: var(--space-6);
}

.gap-8 {
  gap: var(--space-8);
}

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

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

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

.overflow-auto {
  overflow: auto;
}

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

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

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

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

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

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

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

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

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

/* Animation Utilities */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.4s ease-out;
}

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

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

.transition-slow {
  transition-duration: var(--transition-slow);
}

/* Responsive Utilities */
@media (max-width: 768px) {
  .md\:hidden {
    display: none;
  }
}

@media (min-width: 769px) {
  .md\:block {
    display: block;
  }
  
  .md\:flex {
    display: flex;
  }
}