/* Black Shades*/
.bg-bk-10  { background-color: color-mix(in srgb, var(--base-color) 90%, black 10%); }
.bg-bk-20  { background-color: color-mix(in srgb, var(--base-color) 80%, black 20%); }
.bg-bk-30  { background-color: color-mix(in srgb, var(--base-color) 70%, black 30%); }
.bg-bk-40  { background-color: color-mix(in srgb, var(--base-color) 60%, black 40%); }
.bg-bk-50  { background-color: color-mix(in srgb, var(--base-color) 50%, black 50%); }
.bg-bk-60  { background-color: color-mix(in srgb, var(--base-color) 40%, black 60%); }
.bg-bk-70  { background-color: color-mix(in srgb, var(--base-color) 30%, black 70%); }
.bg-bk-80  { background-color: color-mix(in srgb, var(--base-color) 20%, black 80%); }
.bg-bk-90  { background-color: color-mix(in srgb, var(--base-color) 10%, black 90%); }
.bg-bk-100 { background-color: black; }
.bg-bk-50-transparent { background-color: color-mix(in srgb, var(--base-color) 50%, rgba(0,0,0,0.5) 40%) }

/* White Tints */
.bg-wt-10  { background-color: color-mix(in srgb, var(--base-color) 90%, white 10%); }
.bg-wt-20  { background-color: color-mix(in srgb, var(--base-color) 80%, white 20%); }
.bg-wt-30  { background-color: color-mix(in srgb, var(--base-color) 70%, white 30%); }
.bg-wt-40  { background-color: color-mix(in srgb, var(--base-color) 60%, white 40%); }
.bg-wt-50  { background-color: color-mix(in srgb, var(--base-color) 50%, white 50%); }
.bg-wt-60  { background-color: color-mix(in srgb, var(--base-color) 40%, white 60%); }
.bg-wt-70  { background-color: color-mix(in srgb, var(--base-color) 30%, white 70%); }
.bg-wt-80  { background-color: color-mix(in srgb, var(--base-color) 20%, white 80%); }
.bg-wt-90  { background-color: color-mix(in srgb, var(--base-color) 10%, white 90%); }
.bg-wt-100 { background-color: white; }