:root {
    --background-color: #FFF;
    --ui-background-color: #EFEFEF;
    --accent-primary-color: #1F64CC;
    --accent-secondary-color: #5aad85;
    --accent-warning-color: #e84b2c;

    --border-color: #CCC;
    --border-color-radius: 8px;

    /* base font size set in body */
    --text-size: 14px;
    --line-height: 1.8;
    /* base text color set in body */
    --text-color: #100F0F;
    /* for text on darker backgrounds, like buttons, to ensure strong contrast */
    --text-inverted-color: #F4F4F4;
    /* text color for secondary information – default slight grey */
    --text-secondary-color: #626469;

    --spacing-xsmall: 4px;
    --spacing-small: 8px;
    --spacing: 16px;
    --spacing-medium: 24px;
    --spacing-large: 32px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #191919;
        --ui-background-color: #333;
        --accent-primary-color: #248AF5;
        --accent-secondary-color: #5aad85;
        --accent-warning-color: #F26C6C;

        --border-color-color: #555;

        /* base text color set in body */
        --text-color: #dee2e8;
        --text-inverted-color: #151515;
        /* text color for secondary information – default slight grey */
        --text-secondary-color: #979fa4;
    }
}

@media (prefers-contrast: more) {
    :root {
        --background-color: #FFF;
        --ui-background-color: #CCC;
        --accent-primary-color: #0149ab;
        --accent-secondary-color: #5aad85;
        --accent-warning-color: #a20b05;

        --border-color: #777;

        --text-color: #000;
        --text-inverted-color: #FFF;
        --text-secondary-color: #444;
    }
}