/* Opaque surfaces keep button labels readable on parchment and wood alike. */
:root {
    --button-surface: #fff9e6;
    --button-surface-hover: #f4e4bc;
    --button-text-light: #fff9e6;
    --button-warning-text: #614408;
    --button-disabled-surface: #e8ddc5;
    --button-disabled-text: #665747;
}

.btn {
    --button-accent: var(--wood-medium);
    --button-accent-hover: var(--wood-dark);
    --button-text: var(--button-text-light);
    --button-background: var(--button-accent);
    --button-hover-text: var(--button-text);
    --button-hover-background: var(--button-accent-hover);
    --button-active-text: var(--button-text-light);
    --button-active-background: var(--button-accent-hover);
    --bs-btn-color: var(--button-text);
    --bs-btn-bg: var(--button-background);
    --bs-btn-border-color: var(--button-accent);
    --bs-btn-hover-color: var(--button-hover-text);
    --bs-btn-hover-bg: var(--button-hover-background);
    --bs-btn-hover-border-color: var(--button-accent-hover);
    --bs-btn-active-color: var(--button-active-text);
    --bs-btn-active-bg: var(--button-active-background);
    --bs-btn-active-border-color: var(--gold-light);
    --bs-btn-disabled-color: var(--button-disabled-text);
    --bs-btn-disabled-bg: var(--button-disabled-surface);
    --bs-btn-disabled-border-color: var(--text-muted);
    --bs-btn-disabled-opacity: 1;
    font-family: var(--font-subheading);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.5;
    letter-spacing: 0.025em;
    text-transform: none;
    text-shadow: none;
    border-width: 2px;
    border-radius: 4px;
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    background-image: none;
    box-shadow: 0 1px 2px rgba(44, 24, 16, 0.15);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover, .btn:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    text-decoration: none;
    cursor: url("/img/cursor-point.png") 10 30, pointer;
}

.btn:focus-visible {
    outline: 3px solid var(--wood-dark);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--button-surface);
}

.btn.active, .btn:active, .btn-check:checked + .btn {
    box-shadow: inset 0 0 0 1px var(--bs-btn-active-border-color);
}

.btn:disabled, .btn.disabled {
    box-shadow: none;
}

.btn-primary, .btn-outline-primary {
    --button-accent: var(--blood-red);
    --button-accent-hover: var(--blood-red-dark);
}

.btn-success, .btn-outline-success {
    --button-accent: var(--forest-green-dark);
    --button-accent-hover: #145314;
}

.btn-info, .btn-outline-info {
    --button-accent: #263f47;
    --button-accent-hover: #1b3037;
}

.btn-danger, .btn-outline-danger {
    --button-accent: #96281b;
    --button-accent-hover: #7b1f15;
}

.btn-warning, .btn-outline-warning {
    --button-accent: var(--gold);
    --button-accent-hover: var(--gold-dark);
    --button-text: var(--wood-dark);
    --button-active-text: var(--wood-dark);
    --button-active-background: var(--gold-light);
    --bs-btn-border-color: var(--button-warning-text);
    --bs-btn-hover-border-color: var(--button-warning-text);
    --bs-btn-active-border-color: var(--button-warning-text);
}

.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-info, .btn-outline-danger, .btn-outline-warning,
.btn-outline-light, .btn-outline-dark {
    --button-text: var(--button-accent);
    --button-background: var(--button-surface);
    --button-hover-text: var(--button-accent-hover);
    --button-hover-background: var(--button-surface-hover);
}

.btn-outline-warning {
    --button-text: var(--button-warning-text);
    --button-hover-text: var(--wood-dark);
}

.btn-light, .btn-outline-light {
    --button-accent: var(--wood-dark);
    --button-accent-hover: var(--wood-medium);
    --button-text: var(--wood-dark);
    --button-background: var(--button-surface);
    --button-hover-text: var(--wood-dark);
    --button-hover-background: var(--button-surface-hover);
    --bs-btn-border-color: var(--parchment-border);
}

.btn-dark, .btn-outline-dark {
    --button-accent: var(--wood-dark);
    --button-accent-hover: var(--ink-black);
}

.btn-link {
    --button-accent: transparent;
    --button-text: var(--blood-red);
    --button-background: transparent;
    --button-hover-text: var(--blood-red-dark);
    --button-hover-background: transparent;
    --button-active-text: var(--blood-red-dark);
    --button-active-background: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    box-shadow: none;
}

/* Dark containers also need readable link buttons and a light focus ring. */
:is(.top-row, .sidebar, .card-header, .stat-card) .btn-link {
    --button-text: var(--button-text-light);
    --button-hover-text: var(--gold-light);
    --button-active-text: var(--gold-light);
    color: var(--button-text);
}

:is(.top-row, .sidebar, .card-header, .stat-card) .btn-link:hover {
    color: var(--button-hover-text);
}

/* Header text styling must not override nested account button labels. */
.top-row .btn span:not(.badge):not(.notification-badge) {
    color: inherit;
}

:is(.top-row, .sidebar, .card-header, .stat-card) .btn:focus-visible {
    outline-color: var(--button-surface);
    box-shadow: 0 0 0 3px var(--wood-dark);
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}