/* Documentation-only palette swatches. The colors themselves are Artist tokens. */
.palette-row { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; }
.palette-swatch { min-height: 80px; display: grid; place-items: center; border-radius: 8px; }
.palette-swatch span { background: white; color: #202a35; padding: 2px 8px; border-radius: 4px; font-size: 13px; }

.palette-primary .shade-100 { background: var(--primary-100); }

.palette-primary .shade-300 { background: var(--primary-300); }

.palette-primary .shade-500 { background: var(--primary-500); }

.palette-primary .shade-700 { background: var(--primary-700); }

.palette-primary .shade-900 { background: var(--primary-900); }

.palette-link .shade-100 { background: var(--link-100); }

.palette-link .shade-300 { background: var(--link-300); }

.palette-link .shade-500 { background: var(--link-500); }

.palette-link .shade-700 { background: var(--link-700); }

.palette-link .shade-900 { background: var(--link-900); }

.palette-info .shade-100 { background: var(--info-100); }

.palette-info .shade-300 { background: var(--info-300); }

.palette-info .shade-500 { background: var(--info-500); }

.palette-info .shade-700 { background: var(--info-700); }

.palette-info .shade-900 { background: var(--info-900); }

.palette-success .shade-100 { background: var(--success-100); }

.palette-success .shade-300 { background: var(--success-300); }

.palette-success .shade-500 { background: var(--success-500); }

.palette-success .shade-700 { background: var(--success-700); }

.palette-success .shade-900 { background: var(--success-900); }

.palette-warning .shade-100 { background: var(--warning-100); }

.palette-warning .shade-300 { background: var(--warning-300); }

.palette-warning .shade-500 { background: var(--warning-500); }

.palette-warning .shade-700 { background: var(--warning-700); }

.palette-warning .shade-900 { background: var(--warning-900); }

.palette-danger .shade-100 { background: var(--danger-100); }

.palette-danger .shade-300 { background: var(--danger-300); }

.palette-danger .shade-500 { background: var(--danger-500); }

.palette-danger .shade-700 { background: var(--danger-700); }

.palette-danger .shade-900 { background: var(--danger-900); }

.palette-text .shade-100 { background: var(--text-100); }

.palette-text .shade-300 { background: var(--text-300); }

.palette-text .shade-500 { background: var(--text-500); }

.palette-text .shade-700 { background: var(--text-700); }

.palette-text .shade-900 { background: var(--text-900); }