.btn,
button:not(.theme-toggle) {
    color: var(--text-primary);
}

.btn-primary {
    background: var(--color-primary-600);
    color: var(--text-inverse);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--color-primary-700);
    color: var(--text-inverse);
}

.btn-secondary {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
}

/* Bootstrap button variants */
.btn-outline-primary {
    background: transparent;
    color: var(--color-primary-600);
    border-color: var(--color-primary-600);
}

.btn-outline-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.btn-success {
    background: var(--color-success-600);
    color: var(--text-inverse);
    border: none;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: var(--color-success-700);
    color: var(--text-inverse);
}

.btn-danger {
    background: var(--color-error-600);
    color: var(--text-inverse);
    border: none;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background: var(--color-error-700);
    color: var(--text-inverse);
}

.btn-warning {
    background: var(--color-warning-600);
    color: var(--text-inverse);
    border: none;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background: var(--color-warning-700);
    color: var(--text-inverse);
}

.btn-info {
    background: var(--color-info-600);
    color: var(--text-inverse);
    border: none;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background: var(--color-info-700);
    color: var(--text-inverse);
}

/* Custom button classes */
.add-btn,
.filter-btn,
.btn-view,
.btn-edit,
.btn-start,
.btn-delete {
    background: var(--color-primary-600);
    color: var(--text-inverse);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
}

.add-btn:hover,
.filter-btn:hover,
.btn-view:hover,
.btn-edit:hover,
.btn-start:hover,
.add-btn:focus,
.filter-btn:focus,
.btn-view:focus,
.btn-edit:focus,
.btn-start:focus {
    background: var(--color-primary-700);
    color: var(--text-inverse);
}

.filter-btn.active {
    background: var(--color-primary-800);
}

.btn-delete:hover {
    background: var(--color-error-700);
}

/* Custom scrollbar */
.btn-group {
    background: transparent;
}

.btn-group .btn {
    border-color: var(--border-primary);
}

/* Alert variants */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-optimizer,
.btn-template-browser {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));
    color: var(--text-inverse);
    border: none;
}

.btn-ai-magic:hover,
.btn-optimizer:hover,
.btn-template-browser:hover {
    opacity: 0.9;
}

.btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.btn-remove {
    background: var(--color-error-600);
    color: var(--text-inverse);
    border: none;
}

.btn-info {
    background: var(--color-info-600);
    color: var(--text-inverse);
    border: none;
}

.btn-link {
    background: transparent;
    color: var(--color-primary-600);
    border: none;
    text-decoration: underline;
}

.btn-link:hover {
    color: var(--color-primary-700);
}

.nav-btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    padding: 6px 12px;
    border-radius: 6px;
}

.period-btn.active,
.nav-btn.active {
    background: var(--color-primary-600);
    color: var(--text-inverse);
    border-color: var(--color-primary-600);
}

.period-btn:hover:not(.active),
.nav-btn:hover:not(.active) {
    background: var(--bg-tertiary);
}

.start-button,
.view-details {
    background: var(--color-primary-600);
    color: var(--text-inverse);
    border: none;
}

.start-button:hover,
.view-details:hover {
    background: var(--color-primary-700);
    color: var(--text-inverse);
}