:root {
    --selfnet-accent: #ff510a;
    --selfnet-accent-dark: #cc4008;
    --selfnet-background: #f5f5f5;
    --selfnet-background-dark: #171717;
}

body[data-page-id="account"],
body[data-page-id="account"] .pf-v5-c-page {
    background: var(--selfnet-background);
}

body[data-page-id="account"] .pf-v5-c-button.pf-m-primary {
    background-color: var(--selfnet-accent-dark);
    color: #fff;
}

body[data-page-id="account"] .pf-v5-c-button.pf-m-primary:hover,
body[data-page-id="account"] .pf-v5-c-button.pf-m-primary:focus {
    background-color: color-mix(in srgb, var(--selfnet-accent-dark), #000 12%);
}

body[data-page-id="account"] :is(a, button, input, select):focus-visible {
    outline: 2px solid var(--selfnet-accent-dark);
    outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
    body[data-page-id="account"],
    body[data-page-id="account"] .pf-v5-c-page {
        background: var(--selfnet-background-dark);
    }

    body[data-page-id="account"] :is(a, button, input, select):focus-visible {
        outline-color: var(--selfnet-accent);
    }
}