:root {
    /* Usage: text (dark on light) */
    --colors--primary--dark: #0D3154;

    /* Usage: border color, text (dark on light), background-color */
    --colors--primary--light: #15518C;

    /* Usage: text (medium on light), border-color */
    --colors--secondary--medium: #A1B9D1;

    /* Usage: background-color, language selector hover */
    --colors--secondary--light: #F2F4F7;

    /* Usage: text (light on dark), field background */
    --colors--secondary--white: #FFFFFF;

    /* Usage: validation errors, status pages */
    --colors--contrast--red: #BF1D1D;

    /* Usage: status pages, validation tooltips */
    --colors--contrast--green: #0A661A;

    /* Usage: disabled states and placeholders */
    --colors--contrast--blueish: #8DA3B8;

    /* Usage: hover */
    --colors--contextual--medium: color-mix(in oklab, var(--colors--primary--light) 92%, var(--colors--secondary--white) 8%);

    /* Usage: click action */
    --colors--contextual--dark: color-mix(in oklab, var(--colors--primary--light) 88%, black 12%);

    /* Usage: disabled */
    --colors--contextual--gray--blueish: #A3ABB3;

    /* Usage: language selector */
    --colors--contextual--gray--light: #879099;

    /* Legacy */
    --card-bg: #e9eff5;
}