/* docs.css — the in-product spec set (033). Token-only (no hard-coded colors, fonts,
   or spacing): the rendered markdown arrives as bare tags inside .doc-body, so these
   rules map doc structure onto the design system. */

.doc-body {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  max-width: var(--container-md);
}

.doc-body h1,
.doc-body h2,
.doc-body h3,
.doc-body h4,
.doc-body h5,
.doc-body h6 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  margin-top: var(--gap-lg);
  margin-bottom: var(--gap-sm);
}

.doc-body h1 {
  font-size: var(--text-2xl);
  margin-top: 0;
}

.doc-body h2 {
  font-size: var(--text-xl);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--gap-xs);
}

.doc-body h3 {
  font-size: var(--text-lg);
}

.doc-body h4 {
  font-size: var(--text-base);
}

.doc-body p,
.doc-body ul,
.doc-body ol {
  margin-bottom: var(--gap-md);
}

.doc-body ul,
.doc-body ol {
  padding-left: var(--gap-xl);
}

.doc-body li {
  margin-bottom: var(--gap-xs);
}

.doc-body a {
  color: var(--text-link);
}

.doc-body a:hover {
  color: var(--text-link-hover);
}

.doc-body code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--surface-inset);
  border-radius: var(--radius-sm);
  padding: 0 var(--gap-xs);
}

.doc-body pre {
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--gap-md);
  overflow-x: auto;
  margin-bottom: var(--gap-md);
}

.doc-body pre code {
  background: none;
  padding: 0;
}

.doc-body table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: var(--gap-md);
  font-size: var(--text-xs);
}

.doc-body th,
.doc-body td {
  border: 1px solid var(--border-subtle);
  padding: var(--gap-xs) var(--gap-sm);
  text-align: left;
  vertical-align: top;
}

.doc-body th {
  background: var(--surface-raised);
  font-weight: var(--weight-semibold);
}

.doc-body blockquote {
  border-left: 3px solid var(--border-default);
  margin: 0 0 var(--gap-md) 0;
  padding-left: var(--gap-md);
  color: var(--text-secondary);
}

.doc-body hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--gap-lg) 0;
}