.pepimagem-app button,
.pepimagem-app button.is-primary,
.pep3d-modal button,
.pep3d-modal button.is-primary,
.pep3d-image-editor button,
.pep3d-image-editor button.is-primary {
    border-color: #ccd7d9;
    background: #fff;
    color: #173c42;
}

.pepimagem-app button:hover,
.pepimagem-app button:focus-visible,
.pep3d-modal button:hover,
.pep3d-modal button:focus-visible,
.pep3d-image-editor button:hover,
.pep3d-image-editor button:focus-visible {
    border-color: #173c42;
    background: #173c42;
    color: #fff;
}

.pepimagem-app button:active,
.pepimagem-app button.is-active,
.pepimagem-app button[aria-pressed="true"],
.pep3d-modal button:active,
.pep3d-modal button.is-active,
.pep3d-modal button[aria-pressed="true"],
.pep3d-image-editor button:active,
.pep3d-image-editor button.is-active,
.pep3d-image-editor button[aria-pressed="true"] {
    border-color: #fc9454;
    background: #fc9454;
    color: #fff;
}

/* O editor é anexado diretamente ao body; por isso recebe o tema sem depender do modal pai. */
[data-pepimagem-theme="dark"].pep3d-image-editor {
    --ink: #fff;
    --line: #5b696f;
    color: #fff !important;
}

[data-pepimagem-theme="dark"].pep3d-image-editor :where(h3, small, label, output) {
    color: #fff !important;
}

[data-pepimagem-theme="dark"].pep3d-image-editor button[data-pep3d-editor-zoom] {
    border-color: #69777d;
    background: #293237;
    color: #fff;
}

[data-pepimagem-theme="dark"].pep3d-image-editor button[data-pep3d-editor-zoom]:hover:not(:disabled),
[data-pepimagem-theme="dark"].pep3d-image-editor button[data-pep3d-editor-zoom]:focus-visible:not(:disabled) {
    border-color: #fff;
    background: #3a464c;
    color: #fff;
}