.btn {
    align-items: center;
    gap: var(--sp-2);
    padding: .45rem .9rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: var(--color-brand-700);
    font-weight: 700;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    display: inline-block;
    transition: 0.15s ease;
}

.btn.primary {
    background: #2f3a55;
    color: #c6ffd0;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0);
}

.btn.ghost {
    background: transparent;
    border-color: var(--color-brand-600);
}

.card {
    border: 1px solid var(--neutral-600);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
}

.pill {
    display: inline-block;
    align-items: center;
    gap: .4rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--neutral-200);
    background: var(--neutral-50);
    color: var(--neutral-800);
    white-space: nowrap;
}

.pill.xs {
    font-size: var(--fs-xs);
}

.pill.sm {
    font-size: var(--fs-sm);
}


.pill.md {
    font-size: var(--fs-base);
}

.pill.lg {
    font-size: var(--fs-lg);
}

.pill.xl {
    font-size: var(--fs-xl);
}

.filled.neutral {
    background: var(--neutral-50);
    color: #333;
    border-color: var(--neutral-200);
}

.filled.info {
    background: #eaf2ff;
    color: #2257a3;
    border-color: #cfe2ff;
}

.filled.success {
    background: #eaf7ec;
    color: #287a37;
    border-color: #c9e6cd;
}

.filled.warning {
    background: #fff5e6;
    color: #a66300;
    border-color: #ffe0b3;
}

.outlined {
    background: transparent;
}

.outlined.neutral {
    color: #555;
    border-color: #d4d4d8;
}

.outlined.info {
    color: #2257a3;
    border-color: #cfe2ff;
}

.outlined.success {
    color: #287a37;
    border-color: #c9e6cd;
}

.outlined.warning {
    color: #a66300;
    border-color: #ffe0b3;
}

.badge {
    padding: .25rem .5rem;
    border-radius: .5rem;
    font-size: var(--fs-xs);
    background: var(--neutral-100);
    color: var(--neutral-800);
    border: 1px solid var(--neutral-200);
}