:root {
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-default: #f8f9fa;
    --color-dark: #343a40;
    --color-light: #ffffff;
}

.bg-primary   { background-color: var(--color-primary); color: #fff; }
.bg-secondary { background-color: var(--color-secondary); color: #fff; }
.bg-danger    { background-color: var(--color-danger); color: #fff; }
.bg-warning   { background-color: var(--color-warning); color: #000; }
.bg-default   { background-color: var(--color-default); color: #000; }
.bg-dark      { background-color: var(--color-dark); color: #fff; }
.bg-light     { background-color: var(--color-light); color: #000; }

@media (max-width: 991.98px) {
    .bg-md-primary   { background-color: var(--color-primary); color: #fff; }
    .bg-md-secondary { background-color: var(--color-secondary); color: #fff; }
    .bg-md-danger    { background-color: var(--color-danger); color: #fff; }
    .bg-md-warning   { background-color: var(--color-warning); color: #000; }
    .bg-md-default   { background-color: var(--color-default); color: #000; }
    .bg-md-dark      { background-color: var(--color-dark); color: #fff; }
    .bg-md-light     { background-color: var(--color-light); color: #000; }
}

@media (max-width: 767.98px) {
    .bg-sm-primary   { background-color: var(--color-primary); color: #fff; }
    .bg-sm-secondary { background-color: var(--color-secondary); color: #fff; }
    .bg-sm-danger    { background-color: var(--color-danger); color: #fff; }
    .bg-sm-warning   { background-color: var(--color-warning); color: #000; }
    .bg-sm-default   { background-color: var(--color-default); color: #000; }
    .bg-sm-dark      { background-color: var(--color-dark); color: #fff; }
    .bg-sm-light     { background-color: var(--color-light); color: #000; }
}