@layer styles {
  .ui-floral-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    max-width: 100%;
    min-height: 1.75rem;
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid transparent;
    border-radius: var(--floral-control-radius);
    background: var(--floral-blush);
    color: var(--floral-ink);
    font-family: var(--floral-sans);
    font-size: var(--floral-control-text);
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-align: start;
  }

  .ui-floral-badge--neutral { border-color: var(--floral-line); background: var(--floral-paper); }
  .ui-floral-badge--success { background: var(--floral-leaf); }
  .ui-floral-badge--attention { border-color: var(--floral-rose-line); background: var(--floral-pink); }
  .ui-floral-badge--danger { border-color: var(--floral-danger-line); background: var(--floral-blush); color: var(--floral-danger); }
}