/*
 * Hand-maintained overrides for the bulma rules that vendor-tokens.css cannot reach.
 *
 * Two groups live here. The button variant matrix, because bulma writes a separate color for
 * every state of every variant and the generated layer only saw the declarations it could match
 * one at a time: the inverted forms in particular were left pointing at a surface that is white
 * in both themes, so an inverted button rendered white text on a white fill. And the typography
 * rules, because .title and .subtitle carry their own greys that only ever looked wired when a
 * hero ancestor happened to restate them.
 *
 * Must stay directly after vendor-tokens.css: the selectors are copied from bulma verbatim so
 * they tie on specificity, and the later sheet has to be this one. Page styles load after and
 * keep winning, which is the point.
 *
 * is-info is absent on purpose. button-theme.css owns the primary action button.
 */

/* stylelint-disable no-descending-specificity, selector-pseudo-element-colon-notation */

/* is-white */
.button.is-white {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.button.is-white:hover,
.button.is-white.is-hovered {
    background-color: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.button.is-white:focus,
.button.is-white.is-focused {
    box-shadow: 0 0 0.5em var(--color-shadow-focus);
    color: var(--color-text-primary);
}

.button.is-white:active,
.button.is-white.is-active {
    background-color: var(--color-surface-hover);
    box-shadow: inset 0 1px 2px var(--color-shadow-navbar);
    color: var(--color-text-primary);
}

.button.is-white[disabled] {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.button.is-white.is-inverted {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.button.is-white.is-inverted:hover,
.button.is-white.is-inverted.is-hovered {
    background-color: var(--color-surface-contrast-hover);
    color: var(--color-text-contrast);
}

.button.is-white.is-inverted[disabled] {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.button.is-white.is-loading:after {
    border-color: transparent transparent var(--color-text-primary) var(--color-text-primary) !important;
}

.button.is-white.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.button.is-white.is-outlined:hover,
.button.is-white.is-outlined:focus {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.button.is-white.is-outlined.is-loading:after {
    border-color: transparent transparent var(--color-border-default) var(--color-border-default) !important;
}

.button.is-white.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

.button.is-white.is-inverted.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-default);
    color: var(--color-text-contrast);
}

.button.is-white.is-inverted.is-outlined:hover,
.button.is-white.is-inverted.is-outlined:focus {
    background-color: var(--color-surface-contrast-hover);
    color: var(--color-text-contrast);
}

.button.is-white.is-inverted.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

/* is-light */
.button.is-light {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
}

.button.is-light:hover,
.button.is-light.is-hovered {
    background-color: var(--color-surface-pressed);
    color: var(--color-text-primary);
}

.button.is-light:focus,
.button.is-light.is-focused {
    box-shadow: 0 0 0.5em var(--color-shadow-focus);
    color: var(--color-text-primary);
}

.button.is-light:active,
.button.is-light.is-active {
    background-color: var(--color-surface-pressed);
    box-shadow: inset 0 1px 2px var(--color-shadow-navbar);
    color: var(--color-text-primary);
}

.button.is-light[disabled] {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
}

.button.is-light.is-inverted {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.button.is-light.is-inverted:hover,
.button.is-light.is-inverted.is-hovered {
    background-color: var(--color-surface-contrast-hover);
    color: var(--color-text-contrast);
}

.button.is-light.is-inverted[disabled] {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.button.is-light.is-loading:after {
    border-color: transparent transparent var(--color-text-primary) var(--color-text-primary) !important;
}

.button.is-light.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.button.is-light.is-outlined:hover,
.button.is-light.is-outlined:focus {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.button.is-light.is-outlined.is-loading:after {
    border-color: transparent transparent var(--color-border-default) var(--color-border-default) !important;
}

.button.is-light.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

.button.is-light.is-inverted.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-default);
    color: var(--color-text-contrast);
}

.button.is-light.is-inverted.is-outlined:hover,
.button.is-light.is-inverted.is-outlined:focus {
    background-color: var(--color-surface-contrast-hover);
    color: var(--color-text-contrast);
}

.button.is-light.is-inverted.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

/* is-black */
.button.is-black {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.button.is-black:hover,
.button.is-black.is-hovered {
    background-color: var(--color-surface-contrast-hover);
    color: var(--color-text-contrast);
}

.button.is-black:focus,
.button.is-black.is-focused {
    box-shadow: 0 0 0.5em var(--color-shadow-focus);
    color: var(--color-text-contrast);
}

.button.is-black:active,
.button.is-black.is-active {
    background-color: var(--color-surface-contrast-hover);
    box-shadow: inset 0 1px 2px var(--color-shadow-navbar);
    color: var(--color-text-contrast);
}

.button.is-black[disabled] {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.button.is-black.is-inverted {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.button.is-black.is-inverted:hover,
.button.is-black.is-inverted.is-hovered {
    background-color: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.button.is-black.is-inverted[disabled] {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.button.is-black.is-loading:after {
    border-color: transparent transparent var(--color-text-contrast) var(--color-text-contrast) !important;
}

.button.is-black.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-contrast);
    color: var(--color-text-primary);
}

.button.is-black.is-outlined:hover,
.button.is-black.is-outlined:focus {
    background-color: var(--color-surface-contrast);
    border-color: var(--color-border-contrast);
    color: var(--color-text-contrast);
}

.button.is-black.is-outlined.is-loading:after {
    border-color: transparent transparent var(--color-border-contrast) var(--color-border-contrast) !important;
}

.button.is-black.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

.button.is-black.is-inverted.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.button.is-black.is-inverted.is-outlined:hover,
.button.is-black.is-inverted.is-outlined:focus {
    background-color: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.button.is-black.is-inverted.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

/* is-dark */
.button.is-dark {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.button.is-dark:hover,
.button.is-dark.is-hovered {
    background-color: var(--color-surface-contrast-hover);
    color: var(--color-text-contrast);
}

.button.is-dark:focus,
.button.is-dark.is-focused {
    box-shadow: 0 0 0.5em var(--color-shadow-focus);
    color: var(--color-text-contrast);
}

.button.is-dark:active,
.button.is-dark.is-active {
    background-color: var(--color-surface-contrast-hover);
    box-shadow: inset 0 1px 2px var(--color-shadow-navbar);
    color: var(--color-text-contrast);
}

.button.is-dark[disabled] {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.button.is-dark.is-inverted {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.button.is-dark.is-inverted:hover,
.button.is-dark.is-inverted.is-hovered {
    background-color: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.button.is-dark.is-inverted[disabled] {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.button.is-dark.is-loading:after {
    border-color: transparent transparent var(--color-text-contrast) var(--color-text-contrast) !important;
}

.button.is-dark.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-contrast);
    color: var(--color-text-primary);
}

.button.is-dark.is-outlined:hover,
.button.is-dark.is-outlined:focus {
    background-color: var(--color-surface-contrast);
    border-color: var(--color-border-contrast);
    color: var(--color-text-contrast);
}

.button.is-dark.is-outlined.is-loading:after {
    border-color: transparent transparent var(--color-border-contrast) var(--color-border-contrast) !important;
}

.button.is-dark.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

.button.is-dark.is-inverted.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.button.is-dark.is-inverted.is-outlined:hover,
.button.is-dark.is-inverted.is-outlined:focus {
    background-color: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.button.is-dark.is-inverted.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

/* is-primary */
.button.is-primary {
    background-color: var(--color-action-primary);
    color: var(--color-text-inverse);
}

.button.is-primary:hover,
.button.is-primary.is-hovered {
    background-color: var(--color-action-primary-hover);
    color: var(--color-text-inverse);
}

.button.is-primary:focus,
.button.is-primary.is-focused {
    box-shadow: 0 0 0.5em var(--color-shadow-focus);
    color: var(--color-text-inverse);
}

.button.is-primary:active,
.button.is-primary.is-active {
    background-color: var(--color-action-primary-hover);
    box-shadow: inset 0 1px 2px var(--color-shadow-navbar);
    color: var(--color-text-inverse);
}

.button.is-primary[disabled] {
    background-color: var(--color-action-primary);
    color: var(--color-text-inverse);
}

.button.is-primary.is-inverted {
    background-color: var(--color-surface-raised);
    color: var(--color-action-primary);
}

.button.is-primary.is-inverted:hover,
.button.is-primary.is-inverted.is-hovered {
    background-color: var(--color-surface-hover);
    color: var(--color-action-primary);
}

.button.is-primary.is-inverted[disabled] {
    background-color: var(--color-surface-raised);
    color: var(--color-action-primary);
}

.button.is-primary.is-loading:after {
    border-color: transparent transparent var(--color-text-inverse) var(--color-text-inverse) !important;
}

.button.is-primary.is-outlined {
    background-color: transparent;
    border-color: var(--color-action-primary);
    color: var(--color-action-primary);
}

.button.is-primary.is-outlined:hover,
.button.is-primary.is-outlined:focus {
    background-color: var(--color-action-primary);
    border-color: var(--color-action-primary);
    color: var(--color-text-inverse);
}

.button.is-primary.is-outlined.is-loading:after {
    border-color: transparent transparent var(--color-action-primary) var(--color-action-primary) !important;
}

.button.is-primary.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

.button.is-primary.is-inverted.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-default);
    color: var(--color-action-primary);
}

.button.is-primary.is-inverted.is-outlined:hover,
.button.is-primary.is-inverted.is-outlined:focus {
    background-color: var(--color-surface-hover);
    color: var(--color-action-primary);
}

.button.is-primary.is-inverted.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

/* is-success */
.button.is-success {
    background-color: var(--color-surface-success);
    color: var(--color-text-inverse);
}

.button.is-success:hover,
.button.is-success.is-hovered {
    background-color: var(--color-surface-success-hover);
    color: var(--color-text-inverse);
}

.button.is-success:focus,
.button.is-success.is-focused {
    box-shadow: 0 0 0.5em var(--color-shadow-focus);
    color: var(--color-text-inverse);
}

.button.is-success:active,
.button.is-success.is-active {
    background-color: var(--color-surface-success-hover);
    box-shadow: inset 0 1px 2px var(--color-shadow-navbar);
    color: var(--color-text-inverse);
}

.button.is-success[disabled] {
    background-color: var(--color-surface-success);
    color: var(--color-text-inverse);
}

.button.is-success.is-inverted {
    background-color: var(--color-surface-raised);
    color: var(--color-status-positive);
}

.button.is-success.is-inverted:hover,
.button.is-success.is-inverted.is-hovered {
    background-color: var(--color-surface-hover);
    color: var(--color-status-positive);
}

.button.is-success.is-inverted[disabled] {
    background-color: var(--color-surface-raised);
    color: var(--color-status-positive);
}

.button.is-success.is-loading:after {
    border-color: transparent transparent var(--color-text-inverse) var(--color-text-inverse) !important;
}

.button.is-success.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-status-positive);
    color: var(--color-status-positive);
}

.button.is-success.is-outlined:hover,
.button.is-success.is-outlined:focus {
    background-color: var(--color-surface-success);
    border-color: var(--color-border-status-positive);
    color: var(--color-text-inverse);
}

.button.is-success.is-outlined.is-loading:after {
    border-color: transparent transparent var(--color-border-status-positive) var(--color-border-status-positive) !important;
}

.button.is-success.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

.button.is-success.is-inverted.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-default);
    color: var(--color-status-positive);
}

.button.is-success.is-inverted.is-outlined:hover,
.button.is-success.is-inverted.is-outlined:focus {
    background-color: var(--color-surface-hover);
    color: var(--color-status-positive);
}

.button.is-success.is-inverted.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

/* is-warning */
.button.is-warning {
    background-color: var(--color-surface-warning);
    color: var(--color-text-warning);
}

.button.is-warning:hover,
.button.is-warning.is-hovered {
    background-color: var(--color-surface-warning-hover);
    color: var(--color-text-warning);
}

.button.is-warning:focus,
.button.is-warning.is-focused {
    box-shadow: 0 0 0.5em var(--color-shadow-focus);
    color: var(--color-text-warning);
}

.button.is-warning:active,
.button.is-warning.is-active {
    background-color: var(--color-surface-warning-hover);
    box-shadow: inset 0 1px 2px var(--color-shadow-navbar);
    color: var(--color-text-warning);
}

.button.is-warning[disabled] {
    background-color: var(--color-surface-warning);
    color: var(--color-text-warning);
}

.button.is-warning.is-inverted {
    background-color: var(--color-surface-contrast);
    color: var(--color-status-medium);
}

.button.is-warning.is-inverted:hover,
.button.is-warning.is-inverted.is-hovered {
    background-color: var(--color-surface-contrast-hover);
    color: var(--color-status-medium);
}

.button.is-warning.is-inverted[disabled] {
    background-color: var(--color-surface-contrast);
    color: var(--color-status-medium);
}

.button.is-warning.is-loading:after {
    border-color: transparent transparent var(--color-text-warning) var(--color-text-warning) !important;
}

.button.is-warning.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-warning);
    color: var(--color-status-medium);
}

.button.is-warning.is-outlined:hover,
.button.is-warning.is-outlined:focus {
    background-color: var(--color-surface-warning);
    border-color: var(--color-border-warning);
    color: var(--color-text-warning);
}

.button.is-warning.is-outlined.is-loading:after {
    border-color: transparent transparent var(--color-border-warning) var(--color-border-warning) !important;
}

.button.is-warning.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

.button.is-warning.is-inverted.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-default);
    color: var(--color-status-medium);
}

.button.is-warning.is-inverted.is-outlined:hover,
.button.is-warning.is-inverted.is-outlined:focus {
    background-color: var(--color-surface-contrast-hover);
    color: var(--color-status-medium);
}

.button.is-warning.is-inverted.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

/* is-danger */
.button.is-danger {
    background-color: var(--color-surface-danger);
    color: var(--color-text-danger);
}

.button.is-danger:hover,
.button.is-danger.is-hovered {
    background-color: var(--color-surface-danger-hover);
    color: var(--color-text-danger);
}

.button.is-danger:focus,
.button.is-danger.is-focused {
    box-shadow: 0 0 0.5em var(--color-shadow-focus);
    color: var(--color-text-danger);
}

.button.is-danger:active,
.button.is-danger.is-active {
    background-color: var(--color-surface-danger-hover);
    box-shadow: inset 0 1px 2px var(--color-shadow-navbar);
    color: var(--color-text-danger);
}

.button.is-danger[disabled] {
    background-color: var(--color-surface-danger);
    color: var(--color-text-danger);
}

.button.is-danger.is-inverted {
    background-color: var(--color-surface-raised);
    color: var(--color-status-negative);
}

.button.is-danger.is-inverted:hover,
.button.is-danger.is-inverted.is-hovered {
    background-color: var(--color-surface-hover);
    color: var(--color-status-negative);
}

.button.is-danger.is-inverted[disabled] {
    background-color: var(--color-surface-raised);
    color: var(--color-status-negative);
}

.button.is-danger.is-loading:after {
    border-color: transparent transparent var(--color-text-danger) var(--color-text-danger) !important;
}

.button.is-danger.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-danger);
    color: var(--color-status-negative);
}

.button.is-danger.is-outlined:hover,
.button.is-danger.is-outlined:focus {
    background-color: var(--color-surface-danger);
    border-color: var(--color-border-danger);
    color: var(--color-text-danger);
}

.button.is-danger.is-outlined.is-loading:after {
    border-color: transparent transparent var(--color-border-danger) var(--color-border-danger) !important;
}

.button.is-danger.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

.button.is-danger.is-inverted.is-outlined {
    background-color: transparent;
    border-color: var(--color-border-default);
    color: var(--color-status-negative);
}

.button.is-danger.is-inverted.is-outlined:hover,
.button.is-danger.is-inverted.is-outlined:focus {
    background-color: var(--color-surface-hover);
    color: var(--color-status-negative);
}

.button.is-danger.is-inverted.is-outlined[disabled] {
    background-color: transparent;
    border-color: var(--color-border-disabled);
    color: var(--color-text-disabled);
}

/* components, is-white */
.tag.is-white {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.notification.is-white {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.help.is-white {
    color: var(--color-text-primary);
}

.message.is-white {
    background-color: var(--color-surface-raised);
}

.message.is-white .message-header {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.message.is-white .message-body {
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.progress.is-white::-webkit-progress-value {
    background-color: var(--color-surface-raised);
}

.progress.is-white::-moz-progress-bar {
    background-color: var(--color-surface-raised);
}

.input.is-white,
.textarea.is-white {
    border-color: var(--color-border-default);
}

.select.is-white select {
    border-color: var(--color-border-default);
}

.hero.is-white {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
}

/* components, is-light */
.tag.is-light {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
}

.notification.is-light {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
}

.help.is-light {
    color: var(--color-text-primary);
}

.message.is-light {
    background-color: var(--color-surface-raised);
}

.message.is-light .message-header {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
}

.message.is-light .message-body {
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.progress.is-light::-webkit-progress-value {
    background-color: var(--color-surface-muted);
}

.progress.is-light::-moz-progress-bar {
    background-color: var(--color-surface-muted);
}

.input.is-light,
.textarea.is-light {
    border-color: var(--color-border-default);
}

.select.is-light select {
    border-color: var(--color-border-default);
}

.hero.is-light {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
}

/* components, is-black */
.tag.is-black {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.notification.is-black {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.help.is-black {
    color: var(--color-text-primary);
}

.message.is-black {
    background-color: var(--color-surface-raised);
}

.message.is-black .message-header {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.message.is-black .message-body {
    border-color: var(--color-border-contrast);
    color: var(--color-text-primary);
}

.progress.is-black::-webkit-progress-value {
    background-color: var(--color-surface-contrast);
}

.progress.is-black::-moz-progress-bar {
    background-color: var(--color-surface-contrast);
}

.input.is-black,
.textarea.is-black {
    border-color: var(--color-border-contrast);
}

.select.is-black select {
    border-color: var(--color-border-contrast);
}

.hero.is-black {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

/* components, is-dark */
.tag.is-dark {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.notification.is-dark {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.help.is-dark {
    color: var(--color-text-primary);
}

.message.is-dark {
    background-color: var(--color-surface-raised);
}

.message.is-dark .message-header {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

.message.is-dark .message-body {
    border-color: var(--color-border-contrast);
    color: var(--color-text-primary);
}

.progress.is-dark::-webkit-progress-value {
    background-color: var(--color-surface-contrast);
}

.progress.is-dark::-moz-progress-bar {
    background-color: var(--color-surface-contrast);
}

.input.is-dark,
.textarea.is-dark {
    border-color: var(--color-border-contrast);
}

.select.is-dark select {
    border-color: var(--color-border-contrast);
}

.hero.is-dark {
    background-color: var(--color-surface-contrast);
    color: var(--color-text-contrast);
}

/* components, is-primary */
.tag.is-primary {
    background-color: var(--color-surface-brand);
    color: var(--color-text-inverse);
}

.notification.is-primary {
    background-color: var(--color-surface-brand);
    color: var(--color-text-inverse);
}

.help.is-primary {
    color: var(--color-text-brand);
}

.message.is-primary {
    background-color: var(--color-surface-brand-subtle);
}

.message.is-primary .message-header {
    background-color: var(--color-surface-brand);
    color: var(--color-text-inverse);
}

.message.is-primary .message-body {
    border-color: var(--color-border-brand);
    color: var(--color-text-primary);
}

.progress.is-primary::-webkit-progress-value {
    background-color: var(--color-surface-brand);
}

.progress.is-primary::-moz-progress-bar {
    background-color: var(--color-surface-brand);
}

.input.is-primary,
.textarea.is-primary {
    border-color: var(--color-border-brand);
}

.select.is-primary select {
    border-color: var(--color-border-brand);
}

.hero.is-primary {
    background-color: var(--color-surface-brand);
    color: var(--color-text-inverse);
}

/* components, is-success */
.tag.is-success {
    background-color: var(--color-surface-success);
    color: var(--color-text-inverse);
}

.notification.is-success {
    background-color: var(--color-surface-success);
    color: var(--color-text-inverse);
}

.help.is-success {
    color: var(--color-status-positive);
}

.message.is-success {
    background-color: var(--color-surface-success-subtle);
}

.message.is-success .message-header {
    background-color: var(--color-surface-success);
    color: var(--color-text-inverse);
}

.message.is-success .message-body {
    border-color: var(--color-border-status-positive);
    color: var(--color-text-primary);
}

.progress.is-success::-webkit-progress-value {
    background-color: var(--color-surface-success);
}

.progress.is-success::-moz-progress-bar {
    background-color: var(--color-surface-success);
}

.input.is-success,
.textarea.is-success {
    border-color: var(--color-border-status-positive);
}

.select.is-success select {
    border-color: var(--color-border-status-positive);
}

.hero.is-success {
    background-color: var(--color-surface-success);
    color: var(--color-text-inverse);
}

/* components, is-warning */
.tag.is-warning {
    background-color: var(--color-surface-warning);
    color: var(--color-text-warning);
}

.notification.is-warning {
    background-color: var(--color-surface-warning);
    color: var(--color-text-warning);
}

.help.is-warning {
    color: var(--color-status-medium);
}

.message.is-warning {
    background-color: var(--color-surface-warning-subtle);
}

.message.is-warning .message-header {
    background-color: var(--color-surface-warning);
    color: var(--color-text-warning);
}

.message.is-warning .message-body {
    border-color: var(--color-border-warning);
    color: var(--color-text-primary);
}

.progress.is-warning::-webkit-progress-value {
    background-color: var(--color-surface-warning);
}

.progress.is-warning::-moz-progress-bar {
    background-color: var(--color-surface-warning);
}

.input.is-warning,
.textarea.is-warning {
    border-color: var(--color-border-warning);
}

.select.is-warning select {
    border-color: var(--color-border-warning);
}

.hero.is-warning {
    background-color: var(--color-surface-warning);
    color: var(--color-text-warning);
}

/* components, is-danger */
.tag.is-danger {
    background-color: var(--color-surface-danger);
    color: var(--color-text-danger);
}

.notification.is-danger {
    background-color: var(--color-surface-danger);
    color: var(--color-text-danger);
}

.help.is-danger {
    color: var(--color-status-negative);
}

.message.is-danger {
    background-color: var(--color-surface-danger-subtle);
}

.message.is-danger .message-header {
    background-color: var(--color-surface-danger);
    color: var(--color-text-danger);
}

.message.is-danger .message-body {
    border-color: var(--color-border-danger);
    color: var(--color-text-primary);
}

.progress.is-danger::-webkit-progress-value {
    background-color: var(--color-surface-danger);
}

.progress.is-danger::-moz-progress-bar {
    background-color: var(--color-surface-danger);
}

.input.is-danger,
.textarea.is-danger {
    border-color: var(--color-border-danger);
}

.select.is-danger select {
    border-color: var(--color-border-danger);
}

.hero.is-danger {
    background-color: var(--color-surface-danger);
    color: var(--color-text-danger);
}

/* components, is-info */
.tag.is-info {
    background-color: var(--color-surface-info);
    color: var(--color-text-info);
}

.notification.is-info {
    background-color: var(--color-surface-info);
    color: var(--color-text-info);
}

.help.is-info {
    color: var(--color-status-info);
}

.message.is-info {
    background-color: var(--color-surface-raised);
}

.message.is-info .message-header {
    background-color: var(--color-surface-info);
    color: var(--color-text-info);
}

.message.is-info .message-body {
    border-color: var(--color-border-info);
    color: var(--color-text-primary);
}

.progress.is-info::-webkit-progress-value {
    background-color: var(--color-surface-info);
}

.progress.is-info::-moz-progress-bar {
    background-color: var(--color-surface-info);
}

.input.is-info,
.textarea.is-info {
    border-color: var(--color-border-info);
}

.select.is-info select {
    border-color: var(--color-border-info);
}

.hero.is-info {
    background-color: var(--color-surface-info);
    color: var(--color-text-info);
}

/* components, is-link */
.tag.is-link {
    background-color: var(--color-surface-brand);
    color: var(--color-text-inverse);
}

.notification.is-link {
    background-color: var(--color-surface-brand);
    color: var(--color-text-inverse);
}

.help.is-link {
    color: var(--color-text-brand);
}

.message.is-link {
    background-color: var(--color-surface-raised);
}

.message.is-link .message-header {
    background-color: var(--color-surface-brand);
    color: var(--color-text-inverse);
}

.message.is-link .message-body {
    border-color: var(--color-border-brand);
    color: var(--color-text-primary);
}

.progress.is-link::-webkit-progress-value {
    background-color: var(--color-surface-brand);
}

.progress.is-link::-moz-progress-bar {
    background-color: var(--color-surface-brand);
}

.input.is-link,
.textarea.is-link {
    border-color: var(--color-border-brand);
}

.select.is-link select {
    border-color: var(--color-border-brand);
}

.hero.is-link {
    background-color: var(--color-surface-brand);
    color: var(--color-text-inverse);
}

/* component bases */
a {
    color: var(--color-text-brand);
}

a:hover {
    color: var(--color-text-primary);
}

.label {
    color: var(--color-text-primary);
}

.message-header {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
}

.message-body {
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.message-body code,
.message-body pre,
.notification code,
.notification pre {
    background-color: var(--color-surface-raised);
}

.progress::-webkit-progress-bar {
    background-color: var(--color-surface-muted);
}

.progress::-webkit-progress-value {
    background-color: var(--color-surface-contrast);
}

.progress::-moz-progress-bar {
    background-color: var(--color-surface-contrast);
}

/* The close control is a scrim disc, and its cross is cut out of it. */
.delete {
    background-color: var(--color-surface-scrim);
}

.delete:hover,
.delete:focus {
    background-color: var(--color-surface-scrim-hover);
}

.delete:active {
    background-color: var(--color-surface-scrim-hover);
}

.delete:before,
.delete:after {
    background-color: var(--color-surface-inverse);
}

.tag.is-delete:hover,
.tag.is-delete:focus {
    background-color: var(--color-surface-hover);
}

.tag.is-delete:active {
    background-color: var(--color-surface-pressed);
}

/* A box and a card are lifted surfaces: the second ring in each shadow is the hairline edge
   bulma draws instead of a border, so both slots follow the shadow role. */
.box,
.card {
    box-shadow: 0 2px 3px var(--color-shadow-low), 0 0 0 1px var(--color-shadow-low);
}

.card-header {
    box-shadow: 0 1px 2px var(--color-shadow-low);
}

.card-header-title {
    color: var(--color-text-primary);
}

.card-footer,
.card-footer-item:not(:last-child) {
    border-color: var(--color-border-default);
}

/* Vendor chrome. Bulma writes its own greys, and its own link orange, into the base form of
   every control, so an un-restated selector keeps an embedded hex after the palette swaps.
   Each one is restated on the role its property tier asks for: a fill goes to a surface, an
   edge to a border, a glyph to a text role. Where the old value was the legacy orange the
   replacement is the brand family when a one-color palette collapses accent into primary.
   surface-muted is a pale tint rather than a grey by design, which is what turns Bulma's
   whitesmoke chrome into part of the label instead of a leftover. */
.box {
    background-color: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

.button {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border-default);
}

.button:hover,
.button.is-hovered {
    border-color: var(--color-border-strong);
}

.button:focus,
.button.is-focused {
    border-color: var(--color-border-brand);
}

.button:active,
.button.is-active {
    border-color: var(--color-border-contrast);
    box-shadow: inset 0 1px 2px var(--color-shadow-low);
}

.button.is-static {
    background-color: var(--color-surface-disabled);
    border-color: var(--color-border-default);
}

code {
    background-color: var(--color-surface-well);
    color: var(--color-text-danger-strong);
}

pre {
    background-color: var(--color-surface-well);
    color: var(--color-text-secondary);
}

hr {
    background-color: var(--color-border-default);
}

.dropdown-content {
    background-color: var(--color-surface-raised);
}

.dropdown-divider {
    background-color: var(--color-border-default);
}

.file-cta {
    background-color: var(--color-surface-muted);
    color: var(--color-text-secondary);
}

.file-cta,
.file-name {
    border-color: var(--color-border-default);
}

.input,
.textarea {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.input:hover,
.input.is-hovered,
.textarea:hover,
.textarea.is-hovered {
    border-color: var(--color-border-strong);
}

.input:focus,
.input.is-focused,
.input:active,
.input.is-active,
.textarea:focus,
.textarea.is-focused,
.textarea:active,
.textarea.is-active {
    border-color: var(--color-border-brand);
}

.select select {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border-default);
    color: var(--color-text-primary);
}

.menu-label {
    color: var(--color-text-muted);
}

.menu-list a.is-active {
    background-color: var(--color-surface-brand);
}

.message {
    background-color: var(--color-surface-muted);
}

.notification {
    background-color: var(--color-surface-muted);
}

.modal-card-body {
    background-color: var(--color-surface-raised);
}

.modal-card-head,
.modal-card-foot {
    background-color: var(--color-surface-muted);
}

.modal-card-head {
    border-bottom-color: var(--color-border-default);
}

.modal-card-foot {
    border-top-color: var(--color-border-default);
}

.modal-card-title {
    color: var(--color-text-primary);
}

.panel-heading {
    background-color: var(--color-surface-muted);
}

.panel-heading,
.panel-tabs,
.panel-block {
    border-color: var(--color-border-default);
}

.panel-block {
    color: var(--color-text-primary);
}

.pagination-previous,
.pagination-next,
.pagination-link {
    border-color: var(--color-border-default);
}

.pagination-link.is-current {
    background-color: var(--color-surface-brand);
    border-color: var(--color-border-brand);
}

.tabs a {
    border-bottom-color: var(--color-border-default);
}

.tabs li.is-active a {
    border-bottom-color: var(--color-border-brand);
}

.table {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.table td,
.table th {
    border-color: var(--color-border-default);
}

.table thead td,
.table thead th {
    color: var(--color-text-primary);
}

strong {
    color: var(--color-text-primary);
}

/* Typography. These greys are the reason a heading stayed dark on a dark page: only the
   hero variants ever restated them, so every .title outside a hero kept bulma's own color. */
.title {
    color: var(--color-text-primary);
}

.subtitle {
    color: var(--color-text-secondary);
}

.subtitle strong {
    color: var(--color-text-primary);
}

.card {
    background-color: var(--color-surface-raised);
    color: var(--color-text-primary);
}

/* A nested or repeated media block draws its own separator. */
.media .media,
.media + .media {
    border-top-color: var(--color-border-default);
}

.media-content {
    color: var(--color-text-primary);
}