/* All button variants. Base = .mf-btn. Add modifier + size class. */

.mf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mf-space-2);
    height: 40px;
    padding: 0 var(--mf-space-4);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--mf-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--mf-radius);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--mf-transition), color var(--mf-transition),
                border-color var(--mf-transition), transform var(--mf-transition);
    text-decoration: none;
    white-space: nowrap;
}

.mf-btn:hover { text-decoration: none; }

.mf-btn:active { transform: translateY(1px); }

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

.mf-btn svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

/* Sizes */
.mf-btn--sm { height: 32px; padding: 0 var(--mf-space-3); font-size: 13px; }
.mf-btn--md { height: 40px; padding: 0 var(--mf-space-4); font-size: 14px; }
.mf-btn--lg { height: 48px; padding: 0 var(--mf-space-6); font-size: 15px; }

/* Variants */
.mf-btn--primary {
    background: var(--mf-primary);
    color: #FFFFFF;
    border-color: var(--mf-primary);
}
.mf-btn--primary:hover {
    background: var(--mf-primary-hover);
    border-color: var(--mf-primary-hover);
    color: #FFFFFF;
}

.mf-btn--outline {
    background: transparent;
    color: var(--mf-text);
    border-color: var(--mf-border-strong);
}
.mf-btn--outline:hover {
    background: var(--mf-surface-2);
    color: var(--mf-text);
}

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

.mf-btn--danger {
    background: var(--mf-danger);
    color: #FFFFFF;
    border-color: var(--mf-danger);
}
.mf-btn--danger:hover {
    background: #DC2626;
    border-color: #DC2626;
    color: #FFFFFF;
}

.mf-btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--mf-radius);
    color: var(--mf-text-muted);
}
.mf-btn--icon:hover {
    background: var(--mf-surface-2);
    color: var(--mf-text);
}

.mf-btn--block {
    width: 100%;
}

.mf-btn--loading {
    color: transparent;
    position: relative;
}
.mf-btn--loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: var(--mf-radius-full);
    animation: mf-btn-spin 0.7s linear infinite;
}
@keyframes mf-btn-spin {
    to { transform: rotate(360deg); }
}