@layer components {
    /* Badge — LED-style status indicators */
    .badge {
        --badge-size: 1.75em;
        --badge-color: var(--surface-sunken);
        --badge-text: var(--ink-soft);

        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--minor {
        --badge-color: var(--color-status-minor);
        --badge-text: white;

        box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-status-minor) 20%, transparent);
    }

    .badge--major {
        --badge-color: var(--color-status-major);
        --badge-text: white;

        box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-status-major) 25%, transparent);
    }

    /* 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: var(--color-status-good);
        color: var(--color-status-good-ink);
    }

    .status-indicator--check {
        --status-color: var(--color-status-elevated);
        color: var(--color-status-elevated-ink);
    }

    .status-indicator--caution {
        --status-color: var(--color-status-minor);
        color: var(--color-status-minor-ink);
    }

    .status-indicator--critical {
        --status-color: var(--color-status-major);
        color: var(--color-status-major-ink);
    }

    .status-indicator--info {
        --status-color: var(--color-considering);
        color: var(--color-considering-ink);
    }

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