:root {
    --whitespace: #fff;
    --main-colour: #254c5a;
    --main-accent: #3bbcac;
    --smokey-grey: #59595c;
    --cool-grey: #cfd2d1;
    --snipr-orange: #ec6d23;
}

.ui-text-whitespace {
    color: var(--whitespace);
}

.ui-text-main {
    color: var(--main-colour);
}

.ui-text-accent {
    color: var(--main-accent);
}

.ui-text-smokeygrey {
    color: var(--smokey-grey);
}

.ui-text-coolgrey {
    color: var(--cool-grey);
}

.ui-text-snipr {
    color: var(--snipr-orange);
}

.ui-background-whitespace {
    background-color: var(--whitespace);
}

.ui-background-main {
    background-color: var(--main-colour);
}

.ui-background-accent {
    background-color: var(--main-accent);
}

.ui-background-smokeygrey {
    background-color: var(--smokey-grey);
}

.ui-background-coolgrey {
    background-color: var(--cool-grey);
}

.ui-background-snipr {
    background-color: var(--snipr-orange);
}