body {
  font-family: var(--font-family);
  background-color: var(--background);
  color: var(--text);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--spacing);
  background: var(--surface);
  color: var(--text);
}

.skip-link:focus {
  left: 0;
}

.site-header {
  border-bottom: 1px solid var(--border);
  background-color: var(--surface);
}

.site-footer {
  border-top: 1px solid var(--border);
  background-color: var(--surface);
  margin-top: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 2) 0;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--spacing);
}