span[class^="badge"] {
    --badge-hue: 250;
    --badge-bg-lightness: 96%;
    --badge-bg-chroma: 0.035;
    --badge-border-lightness: 76%;
    --badge-border-chroma: 0.08;
    --badge-text-lightness: 36%;
    --badge-text-chroma: 0.1;
    background-color: oklch(var(--badge-bg-lightness) var(--badge-bg-chroma) var(--badge-hue));
    border: 1px solid oklch(var(--badge-border-lightness) var(--badge-border-chroma) var(--badge-hue));
    color: oklch(var(--badge-text-lightness) var(--badge-text-chroma) var(--badge-hue));
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin: 0 5px 0 0;
    padding: 2px 5px;
    text-align: center;
    text-transform: uppercase;

    &[class*="red"],
    &[class*="danger"] {
        --badge-hue: 25;
    }

    &[class*="orange"],
    &[class*="warning"] {
        --badge-hue: 65;
    }

    &[class*="yellow"] {
        --badge-hue: 95;
    }

    &[class*="green"],
    &[class*="success"] {
        --badge-hue: 150;
    }

    &[class*="blue"],
    &[class*="info"] {
        --badge-hue: 245;
    }
}