.btn, .btn-primary, .btn-secondary, .btn-danger, .action-button {
    padding: 10px 20px;
    border: var(--btn-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-btn);
    font-size: var(--font-size-base);
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary, .action-button {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.btn-primary:hover, .action-button:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent);
}

.btn-primary:active, .action-button:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--color-neutral);
    color: var(--color-on-accent);
}

.btn-secondary:hover {
    background: var(--color-neutral-hover);
}

.btn-danger {
    background: var(--color-danger);
    color: var(--color-on-accent);
}

.btn-danger:hover {
    background: var(--color-danger-hover);
}

/* Outline Button Variant */
.btn-outline-primary {
    padding: 10px 12px;
    border: var(--border-width) solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline-primary:hover {
    background: var(--color-accent);
    color: var(--color-on-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent);
}

.btn-outline-primary:active {
    transform: translateY(0);
}

.btn-success {
    background-color: var(--color-success);
    color: var(--color-on-accent);
}

.btn-success:hover:not(:disabled) {
    background-color: var(--color-success-hover);
}

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

/* Small button variant */
.btn-sm {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
}

/* Disabled button state */
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-success:disabled,
.btn-outline-primary:disabled,
.action-button:disabled,
button:disabled {
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
    box-shadow: none;
    border-color: var(--color-border);
}

.btn:disabled:hover,
.btn-primary:disabled:hover,
.btn-secondary:disabled:hover,
.btn-danger:disabled:hover,
.btn-success:disabled:hover,
.btn-outline-primary:disabled:hover,
.action-button:disabled:hover,
button:disabled:hover {
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    transform: none;
    box-shadow: none;
}