/* Background color */

.bc-transparent     { background-color: transparent; }

.bc-white           { background-color: var(--white); }
.bc-white900        { background-color: var(--white900); }
.bc-white700        { background-color: var(--white700); }
.bc-white500        { background-color: var(--white500); }
.bc-white300        { background-color: var(--white300); }
.bc-white100        { background-color: var(--white100); }

.bc-black           { background-color: var(--black); }
.bc-black900        { background-color: var(--black900); }
.bc-black700        { background-color: var(--black700); }
.bc-black500        { background-color: var(--black500); }
.bc-black300        { background-color: var(--black300); }
.bc-black100        { background-color: var(--black100); }

.bc-red             { background-color: var(--red500); }

.bc-pink            { background-color: var(--pink500); }
.bc-pink200         { background-color: var(--pink200); }

.bc-purple          { background-color: var(--purple500); }
.bc-purple200       { background-color: var(--purple200); }

.bc-violet          { background-color: var(--violet500); }
.bc-violet200       { background-color: var(--violet200); }

.bc-indigo          { background-color: var(--indigo500); }
.bc-indigo200       { background-color: var(--indigo200); }

.bc-blue            { background-color: var(--blue500); }
.bc-blue200         { background-color: var(--blue100); }

.bc-teal            { background-color: var(--teal500); }
.bc-teal200         { background-color: var(--teal200); }

.bc-green           { background-color: var(--green500); }
.bc-green200        { background-color: var(--green100); }

.bc-lime            { background-color: var(--lime500); }
.bc-lime200         { background-color: var(--lime200); }

.bc-yellow          { background-color: var(--yellow500); }
.bc-yellow200       { background-color: var(--yellow200); }

.bc-amber           { background-color: var(--amber500); }
.bc-amber200        { background-color: var(--amber200); }

.bc-orange          { background-color: var(--orange500); }
.bc-orange200       { background-color: var(--orange200); }

.bc-brown           { background-color: var(--brown500); }
.bc-brown200        { background-color: var(--brown200); }

.bc-gray100 { background-color: var(--gray100); }
.bc-gray200 { background-color: var(--gray200); }
.bc-gray300 { background-color: var(--gray300); }
.bc-gray400 { background-color: var(--gray400); }
.bc-gray500 { background-color: var(--gray500); }
.bc-gray600 { background-color: var(--gray600); }
.bc-gray700 { background-color: var(--gray700); }
.bc-gray800 { background-color: var(--gray800); }
.bc-gray900 { background-color: var(--gray900); }