:root {
    --bg-main: #ffffff;
    --bg-dim: #f8f8f8;
    --bg-alt: #f0f0f0;

    --bg-vb-blue-main: #305f82;
    --bg-vb-blue-alt: #c4d8de;
    --bg-vb-alt: #eeede7;

    --bg-active: #d7d7d7;
    --bg-inactive: #efefef;

    --bg-special-cold: #dde3f4;
    --bg-special-mild: #c4ede0;
    --bg-special-warm: #f0e0d4;
    --bg-special-calm: #f8ddea;

    --bg-hl-alt-intense: #e8dfd1;

    --fg-main: #000000;
    --fg-dim: #282828;
    --fg-alt: #505050;

    --fg-active: #0a0a0a;
    --fg-inactive: #404148;

    --fg-special-cold: #093060;
    --fg-special-mild: #184034;
    --fg-special-warm: #5d3026;
    --fg-special-calm: #61284f;

    /* foregrounds that can be combined with bg-main, bg-dim, bg-alt */
    --red: #a60000;
    --red-alt: #972500;
    --red-alt-other: #a0132f;
    --red-faint: #7f1010;
    --red-alt-faint: #702f00;
    --red-alt-other-faint: #7f002f;

    --green: #005e00;
    --green-alt: #315b00;
    --green-alt-other: #145c33;
    --green-faint: #104410;
    --green-alt-faint: #30440f;
    --green-alt-other-faint: #0f443f;

    --yellow: #813e00;
    --yellow-alt: #70480f;
    --yellow-alt-other: #863927;
    --yellow-faint: #5f4400;
    --yellow-alt-faint: #5d5000;
    --yellow-alt-other-faint: #5e3a20;

    --blue: #0031a9;
    --blue-alt: #2544bb;
    --blue-alt-other: #0000c0;
    --blue-faint: #003497;
    --blue-alt-faint: #0f3d8c;
    --blue-alt-other-faint: #001087;

    --magenta: #721045;
    --magenta-alt: #8f0075;
    --magenta-alt-other: #5317ac;
    --magenta-faint: #752f50;
    --magenta-alt-faint: #7b206f;
    --magenta-alt-other-faint: #55348e;

    --cyan: #00538b;
    --cyan-alt: #30517f;
    --cyan-alt-other: #005a5f;
    --cyan-faint: #005077;
    --cyan-alt-faint: #354f6f;
    --cyan-alt-other-faint: #125458;

    /* combine with bg-main */
    --red-intense: #b60000;
    --orange-intense: #904200;
    --green-intense: #006800;
    --yellow-intense: #605b00;
    --blue-intense: #1f1fce;
    --magenta-intense: #a8007f;
    --purple-intense: #7f10d0;
    --cyan-intense: #005f88;

    /* combine with bg-active, bg-inactive */
    --red-active: #8a0000;
    --green-active: #004c2e;
    --yellow-active: #702f00;
    --blue-active: #0030b4;
    --magenta-active: #5c2092;
    --cyan-active: #003f8a;

    /* subtle goes with fg-dim. intense with fg-main. */
    --red-subtle-bg: #f2b0a2;
    --red-intense-bg: #ff9f9f;
    --green-subtle-bg: #aecf90;
    --green-intense-bg: #5ada88;
    --yellow-subtle-bg: #e4c340;
    --yellow-intense-bg: #f5df23;
    --blue-subtle-bg: #b5d0ff;
    --blue-intense-bg: #77baff;
    --magenta-subtle-bg: #f0d3ff;
    --magenta-intense-bg: #d5baff;
    --cyan-subtle-bg: #c0efff;
    --cyan-intense-bg: #42cbd4;

    --cyan-subtle-transparent-bg: rgba(192, 239, 255, 0.36);

    --yellow-nuanced-fg: #3f3000;
}

.has-cyan-subtle-transparent-bg {
    background-color: var(--cyan-subtle-transparent-bg);
}
.has-white-bg {
    background-color: #ffffff;
}
.has-vb-blue-main-bg {
    background-color: var(--bg-vb-blue-main);
}
.has-vb-blue-main-bg a {
    color: #fff;
}