.dgs-token-swatch {
    min-height: 104px;
    border: 1px solid var(--dgs-color-neutral-200);
    border-radius: var(--dgs-radius-lg);
    padding: var(--dgs-space-4);
    display: flex;
    align-items: flex-end;
    color: var(--dgs-color-neutral-900);
    background: var(--dgs-color-white);
    box-shadow: var(--dgs-shadow-sm);
    font-size: var(--dgs-font-size-sm);
    font-weight: var(--dgs-font-weight-semibold);
}

.dgs-token-swatch--primary {
    color: var(--dgs-color-white);
    background: var(--dgs-color-primary-600);
}

.dgs-token-swatch--neutral {
    background: var(--dgs-color-neutral-100);
}

.dgs-token-swatch--success {
    color: var(--dgs-color-success-600);
    background: var(--dgs-color-success-50);
}

.dgs-token-swatch--warning {
    color: var(--dgs-color-warning-700);
    background: var(--dgs-color-warning-50);
}

.dgs-token-swatch--danger {
    color: var(--dgs-color-danger-600);
    background: var(--dgs-color-danger-50);
}

.dgs-showcase-note {
    margin: 0;
    color: var(--dgs-color-neutral-600);
    font-size: var(--dgs-font-size-sm);
    line-height: var(--dgs-line-height-normal);
}