.u-space-xxs { margin-bottom: var(--space-xxs); }
.u-space-xs { margin-bottom: var(--space-xs); }
.u-space-sm { margin-bottom: var(--space-sm); }
.u-space-md { margin-bottom: var(--space-md); }
.u-space-lg { margin-bottom: var(--space-lg); }
.u-space-xl { margin-bottom: var(--space-xl); }
.u-space-xxl { margin-bottom: var(--space-xxl); }

.u-state-success {
  background: var(--color-green-light);
  color: var(--color-green);
  border-color: var(--color-green-alpha);
}

.u-state-error {
  background: var(--color-red-light);
  color: var(--color-red);
  border-color: color-mix(in srgb, var(--color-red) 30%, var(--color-white));
}

.u-state-warning {
  background: var(--color-orange-light);
  color: var(--color-orange);
  border-color: var(--color-orange-alpha);
}

.u-state-info {
  background: var(--color-blue-light);
  color: var(--color-blue);
  border-color: var(--color-blue-alpha);
}

.u-pill {
  border-radius: var(--radius-pill);
}

.u-radius-md {
  border-radius: var(--radius-md);
}

.u-radius-lg {
  border-radius: var(--radius-lg);
}