/* Utility Classes */

/* Text Alignment */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

/* Font Size */
.text-xs {
  font-size: var(--text-xs) !important;
}

.text-sm {
  font-size: var(--text-sm) !important;
}

.text-base {
  font-size: var(--text-base) !important;
}

.text-lg {
  font-size: var(--text-lg) !important;
}

.text-xl {
  font-size: var(--text-xl) !important;
}

.text-2xl {
  font-size: var(--text-2xl) !important;
}

.text-3xl {
  font-size: var(--text-3xl) !important;
}

.text-4xl {
  font-size: var(--text-4xl) !important;
}

.text-5xl {
  font-size: var(--text-5xl) !important;
}

/* Font Weight */
.font-normal {
  font-weight: var(--font-normal) !important;
}

.font-medium {
  font-weight: var(--font-medium) !important;
}

.font-semibold {
  font-weight: var(--font-semibold) !important;
}

.font-bold {
  font-weight: var(--font-bold) !important;
}

/* Text Color */
.text-primary {
  color: var(--text-primary) !important;
}

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

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

.text-success {
  color: var(--success) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-error {
  color: var(--error) !important;
}

.text-info {
  color: var(--info) !important;
}

/* Background Color */
.bg-primary {
  background-color: var(--bg-primary) !important;
}

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

.bg-tertiary {
  background-color: var(--bg-tertiary) !important;
}

.bg-success {
  background-color: var(--success) !important;
}

.bg-warning {
  background-color: var(--warning) !important;
}

.bg-error {
  background-color: var(--error) !important;
}

.bg-info {
  background-color: var(--info) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

/* Margin */
.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: var(--space-1) !important;
}

.m-2 {
  margin: var(--space-2) !important;
}

.m-3 {
  margin: var(--space-3) !important;
}

.m-4 {
  margin: var(--space-4) !important;
}

.m-5 {
  margin: var(--space-5) !important;
}

.m-6 {
  margin: var(--space-6) !important;
}

.m-8 {
  margin: var(--space-8) !important;
}

.m-auto {
  margin: auto !important;
}

/* Margin Top */
.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: var(--space-1) !important;
}

.mt-2 {
  margin-top: var(--space-2) !important;
}

.mt-3 {
  margin-top: var(--space-3) !important;
}

.mt-4 {
  margin-top: var(--space-4) !important;
}

.mt-5 {
  margin-top: var(--space-5) !important;
}

.mt-6 {
  margin-top: var(--space-6) !important;
}

.mt-8 {
  margin-top: var(--space-8) !important;
}

/* Margin Bottom */
.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: var(--space-1) !important;
}

.mb-2 {
  margin-bottom: var(--space-2) !important;
}

.mb-3 {
  margin-bottom: var(--space-3) !important;
}

.mb-4 {
  margin-bottom: var(--space-4) !important;
}

.mb-5 {
  margin-bottom: var(--space-5) !important;
}

.mb-6 {
  margin-bottom: var(--space-6) !important;
}

.mb-8 {
  margin-bottom: var(--space-8) !important;
}

/* Margin Left */
.ml-0 {
  margin-left: 0 !important;
}

.ml-1 {
  margin-left: var(--space-1) !important;
}

.ml-2 {
  margin-left: var(--space-2) !important;
}

.ml-3 {
  margin-left: var(--space-3) !important;
}

.ml-4 {
  margin-left: var(--space-4) !important;
}

.ml-auto {
  margin-left: auto !important;
}

/* Margin Right */
.mr-0 {
  margin-right: 0 !important;
}

.mr-1 {
  margin-right: var(--space-1) !important;
}

.mr-2 {
  margin-right: var(--space-2) !important;
}

.mr-3 {
  margin-right: var(--space-3) !important;
}

.mr-4 {
  margin-right: var(--space-4) !important;
}

.mr-auto {
  margin-right: auto !important;
}

/* Margin X-axis */
.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Margin Y-axis */
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: var(--space-1) !important;
  margin-bottom: var(--space-1) !important;
}

.my-2 {
  margin-top: var(--space-2) !important;
  margin-bottom: var(--space-2) !important;
}

.my-3 {
  margin-top: var(--space-3) !important;
  margin-bottom: var(--space-3) !important;
}

.my-4 {
  margin-top: var(--space-4) !important;
  margin-bottom: var(--space-4) !important;
}

/* Padding */
.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: var(--space-1) !important;
}

.p-2 {
  padding: var(--space-2) !important;
}

.p-3 {
  padding: var(--space-3) !important;
}

.p-4 {
  padding: var(--space-4) !important;
}

.p-5 {
  padding: var(--space-5) !important;
}

.p-6 {
  padding: var(--space-6) !important;
}

.p-8 {
  padding: var(--space-8) !important;
}

