/* ==========================================
UndefinedVerseOfficial
Button Component System
========================================== */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 44px;
padding: 0.7rem 1.25rem;
border: 1px solid transparent;
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
transition:
background-color var(--duration-normal) var(--ease-standard),
color var(--duration-normal) var(--ease-standard),
border-color var(--duration-normal) var(--ease-standard),
transform var(--duration-fast) var(--ease-standard);
}

.btn:active:not(:disabled) {
transform: scale(0.98);
}

.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}

/* Primary */

.btn-primary {
background: var(--color-chrome);
color: var(--color-obsidian);
border-color: var(--color-chrome);
}

.btn-primary:hover:not(:disabled) {
background: var(--color-white);
border-color: var(--color-white);
}

/* Secondary */

.btn-secondary {
background: var(--color-surface-raised);
color: var(--color-text);
border-color: var(--color-border-strong);
}

.btn-secondary:hover:not(:disabled) {
background: var(--color-steel);
border-color: var(--color-gunmetal);
}

/* Outline */

.btn-outline {
background: transparent;
color: var(--color-chrome);
border-color: var(--color-border-strong);
}

.btn-outline:hover:not(:disabled) {
background: rgba(216, 220, 226, 0.07);
border-color: var(--color-chrome);
}

/* Ghost */

.btn-ghost {
background: transparent;
color: var(--color-text-muted);
border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
color: var(--color-text);
background: rgba(216, 220, 226, 0.06);
}

/* Sizes */

.btn-sm {
min-height: 36px;
padding: 0.5rem 0.875rem;
font-size: var(--font-size-xs);
}

.btn-lg {
min-height: 50px;
padding: 0.875rem 1.75rem;
font-size: var(--font-size-base);
}

/* Shape */

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

/* Width */

.btn-block {
display: flex;
width: 100%;
}

/* Icon-only button */

.btn-icon {
width: 44px;
height: 44px;
min-width: 44px;
padding: 0;
border-radius: var(--radius-md);
}

/* Button groups */

.btn-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
}

/* Touchscreen optimization */

@media (hover: hover) {
.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
transform: translateY(-1px);
}
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
.btn {
transition: none;
}

.btn:active:not(:disabled) {
transform: none;
}
}