.p-0 {
  padding: 0;
}
.p-xs {
  padding: var(--space-xs);
}
.p-sm {
  padding: var(--space-sm);
}
.p-md {
  padding: var(--space-md);
}
.p-lg {
  padding: var(--space-lg);
}
.p-xl {
  padding: var(--space-xl);
}
.p-2xl {
  padding: var(--space-2xl);
}

.pt-0 {
  padding-top: 0;
}
.pt-xs {
  padding-top: var(--space-xs);
}
.pt-sm {
  padding-top: var(--space-sm);
}
.pt-md {
  padding-top: var(--space-md);
}
.pt-lg {
  padding-top: var(--space-lg);
}
.pt-xl {
  padding-top: var(--space-xl);
}

.pb-0 {
  padding-bottom: 0;
}
.pb-xs {
  padding-bottom: var(--space-xs);
}
.pb-sm {
  padding-bottom: var(--space-sm);
}
.pb-md {
  padding-bottom: var(--space-md);
}
.pb-lg {
  padding-bottom: var(--space-lg);
}
.pb-xl {
  padding-bottom: var(--space-xl);
}

.pl-0 {
  padding-left: 0;
}
.pl-xs {
  padding-left: var(--space-xs);
}
.pl-sm {
  padding-left: var(--space-sm);
}
.pl-md {
  padding-left: var(--space-md);
}
.pl-lg {
  padding-left: var(--space-lg);
}
.pl-xl {
  padding-left: var(--space-xl);
}

.pr-0 {
  padding-right: 0;
}
.pr-xs {
  padding-right: var(--space-xs);
}
.pr-sm {
  padding-right: var(--space-sm);
}
.pr-md {
  padding-right: var(--space-md);
}
.pr-lg {
  padding-right: var(--space-lg);
}
.pr-xl {
  padding-right: var(--space-xl);
}

.m-0 {
  margin: 0;
}
.m-auto {
  margin: auto;
}
.m-xs {
  margin: var(--space-xs);
}
.m-sm {
  margin: var(--space-sm);
}
.m-md {
  margin: var(--space-md);
}
.m-lg {
  margin: var(--space-lg);
}
.m-xl {
  margin: var(--space-xl);
}

.mt-0 {
  margin-top: 0;
}
.mt-auto {
  margin-top: auto;
}
.mt-xs {
  margin-top: var(--space-xs);
}
.mt-sm {
  margin-top: var(--space-sm);
}
.mt-md {
  margin-top: var(--space-md);
}
.mt-lg {
  margin-top: var(--space-lg);
}
.mt-xl {
  margin-top: var(--space-xl);
}
.mt-2xl {
  margin-top: var(--space-2xl);
}
.mt-3xl {
  margin-top: var(--space-3xl);
}

.mb-0 {
  margin-bottom: 0;
}
.mb-auto {
  margin-bottom: auto;
}
.mb-xs {
  margin-bottom: var(--space-xs);
}
.mb-sm {
  margin-bottom: var(--space-sm);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}
.mb-xl {
  margin-bottom: var(--space-xl);
}

.ml-0 {
  margin-left: 0;
}
.ml-auto {
  margin-left: auto;
}
.ml-xs {
  margin-left: var(--space-xs);
}
.ml-sm {
  margin-left: var(--space-sm);
}
.ml-md {
  margin-left: var(--space-md);
}
.ml-lg {
  margin-left: var(--space-lg);
}
.ml-xl {
  margin-left: var(--space-xl);
}

.mr-0 {
  margin-right: 0;
}
.mr-auto {
  margin-right: auto;
}
.mr-xs {
  margin-right: var(--space-xs);
}
.mr-sm {
  margin-right: var(--space-sm);
}
.mr-md {
  margin-right: var(--space-md);
}
.mr-lg {
  margin-right: var(--space-lg);
}
.mr-xl {
  margin-right: var(--space-xl);
}

/* Gap utilities */
.gap-0 {
  gap: 0;
}
.gap-xs {
  gap: var(--space-xs);
}
.gap-sm {
  gap: var(--space-sm);
}
.gap-md {
  gap: var(--space-md);
}
.gap-lg {
  gap: var(--space-lg);
}
.gap-xl {
  gap: var(--space-xl);
}

/* Width utilities */
.w-full {
  width: 100%;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: fit-content;
}

/* Height utilities */
.h-full {
  height: 100%;
}
.h-auto {
  height: auto;
}
.h-screen {
  height: 100vh;
}

/* Color utilities */
.text-primary {
  color: var(--color-primary);
}
.text-white {
  color: var(--color-white);
}
.text-gray-500 {
  color: var(--color-gray-500);
}
.text-gray-900 {
  color: var(--color-gray-900);
}
.text-success {
  color: var(--color-success);
}
.text-warning {
  color: var(--color-warning);
}
.text-error {
  color: var(--color-error);
}

.bg-primary {
  background: var(--color-primary);
}
.bg-white {
  background: var(--color-white);
}
.bg-gray-50 {
  background: var(--color-gray-50);
}
.bg-gray-100 {
  background: var(--color-gray-100);
}

/* Font utilities */
.font-light {
  font-weight: var(--font-light);
}
.font-normal {
  font-weight: var(--font-normal);
}
.font-medium {
  font-weight: var(--font-medium);
}
.font-semibold {
  font-weight: var(--font-semibold);
}
.font-bold {
  font-weight: var(--font-bold);
}

/* Border radius utilities */
.rounded-none {
  border-radius: 0;
}
.rounded-sm {
  border-radius: var(--radius-sm);
}
.rounded {
  border-radius: var(--radius-base);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-full {
  border-radius: var(--radius-full);
}

/* Shadow utilities */
.shadow-none {
  box-shadow: none;
}
.shadow-sm {
  box-shadow: var(--shadow-sm);
}
.shadow {
  box-shadow: var(--shadow-base);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* Transition utilities */
.transition {
  transition: all var(--transition-base);
}
.transition-fast {
  transition: all var(--transition-fast);
}
.transition-slow {
  transition: all var(--transition-slow);
}

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

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

/* Responsive utilities */
@media (max-width: 768px) {
  .mobile\:hidden {
    display: none;
  }
  .mobile\:block {
    display: block;
  }
  .mobile\:flex-col {
    flex-direction: column;
  }
  .mobile\:text-center {
    text-align: center;
  }
  .mobile\:w-full {
    width: 100%;
  }
  .mobile\:p-sm {
    padding: var(--space-sm);
  }
  .mobile\:mt-lg {
    margin-top: var(--space-lg);
  }
  .mobile\:mb-lg {
    margin-bottom: var(--space-lg);
  }
}

@media (max-width: 1024px) {
  .tablet\:hidden {
    display: none;
  }
  .tablet\:block {
    display: block;
  }
  .tablet\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}