@layer components {
    .chip {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        min-height: 32px;
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-round);
        border: 1px solid var(--line);
        background: var(--paper);
        color: var(--soil);
        font-size: var(--size-small);
        text-decoration: none;
    }

    .chip-filter {
        min-height: var(--touch-target);
    }

    .chip-filter:hover {
        border-color: var(--sky);
        background: var(--sky-tint);
    }

    .chip-selected {
        background: var(--sky);
        border-color: var(--sky);
        color: var(--paper);
    }

    .chip-category {
        background: var(--sky-tint);
        border-color: transparent;
        color: var(--sky-deep);
    }

    .chip-status {
        font-family: var(--font-data);
        font-size: var(--size-micro);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
}