button, .btn, a.btn {
    background-color: var(--color-primary);
    color: var(--color-text-contrast);
    border: 2px solid var(--color-primary);
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    border-radius: 0;  /* Sharp edges */
}

button:hover, .btn:hover,
a.btn:hover {
    background-color: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

button:active, .btn:active,
a.btn:active {
    background-color: var(--color-primary);
    color: var(--color-text-contrast);
    border-color: var(--color-primary-strong, var(--color-primary));
}

button:focus-visible, .btn:focus-visible, a.btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.btn.btn-outline-secondary {
    color: var(--color-text);
    background-color: var(--color-bg-light);
    border-color: var(--color-border);
    text-decoration: none;
}

.btn.btn-outline-secondary:hover {
    color: var(--color-text-contrast);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}

.btn.btn-outline-secondary.is-disabled {
    color: var(--color-text-mid);
    background-color: var(--color-bg-light);
    border-color: var(--color-border-soft, var(--color-border));
}

/* Ghost / toolbar buttons: visible border, not the same fill as the page chrome. */
.btn.btn-secondary {
    color: var(--color-secondary);
    background-color: var(--color-bg-light);
    border: 2px solid var(--color-border);
    text-decoration: none;
}

.btn.btn-secondary:hover {
    color: var(--color-primary);
    background-color: var(--color-bg);
    border-color: var(--color-secondary);
    text-decoration: none;
}

/* Filled primary .btn only — plain <button> elements (menus, forms) keep their own colors. */
html[data-color-scheme="dark"] .btn:not(.btn-secondary):not(.btn-outline-secondary),
html[data-color-scheme="dark"] a.btn:not(.btn-secondary):not(.btn-outline-secondary) {
    color: #121212;
}

html[data-color-scheme="dark"] .btn:not(.btn-secondary):not(.btn-outline-secondary):hover,
html[data-color-scheme="dark"] a.btn:not(.btn-secondary):not(.btn-outline-secondary):hover {
    color: var(--color-primary);
    background-color: var(--color-bg);
    border-color: var(--color-primary);
}

html[data-color-scheme="dark"] .btn:not(.btn-secondary):not(.btn-outline-secondary):active,
html[data-color-scheme="dark"] a.btn:not(.btn-secondary):not(.btn-outline-secondary):active {
    color: #121212;
    background-color: var(--color-primary);
    border-color: var(--color-primary-strong, var(--color-primary));
}

html[data-color-scheme="dark"] .btn.btn-outline-secondary {
    color: var(--color-text);
    background-color: var(--color-bg-primary, var(--color-bg-light));
    border-color: var(--color-border);
}

html[data-color-scheme="dark"] .btn.btn-outline-secondary:hover {
    color: #121212;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

html[data-color-scheme="dark"] .btn.btn-outline-secondary.is-disabled {
    color: var(--color-text-mid);
    opacity: 0.55;
}

html[data-color-scheme="dark"] .btn.btn-secondary {
    color: var(--color-secondary);
    background-color: var(--color-bg-light);
    border-color: var(--color-border);
}

html[data-color-scheme="dark"] .btn.btn-secondary:hover {
    color: var(--color-text);
    background-color: var(--color-bg-primary, var(--color-bg));
    border-color: var(--color-secondary);
}