id/styles/colours.css

:root {
    --black: #000000;
    --white: #ffffff;

    /* ByeCorps colour scheme. Use sparsely on this site. */
    --byecorps-blue: #1b5652;
    --byecorps-white: #e6feff;

    /* ByeCorps ID colour scheme. Use on this site. */
    --black-bean: #330f0a;
    --dark-slate-gray: #394f49;
    --fern-green: #65743a;
    --flax: #efdd8d;
    --mindaro: #f4fdaf;

    /* open colors: used for debugging */
    --red-5: #ff6b6b;
    --red-5-transparent: #ff6b6b3a;
    --red-8: #e03131;
    --green-5: #51cf66;
    --green-8: #2f9e44;
    --grey-0: #f8f9fa;
    --grey-2: #e9ecef;
    --grey-8: #343a40;
    --grey-9: #212529;

    --background: white;
    --background-dark: #121212;

    color-scheme: light dark;
}

html {
    background: var(--background, white);
}

button, .button {
    background-color: #1f302b40;
    color: var(--white);
}

button.primary, .button.primary {
    color: var(--black-bean);
    background-color: var(--flax);
}

button.danger, .button.danger {
    color: var(--white);
    background-color: var(--red-5);
}

header {
    background-color: var(--flax);
    color: var(--dark-slate-gray);
}

header a {
    color: var(--dark-slate-gray);
}

input, textarea {
    all: unset;
    padding: 1em;
    text-align: start;

    border-radius: 1em;

    background-color: #c0c0c077;
}

input[data-com-onepassword-filled="light"] {
    background-color: var(--byecorps-white) !important;
}

input[data-com-onepassword-filled="dark"] {
    background-color: var(--byecorps-blue) !important;
}

.icon-true {
    color: var(--green-8);
}

.icon-false {
    color: var(--red-8);
}

.dangerzone {
    background-color: var(--red-5-transparent);
    color: var(--white);

    padding: 0.5rem 1em;
    border-radius: 1em;

}

.dangerzone h2 {
    margin: 0;
}

.dangerzone p {
    margin: 0;
}

.flash {
    background: var(--red-5);
    color: black;
}

@media screen and (prefers-color-scheme: dark) {
    html {
        background: var(--background-dark, #121212);
    }

    button.primary, .button.primary {
        color: var(--flax);
        background-color: var(--dark-slate-gray);
    }

    header {
        background-color: var(--dark-slate-gray);
        color: var(--flax);
    }

    header a {
        color: var(--flax);
    }

    input, textarea {

        background-color: #2c2c2c77;
    }

    .icon-true {
        color: var(--green-5);
    }

    .icon-false {
        color: var(--red-5);
    }

    a, a:visited, a:link {
        color: var(--flax);
    }
}