/* ============================================================
   SYNTAX HIGHLIGHTING — Colorful Daybreak light theme
   Uses Prism.js class names from eleventy-plugin-syntaxhighlight
   ============================================================ */

/* ── Code block wrapper ── */
.code-block-wrapper {
  position: relative;
  margin: var(--space-6) 0;
}

pre[class*="language-"] {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  background: #FDFCFF;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.7;
  tab-size: 2;
  -webkit-overflow-scrolling: touch;
}

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


/* ── Token colours ── */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #7E7DA0;
  font-style: italic;
}

.token.punctuation { color: #6D28D9; }

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

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

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

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #7C3AED;
  font-weight: var(--font-weight-medium);
}

.token.function,
.token.class-name {
  color: #0369A1;
}

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

.token.important,
.token.bold { font-weight: var(--font-weight-bold); }
.token.italic { font-style: italic; }

/* ── Mermaid diagrams ── */
pre.mermaid {
  background: var(--color-primary-50);
  border: 1px solid var(--color-code-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  overflow: visible;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
}