/* assets/css/04-components/buttons.css */
/* Button variants */

.btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            var(--space-2);
    padding:        12px 28px;
    border:         1px solid transparent;
    border-radius:  var(--radius-md);
    font-family:    var(--font-body);
    font-size:      0.9rem;
    font-weight:    600;
    cursor:         pointer;
    transition:     all var(--transition-normal);
    white-space:    nowrap;
    position:       relative;
    overflow:       hidden;
}

.btn::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
    opacity:    0;
    transition: opacity var(--transition-fast);
}
.btn:hover::after { opacity: 1; }

.btn--primary {
    background:   var(--teal);
    color:        #0d1117;
    border-color: var(--teal);
    box-shadow:   0 0 20px rgba(78,201,176,0.25);
}
.btn--primary:hover {
    transform:  translateY(-2px);
    box-shadow: 0 0 32px rgba(78,201,176,0.45);
}

.btn--outline {
    background:   transparent;
    color:        var(--fg-primary);
    border-color: var(--border-strong);
}
.btn--outline:hover {
    border-color: var(--teal);
    color:        var(--teal);
    transform:    translateY(-2px);
}

.btn--ghost {
    background:   transparent;
    color:        var(--fg-secondary);
    border-color: transparent;
    padding-inline: var(--space-3);
}
.btn--ghost:hover { color: var(--fg-primary); }

.btn--sm { padding: 8px 16px; font-size: 0.8rem; }
.btn--lg { padding: 16px 36px; font-size: 1rem; }

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