:where(.theme-button) {
    background-color: var(--button-background-color);
    color: var(--button-foreground-color);
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--admin-card-button-border-radius);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-normal);
    display: inline-block;
    cursor: pointer;
    text-align: center;

    /* Default: white on corporate blue */
    --button-foreground-color: var(--color-primary-white);
    --button-background-color: var(--color-brand-navy);

    &:hover {
        --button-background-color: #2b5a7e;
    }

    &:focus-visible {
        outline: 3px solid var(--color-brand-navy);
        outline-offset: 2px;
    }

    &:disabled,
    &[disabled],
    &.disabled {
        opacity: 0.45;
        cursor: not-allowed;
        filter: grayscale(40%);
    }

    &:disabled:hover,
    &[disabled]:hover,
    &.disabled:hover {
        --button-background-color: var(--color-brand-navy);
    }

    &.danger {
        --button-foreground-color: var(--color-primary-white);
        --button-background-color: var(--color-ui-error);
        /* Transparent border reserves the space so the hover border doesn't
           shift the layout. */
        border: 1px solid transparent;

        &:hover {
            --button-foreground-color: var(--color-ui-error);
            --button-background-color: var(--color-primary-white);
            border-color: var(--color-ui-error);
        }
    }

    /* The quieter half of a pair, when one option is the obvious one.

       Its hover inverts the whole button rather than nudging one shade, so
       it gets the shorter duration and an eased-out curve. At the shared
       0.2s ease the letters visibly wash through mid-tones on the way. */
    &.secondary {
        --button-foreground-color: var(--color-brand-navy);
        --button-background-color: transparent;
        border: 1px solid var(--color-brand-navy);
        transition:
            color var(--transition-fast) ease-out,
            background-color var(--transition-fast) ease-out,
            border-color var(--transition-fast) ease-out;

        &:hover {
            --button-foreground-color: var(--color-primary-white);
            --button-background-color: var(--color-brand-navy);
        }
    }

    &.small {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
}