refactor: Define primitive and semantic spacing variables

[lokesh]

Task from #11555

Creates a set of spacing variables that provide a single point of control for updating spacing across the app.

In this PR we utilize the new variables in two of our web components: ol-pagination and ol-read-more.

No visual change in these cases.

Testing

<ol-pagination> and <ol-read-more> web components should render similarly. There is the possibility of small spacing changes as we align values to our new system, but this should not cause anything to appear broken. https://testing.openlibrary.org/developers/design

Screenshot

Stakeholders

[RayBB]

Tested and all looks good to me

In OlPagination.js, the padding changed from 0.2em 0.6em to var(--spacing-inset-xs) var(--spacing-inset-sm):

• Old: ~2.8px 8.4px (em-based, depends on font-size)
• New: 4px 8px (fixed pixels)

Though, this is small and probably intentional.

Perhaps it's worth looking into if there's a tool that can automatically migrate some of the things like this in a pre-commit hook so that when someone sets it to be four pixels it actually sets it to the correct variable but that would be more work and a separate issue.