.sa-button {
  display: inline-flex;
  min-height: var(--sa-touch-target);
  align-items: center;
  justify-content: center;
  gap: var(--sa-space-2);
  border: 1px solid var(--sa-color-accent-strong);
  border-radius: var(--sa-radius-sm);
  padding: 0 var(--sa-space-5);
  background: var(--sa-color-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.sa-card,
.sa-shell {
  border: 1px solid var(--sa-color-line);
  border-radius: var(--sa-radius-md);
  background: var(--sa-color-surface);
  box-shadow: var(--sa-shadow-soft);
}

.sa-card {
  padding: var(--sa-space-5);
}

.sa-shell-note {
  border: 1px dashed var(--sa-color-line);
  border-radius: var(--sa-radius-sm);
  padding: var(--sa-space-4);
  color: var(--sa-color-muted);
  background: var(--sa-color-soft);
}

.sa-breadcrumb {
  color: var(--sa-color-muted);
  font-size: 0.875rem;
}
.sa-button--secondary {
  border-color: var(--sa-color-line);
  background: var(--sa-color-surface);
  color: var(--sa-color-ink);
}

.sa-button:focus-visible {
  outline: var(--sa-focus-ring);
  outline-offset: 3px;
}