:root {
    --blue:    #0d6efd;
    --indigo:  #6610f2;
    --purple:  #6f42c1;
    --pink:    #d63384;
    --red:     #dc3545;
    --orange:  #fd7e14;
    --yellow:  #ffc107;
    --green:   #198754;
    --teal:    #20c997;
    --cyan:    #0dcaf0;
}


/* Background color classes */
.bg-blue    { background-color: var(--blue); }
.bg-indigo  { background-color: var(--indigo); }
.bg-purple  { background-color: var(--purple); }
.bg-pink    { background-color: var(--pink); }
.bg-red     { background-color: var(--red); }
.bg-orange  { background-color: var(--orange); }
.bg-yellow  { background-color: var(--yellow); }
.bg-green   { background-color: var(--green); }
.bg-teal    { background-color: var(--teal); }
.bg-cyan    { background-color: var(--cyan); }

/* Text color classes */
.text-blue    { color: var(--blue); }
.text-indigo  { color: var(--indigo); }
.text-purple  { color: var(--purple); }
.text-pink    { color: var(--pink); }
.text-red     { color: var(--red); }
.text-orange  { color: var(--orange); }
.text-yellow  { color: var(--yellow); }
.text-green   { color: var(--green); }
.text-teal    { color: var(--teal); }
.text-cyan    { color: var(--cyan); }