/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75rem var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast), opacity var(--transition-fast),
        transform var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
}

.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-danger:active {
    transform: scale(0.97);
}

/* Primary — filled accent */
.btn-primary {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.btn-primary:hover {
    background: var(--color-accent-strong);
    border-color: var(--color-accent-strong);
}

/* Secondary — elevated surface */
.btn-secondary {
    background: var(--color-surface-elevated);
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-surface);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Ghost — outline only */
.btn-ghost {
    background: transparent;
    color: var(--color-muted);
    border-color: var(--color-border);
}

.btn-ghost:hover {
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.2);
    background: var(--color-surface);
}

/* Danger */
.btn-danger {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}

.btn-danger:hover {
    opacity: 0.85;
}

/* Disabled state */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Full-width variant */
.btn-block {
    width: 100%;
}

/* Small variant */
.btn-sm {
    padding: 0.4rem var(--space-4);
    font-size: var(--font-size-sm);
}

/* Button row */
.btn-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.btn-row--col {
    flex-direction: column;
}