.u-bg-surface-primary { background-color: var(--bg-surface-primary-color); }
.u-bg-surface-secondary { background-color: var(--bg-surface-secondary-color); }
.u-bg-surface-hover { background-color: var(--bg-surface-hover-color); }
.u-text-primary { color: var(--text-primary-color); }
.u-text-secondary { color: var(--text-secondary-color); }
.u-text-interactive { color: var(--text-interactive-color); }
.u-radius-medium { border-radius: var(--radius-medium-value); }
.u-radius-pill { border-radius: var(--radius-pill-value); }
.u-padding-4 { padding: var(--spacing-4-value); }
.u-padding-5 { padding: var(--spacing-5-value); }
.u-shadow-subtle { box-shadow: var(--shadow-subtle-value); }
.u-shadow-strong { box-shadow: var(--shadow-strong-value); }
.u-hidden-visually {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}