/* ==========================================================================
   Buttons — primary / secondary / ghost / danger / link · sm / md / lg
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-h-md);
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--surface-raised);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn .icon { font-size: 16px; flex-shrink: 0; }

/* ── Sizes ───────────────────────────────────────────────────────────── */
.btn-sm {
    height: var(--control-h-sm);
    padding: 0 var(--space-3);
    font-size: var(--fs-13);
    border-radius: var(--radius-xs);
}
.btn-sm .icon { font-size: 14px; }

.btn-lg {
    height: var(--control-h-lg);
    padding: 0 var(--space-5);
    font-size: var(--fs-15);
    border-radius: var(--radius-md);
}
.btn-lg .icon { font-size: 18px; }

.btn-block, .btn-full { width: 100%; }

/* Square icon-only button */
.btn-icon {
    width: var(--control-h-md);
    padding: 0;
}
.btn-icon.btn-sm { width: var(--control-h-sm); }
.btn-icon.btn-lg { width: var(--control-h-lg); }

/* ── Variants ────────────────────────────────────────────────────────── */
/* Primary — brand fill */
.btn-primary {
    background: var(--brand);
    color: var(--text-on-brand);
    border-color: var(--brand);
}
.btn-primary:hover:not(:disabled) {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--text-on-brand);
    text-decoration: none;
}
.btn-primary:active:not(:disabled) {
    background: var(--brand-active);
    border-color: var(--brand-active);
}

/* Secondary — neutral filled with border */
.btn-secondary {
    background: var(--surface-raised);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--surface-sunken);
    border-color: var(--border-strong);
    color: var(--text-primary);
    text-decoration: none;
}
.btn-secondary:active:not(:disabled) {
    background: var(--surface-sunken);
}

/* Ghost — borderless, hover-fill */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
    background: var(--surface-sunken);
    color: var(--text-primary);
    text-decoration: none;
}

/* Danger — destructive actions */
.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
    background: var(--danger-fg);
    border-color: var(--danger-fg);
    color: #fff;
    text-decoration: none;
}

.btn-danger-outline {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger-border);
}
.btn-danger-outline:hover:not(:disabled) {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger-fg);
    text-decoration: none;
}

/* Success / Warning — used sparingly */
.btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.btn-success:hover:not(:disabled) {
    background: var(--success-fg);
    border-color: var(--success-fg);
    color: #fff;
    text-decoration: none;
}

.btn-warning {
    background: var(--warning);
    color: #fff;
    border-color: var(--warning);
}
.btn-warning:hover:not(:disabled) {
    background: var(--warning-fg);
    border-color: var(--warning-fg);
    color: #fff;
    text-decoration: none;
}

/* Link — text-only button */
.btn-link {
    background: transparent;
    color: var(--text-link);
    border-color: transparent;
    padding: 0;
    height: auto;
    border-radius: 0;
}
.btn-link:hover:not(:disabled) {
    color: var(--text-link-hover);
    text-decoration: underline;
    background: transparent;
}

/* ── Loading state ───────────────────────────────────────────────────── */
.btn.is-loading,
.btn[aria-busy="true"] {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.btn.is-loading > *,
.btn[aria-busy="true"] > * { visibility: hidden; }
.btn.is-loading::after,
.btn[aria-busy="true"]::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
    color: var(--text-on-brand);
    visibility: visible;
}
.btn-secondary.is-loading::after,
.btn-ghost.is-loading::after,
.btn-link.is-loading::after { color: var(--text-secondary); }

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ── Button group ────────────────────────────────────────────────────── */
.btn-group {
    display: inline-flex;
    align-items: stretch;
}
.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}
.btn-group .btn:first-child {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
    margin-left: 0;
}
.btn-group .btn:last-child {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
.btn-group .btn:focus-visible {
    z-index: 2;
}

/* ── Backwards-compatibility shims (modules using older class names) ─── */
.btn-outline,
.btn-outline-primary { /* old → maps to secondary */
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-default);
}
.btn-outline:hover,
.btn-outline-primary:hover {
    background: var(--surface-sunken);
    border-color: var(--border-strong);
    text-decoration: none;
}
.btn-info { /* old info button → maps to secondary */
    background: var(--surface-raised);
    color: var(--info);
    border-color: var(--info-border);
}
.btn-info:hover {
    background: var(--info-bg);
    border-color: var(--info);
    text-decoration: none;
}