.sid__dark-mode{
    /* Usage: text (dark on light) */
    --colors--primary--dark: pink; /* #afcfef */

    /* Usage: border color, text (dark on light), background-color */
    --colors--primary--light: hotpink; /* #7dbcc5 */

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

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

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

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

    /* Usage: status pages, validation tooltips */
    --colors--contrast--green: #9df0ab;

    /* Usage: disabled states and placeholders */
    --colors--contrast--blueish: #495c6f;

    /* 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%, white 12%);

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

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

    /* Legacy */
    --card-bg: #0a0f15;
}