/*
 * Color utilities. Apply with any other component (.cell, .tap-chip, etc.)
 * to paint with the named swatch from tokens.css. Lives in the utilities
 * layer so it wins over component defaults.
 */

@layer utilities {
  .bg-red        { background: var(--c-red); }
  .bg-orange     { background: var(--c-orange); }
  .bg-yellow     { background: var(--c-yellow); }
  .bg-green      { background: var(--c-green); }
  .bg-dark-green { background: var(--c-dark-green); }
  .bg-purple     { background: var(--c-purple); }
  .bg-blue       { background: var(--c-blue); }
  .bg-pink       { background: var(--c-pink); }
  .bg-teal       { background: var(--c-teal); }
  .bg-gray       { background: var(--c-gray); }
  .bg-slate      { background: var(--c-slate); }
}