@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;
    }

    /* Status indicator — dot + label pattern (redundant coding per MIL-STD-1472H) */
    .status-indicator {
        align-items: center;
        display: inline-flex;
        font-family: var(--font-data);
        font-size: var(--text-x-small);
        font-weight: 600;
        gap: 0.4em;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .status-indicator::before {
        background-color: var(--status-color, var(--color-ink-medium));
        block-size: 0.55em;
        border-radius: 50%;
        content: "";
        display: block;
        flex-shrink: 0;
        inline-size: 0.55em;
    }

    .status-indicator--nominal {
        --status-color: oklch(var(--lch-green-medium));
        color: oklch(var(--lch-green-dark));
    }

    .status-indicator--caution {
        --status-color: oklch(var(--lch-yellow-medium));
        color: oklch(var(--lch-yellow-dark));
    }

    .status-indicator--critical {
        --status-color: oklch(var(--lch-red-medium));
        color: oklch(var(--lch-red-dark));
    }

    .status-indicator--info {
        --status-color: oklch(var(--lch-blue-medium));
        color: oklch(var(--lch-blue-dark));
    }

    .status-indicator--idle {
        --status-color: var(--color-ink-light);
        color: var(--color-ink-medium);
    }
}