:root {
    /* --color-primary: #007bff; */
    --color-primary: 
        radial-gradient(circle at 20% 30%, rgb(212 175 55) 0%, transparent 12%), 
        radial-gradient(circle at 65% 20%, rgba(184, 134, 11, 0.5) 0%, transparent 14%), 
        radial-gradient(circle at 40% 60%, rgba(205, 149, 12, 0.4) 0%, transparent 13%), 
        radial-gradient(circle at 75% 65%, rgba(212, 175, 55, 0.4) 0%, transparent 11%), 
        linear-gradient(135deg, #df7d32, #df7d32, #df7d32);
    --color-secondary: #6c757d;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-default: #f8f9fa;
    --color-dark: #343a40;
    --color-light: #ffffff;
}

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

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

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