/* ============================================================
   Buttons - VIBRANT
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    position: relative;
    letter-spacing: 0.2px;
}

    .btn:disabled,
    .btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

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

/* ============ Sizes ============ */
.btn-xs {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}

.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-base);
    border-radius: var(--radius-lg);
}

.btn-xl {
    padding: var(--space-5) var(--space-8);
    font-size: var(--font-size-lg);
    border-radius: var(--radius-lg);
}

.btn-block {
    width: 100%;
}

/* ============ Primary ============ */
.btn-primary {
    background: var(--gradient-primary);
    color: #FFFFFF;
    box-shadow: var(--shadow-primary);
}

    .btn-primary:hover:not(:disabled) {
        box-shadow: 0 12px 28px -6px rgba(251, 133, 0, 0.5);
        transform: translateY(-2px);
        color: #FFFFFF;
    }

/* ============ Secondary ============ */
.btn-secondary {
    background: var(--gradient-secondary);
    color: #FFFFFF;
    box-shadow: var(--shadow-secondary);
}

    .btn-secondary:hover:not(:disabled) {
        box-shadow: 0 12px 28px -6px rgba(99, 102, 241, 0.5);
        transform: translateY(-2px);
        color: #FFFFFF;
    }

/* ============ Semantic ============ */
.btn-success {
    background: var(--gradient-success);
    color: #FFFFFF;
    box-shadow: var(--shadow-success);
}

    .btn-success:hover:not(:disabled) {
        box-shadow: 0 12px 28px -6px rgba(16, 185, 129, 0.5);
        transform: translateY(-2px);
        color: #FFFFFF;
    }

.btn-danger {
    background: var(--gradient-danger);
    color: #FFFFFF;
    box-shadow: var(--shadow-danger);
}

    .btn-danger:hover:not(:disabled) {
        box-shadow: 0 12px 28px -6px rgba(244, 63, 94, 0.5);
        transform: translateY(-2px);
        color: #FFFFFF;
    }

.btn-warning {
    background: var(--gradient-warning);
    color: #FFFFFF;
    box-shadow: 0 8px 20px -6px rgba(245, 158, 11, 0.35);
}

    .btn-warning:hover:not(:disabled) {
        box-shadow: 0 12px 28px -6px rgba(245, 158, 11, 0.5);
        transform: translateY(-2px);
        color: #FFFFFF;
    }

.btn-info {
    background: var(--gradient-info);
    color: #FFFFFF;
    box-shadow: var(--shadow-info);
}

    .btn-info:hover:not(:disabled) {
        box-shadow: 0 12px 28px -6px rgba(14, 165, 233, 0.5);
        transform: translateY(-2px);
        color: #FFFFFF;
    }

/* ============ Outline ============ */
.btn-outline {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-primary);
}

    .btn-outline:hover:not(:disabled) {
        background: var(--bg-tertiary);
        border-color: var(--color-primary-500);
        color: var(--color-primary-600);
        transform: translateY(-2px);
    }

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

    .btn-outline-primary:hover:not(:disabled) {
        background: var(--gradient-primary);
        color: #FFFFFF;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: var(--shadow-primary);
    }

/* ============ Ghost ============ */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

    .btn-ghost:hover:not(:disabled) {
        background: var(--bg-tertiary);
        color: var(--color-primary-600);
    }

/* ============ Icon Button ============ */
.btn-icon {
    padding: var(--space-2);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
}

    .btn-icon.btn-sm {
        width: 32px;
        height: 32px;
        padding: var(--space-1);
    }

    .btn-icon.btn-lg {
        width: 48px;
        height: 48px;
    }

/* ============ Loading ============ */
.btn.is-loading {
    color: transparent;
    pointer-events: none;
}

    .btn.is-loading::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        top: 50%;
        left: 50%;
        margin: -8px 0 0 -8px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: btnSpinner 0.6s linear infinite;
    }

    .btn.is-loading.btn-primary::after,
    .btn.is-loading.btn-secondary::after,
    .btn.is-loading.btn-success::after,
    .btn.is-loading.btn-danger::after,
    .btn.is-loading.btn-warning::after,
    .btn.is-loading.btn-info::after {
        border-color: #FFFFFF;
        border-right-color: transparent;
    }

@keyframes btnSpinner {
    to {
        transform: rotate(360deg);
    }
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-secondary-600);
    padding: 0;
    text-decoration: underline;
    font-weight: var(--font-weight-medium);
}

    .btn-link:hover:not(:disabled) {
        color: var(--color-secondary-800);
    }