[data-theme] .button.is-primary {
    background-color: var(--button-primary-bg, var(--primary));
    border-color: var(--button-primary-bg, var(--primary));
    color: var(--button-primary-text, #fff);
}

    [data-theme] .button.is-primary:hover {
        filter: brightness(0.95);
        color: var(--button-primary-text, #fff);
    }

[data-theme] .button.is-outlined {
    background-color: transparent;
    border-color: var(--primary, #435A5F);
    color: var(--primary, #435A5F);
}

    [data-theme] .button.is-outlined:hover {
        background-color: var(--primary, #435A5F);
        border-color: var(--primary, #435A5F);
        color: #fff;
    }

[data-theme] .button.is-success {
    background-color: var(--button-success-bg, var(--success));
    border-color: var(--button-success-bg, var(--success));
    color: var(--button-success-text, #ffffff);
}

    [data-theme] .button.is-success:hover {
        filter: brightness(0.95);
        color: var(--button-success-text, #ffffff);
    }

[data-theme] .button.is-info {
    background-color: var(--button-info-bg, var(--info));
    border-color: var(--button-info-bg, var(--info));
    color: var(--button-info-text, #ffffff);
}

    [data-theme] .button.is-info:hover {
        filter: brightness(0.95);
        color: var(--button-info-text, #ffffff);
    }

[data-theme] .button.is-warning {
    background-color: var(--button-warning-bg, var(--warning));
    border-color: var(--button-warning-bg,var(--warning));
    color: var(--button-warning-text, var(--text-primary));
}

    [data-theme] .button.is-warning:hover {
        filter: brightness(0.95);
        color: var(--button-warning-text, var(--text-primary));
    }

[data-theme] .button.is-danger {
    background-color: var(--button-danger-bg, var(--danger));
    border-color: var(--button-danger-bg, var(--danger));
    color: var(--button-danger-text, #fff);
}

    [data-theme] .button.is-danger:hover {
        filter: brightness(0.95);
        color: var(--button-danger-text, #fff);
    }

/* Outlined buttons draw the intent colour as TEXT on a page surface, while the

   filled variants use it as a BACKGROUND under white text. Those want opposite

   lightness, so an outlined button that borrows --button-*-bg is barely visible

   on a dark theme - the delete icon measured 1.68:1 on a table row.

   --button-*-outline lets a theme supply the text-legible value; it falls back to

   --button-*-bg, so themes that already read well need no declaration. */

[data-theme] .button.is-primary.is-outlined {
    background-color: transparent;
    border-color: var(--button-primary-outline, var(--button-primary-bg, var(--primary)));
    color: var(--button-primary-outline, var(--button-primary-bg, var(--primary)));
}

    [data-theme] .button.is-primary.is-outlined:hover {
        background-color: var(--button-primary-bg,var(--primary));
        border-color: var(--button-primary-bg,var(--primary));
        color: #fff;
    }

[data-theme] .button.is-success.is-outlined {
    background-color: transparent;
    border-color: var(--button-success-bg,var(--success));
    color: var(--button-success-bg,var(--success));
}

    [data-theme] .button.is-success.is-outlined:hover {
        background-color: var(--button-success-bg,var(--success));
        border-color: var(--button-success-bg, var(--success));
        color: var(--button-success-text, #fff);
    }

[data-theme] .button.is-info.is-outlined {
    background-color: transparent;
    border-color: var(--button-info-outline, var(--button-info-bg, var(--info)));
    color: var(--button-info-outline, var(--button-info-bg, var(--info)));
}

    [data-theme] .button.is-info.is-outlined:hover {
        background-color: var(--button-info-bg, var(--info));
        border-color: var(--button-info-bg,var(--info));
        color: var(--button-info-text, #fff);
    }

[data-theme] .button.is-warning.is-outlined {
    background-color: transparent;
    border-color: var(--button-warning-bg, var(--warning));
    color: var(--button-warning-bg, var(--warning));
}

    [data-theme] .button.is-warning.is-outlined:hover {
        background-color: var(--button-warning-bg, var(--warning));
        border-color: var(--button-warning-bg, var(--warning));
        color: var(--button-warning-text, var(--text-primary));
    }

[data-theme] .button.is-danger.is-outlined {
    background-color: transparent;
    border-color: var(--button-danger-outline, var(--button-danger-bg, var(--danger)));
    color: var(--button-danger-outline, var(--button-danger-bg, var(--danger)));
}

    [data-theme] .button.is-danger.is-outlined:hover {
        background-color: var(--button-danger-bg, var(--danger));
        border-color: var(--button-danger-bg, var(--danger));
        color: var(--button-danger-text, #fff);
    }

[data-theme] .button {
    &.is-light,
    &.is-ghost {
        background-color: var(--surface-alt, #f4f6f6);
        border-color: var(--border, #d9dede);
        color: var(--text-primary, #222222);
    }
}

[data-theme] .button.is-light:hover,
[data-theme] .button.is-ghost:hover {
    filter: brightness(0.97);
    color: var(--text-primary, #222222);
}

[data-theme] .button.is-light {
    background: var(--surface-alt, #f4f6f6);
    border-color: var(--border, #d9dede);
    color: var(--text-primary, #222222);
}

[data-theme] .button.is-light:hover {
    background: var(--table-row-hover, rgba(67,90,95,0.06));
    color: var(--text-primary, #222222);
}