/* The admin styles page (/admin/styles): samples of each token, which the view sets as --sample */
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); }
.ds-swatch { display: grid; gap: var(--s1); font-size: var(--text-xs); }
.ds-swatch::before { content: ""; height: 48px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--sample); }
.ds-swatch--shadow::before { background: var(--surface-2); box-shadow: var(--sample); }
.ds-type { margin: 0; font-size: var(--sample); line-height: 1.2; overflow-wrap: anywhere; }
.ds-space { height: var(--s3); width: var(--sample); background: var(--brand); border-radius: 2px; }
.ds-radius { width: 48px; height: 48px; border: 1px solid var(--line-2); background: var(--surface-3); border-radius: var(--sample); }