@layer components {

    /* Badge — LED-style status indicators */
    .badge {
        --badge-size: 1.75em;
        --badge-color: var(--color-surface-hover);
        --badge-text: var(--color-text-subtle);

        aspect-ratio: 1;
        background-color: var(--badge-color);
        block-size: var(--badge-size);
        border-radius: 50%;
        color: var(--badge-text);
        display: grid;
        flex-shrink: 0;
        inline-size: var(--badge-size);
        place-items: center;
    }

    /* Status modifiers — industrial signal colors */
    .badge--good {
        --badge-color: oklch(var(--lch-green-medium));
        --badge-text: white;

        box-shadow: 0 0 0 2px oklch(var(--lch-green-medium) / 0.2);
    }

    .badge--minor {
        --badge-color: oklch(var(--lch-yellow-medium));
        --badge-text: white;

        box-shadow: 0 0 0 2px oklch(var(--lch-yellow-medium) / 0.2);
    }

    .badge--major {
        --badge-color: oklch(var(--lch-red-medium));
        --badge-text: white;

        box-shadow: 0 0 0 2px oklch(var(--lch-red-medium) / 0.25);
    }

    /* Pill variant for numerical values */
    .badge--pill {
        aspect-ratio: unset;
        block-size: auto;
        border-radius: 1em;
        font-family: var(--font-data);
        font-size: var(--font-size-small);
        inline-size: auto;
        padding-block: 0.15em;
        padding-inline: 0.75em;
        white-space: nowrap;
    }
}