html {
    /* color palette */
    --off-black: #151c22;
    --off-white: #feefe5;

    --charcoal: #344854;
    --dark-gray: #495867;
    --medium-gray: #628395;
    --light-gray: #9caea9;

    --blue: #a2d3c2;
    --orange: #d17b0f;
    --pink-or-red: #f24236;
    --yellow: #eec643;
}

body.dark {
    /* dark theme */
    --default-background: var(--charcoal);
    --default-border: var(--light-gray);
    --default-divider: var(--blue);
    --default-headline: var(--orange);
    --default-link: var(--yellow);
    --default-shadow: var(--off-black);
    --default-text: var(--off-white);

    --dialog-background: var(--dark-gray);
    --dialog-headline: var(--default-headline);
    --dialog-link: var(--default-link);
    --dialog-shadow: var(--default-shadow);
    --dialog-text: var(--default-text);

    --form-button-background: var(--orange);
    --form-button-shadow: var(--default-shadow);
    --form-button-text: var(--default-text);
    --form-field-border: var(--default-border);
    --form-error: var(--pink-or-red);
    --form-link: var(--default-link);
    --form-submit: var(--orange);

    --oidc-button-background: var(--off-black);
    --oidc-button-text: var(--default-text);

    --table-background: var(--off-black);
    --table-background-highlight: var(--medium-gray);
    --table-background-error: var(--pink-or-red);
    --table-background-section: var(--dark-gray);
    --table-border: var(--charcoal);
    --table-link: var(--default-link);
    --table-headline: var(--default-headline);
    --table-text: var(--default-text);
}