/* dark palette backgrounds */

.csprp-bg-darkteal-core{
    background-color: var(--csprp-darkteal-core);
    color: var(--csprp-white);
}
.csprp-bg-darkpurple-core{
    background-color: var(--csprp-darkpurple-core);
    color: var(--csprp-white);
}
.csprp-bg-darkblue-core{
    background-color: var(--csprp-darkblue-core);
    color: var(--csprp-white);
}
.csprp-bg-darkgreen-core{
    background-color: var(--csprp-darkgreen-core);
    color: var(--csprp-white);
}
.csprp-bg-darkpink-core{
    background-color: var(--csprp-darkpink-core);
    color: var(--csprp-white);
}





/* light palette backgrounds */

.csprp-bg-pink-core{
    background-color: var(--csprp-pink-core);
    color: var(--csprp-pink-950);
}
.csprp-bg-orange-core{
    background-color: var(--csprp-orange-core);
    color: var(--csprp-orange-950);
}
.csprp-bg-blue-core{
    background-color: var(--csprp-blue-core);
    color: var(--csprp-blue-950);
}
.csprp-bg-green-core{
    background-color: var(--csprp-green-core);
    color: var(--csprp-green-950);
}
.csprp-bg-yellow-core{
    background-color: var(--csprp-yellow-core);
    color: var(--csprp-yellow-950);
}


/* lighter tints backgrounds */

.csprp-bg-green-200{
    background-color: var(--csprp-green-200); 
    color: var(--csprp-green-950);
}
.csprp-bg-green-100{
    background-color: var(--csprp-green-100); 
    color: var(--csprp-green-950);
}
.csprp-bg-green-50{
    background-color: var(--csprp-green-50); 
    color: var(--csprp-green-950);
}
.csprp-bg-yellow-200{
    background-color: var(--csprp-yellow-200); 
    color: var(--csprp-yellow-950);
}
.csprp-bg-yellow-100{
    background-color: var(--csprp-yellow-100); 
    color: var(--csprp-yellow-950);
}
.csprp-bg-yellow-50{
    background-color: var(--csprp-yellow-50); 
    color: var(--csprp-yellow-950);
}
.csprp-bg-blue-200{
    background-color: var(--csprp-blue-200); 
    color: var(--csprp-blue-950);
}
.csprp-bg-blue-100{
    background-color: var(--csprp-blue-100); 
    color: var(--csprp-blue-950);
}
.csprp-bg-blue-50{
    background-color: var(--csprp-blue-50); 
    color: var(--csprp-blue-950);
}
.csprp-bg-pink-200{
    background-color: var(--csprp-pink-200); 
    color: var(--csprp-pink-950);
}
.csprp-bg-pink-100{
    background-color: var(--csprp-pink-100); 
    color: var(--csprp-pink-950);
}
.csprp-bg-pink-50{
    background-color: var(--csprp-pink-50); 
    color: var(--csprp-pink-950);
}
.csprp-bg-orange-300{
    background-color: var(--csprp-orange-300); 
    color: var(--csprp-orange-950);
}
.csprp-bg-orange-200{
    background-color: var(--csprp-orange-200); 
    color: var(--csprp-orange-950);
}
.csprp-bg-orange-100{
    background-color: var(--csprp-orange-100); 
    color: var(--csprp-orange-950);
}
.csprp-bg-orange-50{
    background-color: var(--csprp-orange-50); 
    color: var(--csprp-orange-950);
}




/* match colour of links to 950 varient of text colour (inherited) */
[class*="csprp-bg-"] a,
[class*="csprp-bg-"] a:hover{
    color: inherit;
}


/* but retain focus colour no matter what */
[class*="csprp-bg-"] a:focus-visible{
    color: black;
}



/* font colours, can be used on <span> */

.csprp-text-color-yellow-core{
    color: var(--csprp-yellow-core);
}