/* ── Syntax highlighting — Vibrant Spring theme ──────────────── */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata         { color: #5a7a65; font-style: italic; }
.token.punctuation   { color: #4a6355; }
.token.namespace     { opacity: .7; }
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted       { color: #2d6a3f; }
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted      { color: #1e7a40; }
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string { color: #2d8a4e; }
.token.atrule,
.token.attr-value,
.token.keyword       { color: #1f6b3a; font-weight: 600; }
.token.function,
.token.class-name    { color: #0d5c30; font-weight: 600; }
.token.regex,
.token.important,
.token.variable      { color: #c6860a; }
.token.important,
.token.bold          { font-weight: bold; }
.token.italic        { font-style: italic; }

/* Code block wrapper */
.code-block-wrapper {
  position: relative;
  margin: 1.5rem 0;
}

pre[class*="language-"] {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .875rem;
  line-height: 1.65;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}

code[class*="language-"] {
  font-family: var(--font-mono);
  font-size: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text);
}

/* Language label */
pre[class*="language-"]::before {
  content: attr(data-language);
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-muted);
  margin-bottom: .75rem;
  font-family: var(--font-sans);
}

/* Copy button */
.copy-btn {
  position: absolute;
  top: .6rem;
  right: .6rem;
  padding: .3rem .7rem;
  font-size: .75rem;
  font-family: var(--font-sans);
  font-weight: 500;
  background: var(--color-accent);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  line-height: 1;
  opacity: 0;
  z-index: 10;
}
.code-block-wrapper:hover .copy-btn,
.copy-btn:focus { opacity: 1; }
.copy-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}
.copy-btn.copied {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  opacity: 1;
}