@layer components {
    .badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: 2px var(--space-2);
        border-radius: var(--radius-s);
        font-size: var(--size-micro);
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .badge .icon {
        width: 14px;
        height: 14px;
    }

    .badge-verified {
        background: var(--sky-tint);
        color: var(--sky-deep);
    }

    .badge-featured {
        background: var(--wheat-tint);
        color: var(--soil);
        border: 1px solid var(--wheat);
    }

    .badge-free {
        background: var(--haze);
        color: var(--soil);
    }

    .badge-partner {
        background: var(--haze);
        color: var(--fog);
    }
}