/* ── Syntax Highlight – Summer Sorbet Light ───────────────────────────── */
/* Overrides Prism default to match site colour palette */

.code-block-wrapper {
  position: relative;
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-blue);
  padding: var(--space-2) var(--space-4);
}

.code-lang-label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  font-weight: 600;
  color: var(--color-yellow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.copy-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
  font-size: var(--size-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  font-family: var(--font-sans);
}
.copy-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.copy-btn.copied { background: rgba(106,211,126,0.25); color: #6ed88c; border-color: rgba(106,211,126,0.4); }

/* Prism override */
pre[class*="language-"] {
  margin: 0;
  border-radius: 0;
  background: var(--color-code-bg) !important;
  font-size: var(--size-sm);
  font-family: var(--font-mono);
  line-height: 1.65;
  overflow-x: auto;
  padding: var(--space-5) var(--space-5) !important;
}

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

/* Token colours – Summer Sorbet palette */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata                 { color: #7c8fa0; font-style: italic; }

.token.punctuation           { color: #5a6a7e; }

.token.namespace             { opacity: 0.7; }

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol                { color: #c0392b; }

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin               { color: #27ae60; }

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string         { color: #d35400; }

.token.atrule,
.token.attr-value,
.token.keyword               { color: var(--color-blue-mid); font-weight: 600; }

.token.function,
.token.class-name            { color: var(--color-coral); }

.token.regex,
.token.important,
.token.variable              { color: #8e44ad; }

.token.important,
.token.bold                  { font-weight: bold; }

.token.italic                { font-style: italic; }

/* Mermaid diagram container */
.mermaid-wrapper {
  margin: var(--space-6) 0;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  text-align: center;
}

.mermaid { display: inline-block; }