@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(--soil-2);
    }

    .badge-top {
        background: var(--wheat);
        color: var(--soil);
    }

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

    .badge-founding {
        background: var(--moss-tint);
        color: var(--moss);
        border: 1px solid var(--moss);
    }

    .founding-slots {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-s);
        background: var(--moss-tint);
        color: var(--moss);
        font-weight: 600;
        font-size: var(--size-small);
    }

    .founding-slots .icon {
        width: 18px;
        height: 18px;
        flex: none;
    }
}