/* Swatch 4.0 documentation helpers. No color values live here. */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-sm);
}

.swatch-card {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}

.swatch-chip {
  min-height: 5rem;
  border: solid var(--bs-sm) var(--border);
  border-radius: var(--radius-lg);
}

.swatch-chip-sm {
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
  border: solid var(--bs-sm) var(--border);
  border-radius: var(--radius-md);
}

.swatch-row {
  display: grid;
  grid-template-columns: 3rem minmax(8rem, 1fr) minmax(10rem, 1fr) minmax(8rem, 1fr);
  gap: var(--space-sm);
  align-items: center;
}

.swatch-scale-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(5rem, 1fr));
  gap: var(--space-xs);
}

.swatch-scale-item {
  display: grid;
  gap: var(--space-xxs);
}

.swatch-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.swatch-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-sm);
}

.swatch-role-table td:first-child,
.swatch-role-table th:first-child {
  width: 14rem;
}