/* Utility Classes */

/* Spacing utilities */
.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-2xl { margin: var(--spacing-2xl); }
.m-3xl { margin: var(--spacing-3xl); }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.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); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.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); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }

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

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

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

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

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

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

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

/* Button Components */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
    white-space: nowrap;
    user-select: none;
}

.btn__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.btn__icon--large {
    width: 32px;
    height: 32px;
}

.btn:focus {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 2px;
}

.btn--primary {
    background-color: var(--color-text-primary);
    color: var(--color-bg-primary);
    border-color: var(--color-text-primary);
}

.btn--primary:hover {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.btn--outline {
    background-color: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.btn--outline:hover {
    background-color: var(--color-text-primary);
    color: var(--color-bg-primary);
    border-color: var(--color-text-primary);
    transform: translateY(-1px);
}

.btn--secondary {
    background-color: var(--color-bg-secondary, #f5f5f5);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

.btn--secondary:hover {
    background-color: var(--color-text-secondary);
    color: var(--color-bg-primary);
    border-color: var(--color-text-secondary);
    transform: translateY(-1px);
}

.btn--small {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn--large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn:disabled:hover {
    transform: none;
}

/* Card Component */
.card {
    background-color: var(--color-bg-primary);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-base);
    padding: var(--spacing-lg);
    transition: all var(--duration-base) var(--ease-out);
}

.card:hover {
    border-color: var(--color-border-dark);
    transform: translateY(-2px);
}

.card__header {
    margin-bottom: var(--spacing-md);
}

.card__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
}

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

/* Icon utilities */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
}

.icon--sm {
    width: 0.875em;
    height: 0.875em;
}

.icon--lg {
    width: 1.25em;
    height: 1.25em;
}

.icon--xl {
    width: 1.5em;
    height: 1.5em;
}

/* Border utilities */
.border {
    border: var(--border-width) solid var(--color-border);
}

.border-top {
    border-top: var(--border-width) solid var(--color-border);
}

.border-bottom {
    border-bottom: var(--border-width) solid var(--color-border);
}

.border-left {
    border-left: var(--border-width) solid var(--color-border);
}

.border-right {
    border-right: var(--border-width) solid var(--color-border);
}

.border-none {
    border: none;
}

/* Border radius utilities */
.rounded-none {
    border-radius: var(--radius-none);
}

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

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

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

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

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

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

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

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

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

.shadow-none {
    box-shadow: none;
}

/* Transition utilities */
.transition {
    transition: all var(--duration-base) var(--ease-out);
}

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

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

/* Transform utilities */
.transform {
    transform: translateZ(0); /* Enable hardware acceleration */
}

.hover\:translate-y-1:hover {
    transform: translateY(-0.25rem);
}

.hover\:translate-y-2:hover {
    transform: translateY(-0.5rem);
}

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

.opacity-50 {
    opacity: 0.5;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-100 {
    opacity: 1;
}

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

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

/* User select utilities */
.select-none {
    user-select: none;
}

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

/* Pointer events */
.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}