/* ── Prism Syntax Highlighting – Summer Sorbet Light ────────────────────── */

code[class*="language-"],
pre[class*="language-"] {
  color: #1B3A5C;
  background: #F8F4EF;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.7;
  tab-size: 2;
  hyphens: none;
}

/* Scrollbar */
pre[class*="language-"]::-webkit-scrollbar { height: 6px; }
pre[class*="language-"]::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); }
pre[class*="language-"]::-webkit-scrollbar-thumb { background: #C8BEAF; border-radius: 3px; }
pre[class*="language-"]::-webkit-scrollbar-thumb:hover { background: var(--color-coral); }

/* ── Token colours (light background) ───────────────────────────────────── */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata           { color: #7A90A4; font-style: italic; }

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

.token.namespace       { opacity: 0.75; }

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted         { color: #B83228; } /* dark coral */

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted        { color: #7C5000; } /* dark amber */

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string   { color: #1B6B5A; } /* teal-green */

.token.atrule,
.token.attr-value,
.token.keyword         { color: #B83228; font-weight: 600; } /* dark coral, bold */

.token.function,
.token.class-name      { color: #1B5CA0; } /* medium blue */

.token.regex,
.token.important,
.token.variable        { color: #8B4B00; } /* dark amber-brown */

.token.important,
.token.bold            { font-weight: bold; }
.token.italic          { font-style: italic; }
.token.entity          { cursor: help; }

/* ── Code block wrapper: header-bar design ───────────────────────────────── */
.code-block-wrapper {
  display: flex;
  flex-direction: column;
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
  border: 1px solid #DDD6CC;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #EDE8E1;
  border-bottom: 1px solid #DDD6CC;
  padding: 6px var(--space-4);
  gap: var(--space-4);
  min-height: 34px;
}

.code-lang-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #6B5D4F;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
}

.copy-btn {
  background: transparent;
  border: 1px solid #C8BEAF;
  color: #6B5D4F;
  font-size: var(--font-size-xs);
  font-family: var(--font-sans);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.copy-btn:hover { background: #DDD6CC; border-color: #B8AEA0; color: #3A2E24; }
.copy-btn.copied { background: var(--color-coral); border-color: var(--color-coral); color: #fff; }

/* Pre inside wrapper: no independent rounding, no border (wrapper owns both) */
.code-block-wrapper pre[class*="language-"] {
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--space-5) var(--space-6) !important;
  background: #F8F4EF !important;
  overflow-x: auto;
}

/* Standalone pre (not yet wrapped by JS) */
pre[class*="language-"]:not(.code-block-wrapper pre) {
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
  border: 1px solid #DDD6CC;
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6);
  background: #F8F4EF;
  overflow-x: auto;
}