.zf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    white-space: nowrap;
}

.zf-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--zf-primary-light, rgba(59, 130, 246, 0.3));
}

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

/* Sizes */
.size-small { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.size-medium { padding: 0.625rem 1.25rem; font-size: 0.9375rem; }
.size-large { padding: 0.75rem 1.5rem; font-size: 1rem; }

/* Variants */
.variant-primary { background-color: var(--zf-primary, #3b82f6); color: white; border-color: var(--zf-primary, #3b82f6); }
.variant-primary:hover:not(:disabled) { background-color: var(--zf-primary-dark, #2563eb); border-color: var(--zf-primary-dark, #2563eb); }
.variant-secondary { background-color: var(--zf-secondary-bg, #f3f4f6); color: var(--zf-text-primary, #1f2937); border-color: var(--zf-border, #d1d5db); }
.variant-secondary:hover:not(:disabled) { background-color: var(--zf-secondary-hover, #e5e7eb); }
.variant-danger { background-color: var(--zf-error, #dc2626); color: white; border-color: var(--zf-error, #dc2626); }
.variant-danger:hover:not(:disabled) { background-color: var(--zf-error-dark, #b91c1c); border-color: var(--zf-error-dark, #b91c1c); }
.variant-ghost { background-color: transparent; color: var(--zf-text-primary, #1f2937); border-color: transparent; }
.variant-ghost:hover:not(:disabled) { background-color: var(--zf-ghost-hover, rgba(0, 0, 0, 0.05)); }
.variant-link { background-color: transparent; color: var(--zf-primary, #3b82f6); border-color: transparent; padding-left: 0; padding-right: 0; }
.variant-link:hover:not(:disabled) { color: var(--zf-primary-dark, #2563eb); text-decoration: underline; }

/* Full Width */
.full-width { width: 100%; }

/* Loading State */
.loading .button-content { opacity: 0; }
.spinner { position: absolute; width: 1.25rem; height: 1.25rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Icons */
.icon-left, .icon-right { display: inline-flex; align-items: center; justify-content: center; }