/* Padding Top */
.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: var(--space-1) !important;
}

.pt-2 {
  padding-top: var(--space-2) !important;
}

.pt-3 {
  padding-top: var(--space-3) !important;
}

.pt-4 {
  padding-top: var(--space-4) !important;
}

/* Padding Bottom */
.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: var(--space-1) !important;
}

.pb-2 {
  padding-bottom: var(--space-2) !important;
}

.pb-3 {
  padding-bottom: var(--space-3) !important;
}

.pb-4 {
  padding-bottom: var(--space-4) !important;
}

/* Padding Left */
.pl-0 {
  padding-left: 0 !important;
}

.pl-1 {
  padding-left: var(--space-1) !important;
}

.pl-2 {
  padding-left: var(--space-2) !important;
}

.pl-3 {
  padding-left: var(--space-3) !important;
}

.pl-4 {
  padding-left: var(--space-4) !important;
}

/* Padding Right */
.pr-0 {
  padding-right: 0 !important;
}

.pr-1 {
  padding-right: var(--space-1) !important;
}

.pr-2 {
  padding-right: var(--space-2) !important;
}

.pr-3 {
  padding-right: var(--space-3) !important;
}

.pr-4 {
  padding-right: var(--space-4) !important;
}

/* Padding X-axis */
.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.px-1 {
  padding-left: var(--space-1) !important;
  padding-right: var(--space-1) !important;
}

.px-2 {
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}

.px-3 {
  padding-left: var(--space-3) !important;
  padding-right: var(--space-3) !important;
}

.px-4 {
  padding-left: var(--space-4) !important;
  padding-right: var(--space-4) !important;
}

/* Padding Y-axis */
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: var(--space-1) !important;
  padding-bottom: var(--space-1) !important;
}

.py-2 {
  padding-top: var(--space-2) !important;
  padding-bottom: var(--space-2) !important;
}

.py-3 {
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
}

.py-4 {
  padding-top: var(--space-4) !important;
  padding-bottom: var(--space-4) !important;
}

/* Border */
.border {
  border: 1px solid var(--border) !important;
}

.border-0 {
  border: 0 !important;
}

.border-top {
  border-top: 1px solid var(--border) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--border) !important;
}

.border-left {
  border-left: 1px solid var(--border) !important;
}

.border-right {
  border-right: 1px solid var(--border) !important;
}

/* Border Radius */
.rounded-none {
  border-radius: 0 !important;
}

.rounded-sm {
  border-radius: var(--radius-sm) !important;
}

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

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

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

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

/* Shadow */
.shadow-none {
  box-shadow: none !important;
}

.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

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

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

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

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

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

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

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.cursor-wait {
  cursor: wait !important;
}

.cursor-move {
  cursor: move !important;
}

/* User Select */
.select-none {
  user-select: none !important;
}

.select-text {
  user-select: text !important;
}

.select-all {
  user-select: all !important;
}

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

/* Truncate Text */
.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Line Clamp */
.line-clamp-1 {
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
}

.line-clamp-2 {
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.line-clamp-3 {
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

/* Aspect Ratio */
.aspect-square {
  aspect-ratio: 1 / 1 !important;
}

.aspect-video {
  aspect-ratio: 16 / 9 !important;
}

/* Transitions */
.transition-none {
  transition: none !important;
}

.transition-all {
  transition: all var(--transition-base) var(--ease-in-out) !important;
}

.transition-colors {
  transition: background-color var(--transition-base) var(--ease-in-out),
              border-color var(--transition-base) var(--ease-in-out),
              color var(--transition-base) var(--ease-in-out) !important;
}

.transition-opacity {
  transition: opacity var(--transition-base) var(--ease-in-out) !important;
}

.transition-transform {
  transition: transform var(--transition-base) var(--ease-in-out) !important;
}

/* Transform */
.scale-95 {
  transform: scale(0.95) !important;
}

.scale-100 {
  transform: scale(1) !important;
}

.scale-105 {
  transform: scale(1.05) !important;
}

.scale-110 {
  transform: scale(1.1) !important;
}

.rotate-0 {
  transform: rotate(0deg) !important;
}

.rotate-90 {
  transform: rotate(90deg) !important;
}

.rotate-180 {
  transform: rotate(180deg) !important;
}

.rotate-270 {
  transform: rotate(270deg) !important;
}

/* Hover Effects */
.hover\:opacity-80:hover {
  opacity: 0.8 !important;
}

.hover\:scale-105:hover {
  transform: scale(1.05) !important;
}

.hover\:shadow-lg:hover {
  box-shadow: var(--shadow-lg) !important;
}

/* Focus Effects */
.focus\:outline-none:focus {
  outline: none !important;
}

.focus\:ring:focus {
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* Active Effects */
.active\:scale-95:active {
  transform: scale(0.95) !important;
}