/* Code examples follow the surrounding document palette in both themes. */
body[data-public-page="docs"] {
  --docs-code-bg: var(--surface);
  --docs-code-header-bg: var(--surface-2);
  --docs-code-text: var(--text);
  --docs-code-muted: var(--text-2);
  --docs-code-keyword: #f5c46c;
  --docs-code-string: #a6d5a5;
  --docs-code-number: #a3dbe0;
  --docs-code-function: #b2cbf6;
  --docs-code-property: #f5b5aa;
}

:root[data-theme="light"] body[data-public-page="docs"] {
  --docs-code-keyword: #82500d;
  --docs-code-string: #31613b;
  --docs-code-number: #1b6570;
  --docs-code-function: #315d94;
  --docs-code-property: #9a4130;
}

body[data-public-page="docs"] .code-block {
  color: var(--docs-code-text);
  background: var(--docs-code-bg);
  border-color: var(--line);
  box-shadow: none;
}

body[data-public-page="docs"] .code-header {
  min-height: 52px;
  gap: 12px;
  color: var(--docs-code-muted);
  background: var(--docs-code-header-bg);
  border-color: var(--line);
}

body[data-public-page="docs"] .code-lang {
  color: var(--docs-code-muted);
}

body[data-public-page="docs"] .code-block pre {
  color: var(--docs-code-text);
  background: transparent;
}

/* Inline-code styling from .step must not paint each line in a block. */
body[data-public-page="docs"] .code-block pre code {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
}

body[data-public-page="docs"] .code-block .kw { color: var(--docs-code-keyword); }
body[data-public-page="docs"] .code-block .str { color: var(--docs-code-string); }
body[data-public-page="docs"] .code-block .num { color: var(--docs-code-number); }
body[data-public-page="docs"] .code-block .cm { color: var(--docs-code-muted); }
body[data-public-page="docs"] .code-block .fn { color: var(--docs-code-function); }
body[data-public-page="docs"] .code-block .prop { color: var(--docs-code-property); }
body[data-public-page="docs"] .code-block .op,
body[data-public-page="docs"] .code-block .var { color: var(--docs-code-text); }

body[data-public-page="docs"] .copy-btn {
  min-width: 60px;
  height: 44px;
  color: var(--docs-code-text);
  background: var(--surface);
  border-color: var(--line);
}

body[data-public-page="docs"] .copy-btn:hover,
body[data-public-page="docs"] .copy-btn.copied {
  color: var(--docs-code-text);
  background: var(--surface-hover);
  border-color: var(--accent);
}

body[data-public-page="docs"] .copy-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}