/**
 * 3Syxty Studio — Button Component
 *
 * A refined button system with primary, secondary, ghost, danger, and accent
 * variants. Three sizes (sm, md, lg). Supports icon-only, icon+text, and
 * text-only configurations. Beautifully animated state transitions.
 */

/* -----------------------------------------------------------------------
   Base Button
   ----------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-height-md);
    padding: 0 var(--space-4);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    user-select: none;
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 100ms ease-out;
    position: relative;
    overflow: hidden;
    outline: none;
    text-decoration: none;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

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

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

/* Loading spinner overlay */
.btn .btn-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn .btn-spinner svg {
    animation: spin 0.6s linear infinite;
}

.btn[data-loading="true"] .btn-content {
    visibility: hidden;
}

/* -----------------------------------------------------------------------
   Sizes
   ----------------------------------------------------------------------- */

.btn-sm {
    height: var(--btn-height-sm);
    padding: 0 var(--space-3);
    font-size: 12px;
    line-height: 1;
    border-radius: var(--radius-md);
}

.btn-md {
    height: var(--btn-height-md);
    padding: 0 var(--space-4);
    font-size: 13px;
    line-height: 1;
}

.btn-lg {
    height: var(--btn-height-lg);
    padding: 0 var(--space-6);
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.015em;
}

/* Icon-only variants */
.btn-icon-sm {
    width: var(--btn-height-sm);
    height: var(--btn-height-sm);
    padding: 0;
    border-radius: var(--radius-sm);
}

.btn-icon-md {
    width: var(--btn-height-md);
    height: var(--btn-height-md);
    padding: 0;
}

.btn-icon-lg {
    width: var(--btn-height-lg);
    height: var(--btn-height-lg);
    padding: 0;
    border-radius: var(--radius-lg);
}

.btn-icon-sm svg { width: 14px; height: 14px; }
.btn-icon-md svg { width: 16px; height: 16px; }
.btn-icon-lg svg { width: 18px; height: 18px; }

/* Inline icon sizing within text buttons */
.btn-sm svg { width: 14px; height: 14px; }
.btn-md svg { width: 16px; height: 16px; }
.btn-lg svg { width: 18px; height: 18px; }

/* -----------------------------------------------------------------------
   Variants
   ----------------------------------------------------------------------- */

/* Primary — premium filled accent */
.btn-primary {
    background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 40%, rgba(0,0,0,0.06) 100%),
                var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset,
                0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 40%, rgba(0,0,0,0.04) 100%),
                var(--accent-primary-hover);
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.35),
                0 0 20px rgba(108, 92, 231, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset,
                0 1px 0 rgba(255, 255, 255, 0.15) inset;
    transform: translateY(-0.5px);
}

.btn-primary:active:not(:disabled) {
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.08) 100%),
                var(--accent-primary-active);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(0, 0, 0, 0.06) inset;
    transform: translateY(0.5px);
}

/* Secondary — outlined */
.btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-default);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--accent-primary-subtle);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.btn-secondary:active:not(:disabled) {
    background-color: var(--accent-primary-muted);
}

/* Ghost — no border, subtle hover */
.btn-ghost {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--accent-primary-subtle);
    color: var(--text-primary);
}

.btn-ghost:active:not(:disabled) {
    background-color: var(--accent-primary-muted);
}

/* Danger — destructive actions */
.btn-danger {
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 40%, rgba(0,0,0,0.06) 100%),
                var(--error);
    color: #FFFFFF;
    border: none;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset,
                0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.btn-danger:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 40%, rgba(0,0,0,0.04) 100%),
                #DC2626;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35),
                0 0 20px rgba(239, 68, 68, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset,
                0 1px 0 rgba(255, 255, 255, 0.12) inset;
    transform: translateY(-0.5px);
}

.btn-danger:active:not(:disabled) {
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.08) 100%),
                #B91C1C;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(0, 0, 0, 0.06) inset;
    transform: translateY(0.5px);
}

/* Danger Ghost */
.btn-danger-ghost {
    background-color: transparent;
    color: var(--error);
    border-color: transparent;
}

.btn-danger-ghost:hover:not(:disabled) {
    background-color: var(--error-subtle);
}

/* Accent — gradient background for hero CTAs */
.btn-accent {
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%),
                var(--accent-gradient);
    color: #FFFFFF;
    border: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset,
                0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

.btn-accent:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%),
                var(--accent-gradient-vivid);
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.35),
                0 0 40px rgba(108, 92, 231, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset,
                0 1px 0 rgba(255, 255, 255, 0.15) inset;
    transform: translateY(-0.5px);
}

.btn-accent:active:not(:disabled) {
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.06) 100%),
                var(--accent-gradient);
    box-shadow: 0 1px 4px rgba(108, 92, 231, 0.2),
                0 0 0 1px rgba(0, 0, 0, 0.06) inset;
    transform: translateY(0.5px);
}

/* Soft — filled with subtle background */
.btn-soft {
    background-color: var(--accent-primary-subtle);
    color: var(--accent-primary);
    border-color: transparent;
}

.btn-soft:hover:not(:disabled) {
    background-color: var(--accent-primary-muted);
}

/* -----------------------------------------------------------------------
   Full Width
   ----------------------------------------------------------------------- */

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

/* -----------------------------------------------------------------------
   Button Group
   ----------------------------------------------------------------------- */

.btn-group {
    display: inline-flex;
    border-radius: var(--radius-md);
}

.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.btn-group .btn:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.btn-group .btn + .btn {
    margin-left: -1px;
}

.btn-group .btn:hover,
.btn-group .btn:focus-visible {
    z-index: 1;
}

/* -----------------------------------------------------------------------
   Ripple Effect (optional — add via JS)
   ----------------------------------------------------------------------- */

.btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.12;
    transform: scale(0);
    animation: ripple-expand 0.5s ease-out;
    pointer-events: none;
}

@keyframes ripple-expand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}