/*
 * Prism.js token theme — matches single.html hand-coded span colors exactly.
 *
 * Source color map:
 *   text-slate-500  #64748b  → comments
 *   text-slate-300  #cbd5e1  → default code, operators, punctuation
 *   text-purple-400 #c084fc  → keywords (const, function, return, class, import…)
 *   text-amber-300  #fcd34d  → variables, parameters, constants, property names
 *   text-green-300  #86efac  → strings, template literals, regex
 *   text-sky-300    #7dd3fc  → function calls, method names
 *   text-red-300    #fca5a5  → numbers (extension of the palette)
 */

code[class*="language-"],
pre[class*="language-"] {
  color: #cbd5e1;           /* slate-300 — default */
  background: #020617;      /* slate-950 */
  font-family: "Fira Code", monospace;
  font-size: 0.875rem;
  line-height: 1.75;
  text-shadow: none;
  tab-size: 2;
  hyphens: none;
  white-space: pre;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
}

/* ── Token colors ── */

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #64748b; /* slate-500 */
}

.token.punctuation {
  color: #cbd5e1; /* slate-300 */
}

.token.keyword,
.token.control,
.token.directive,
.token.unit,
.token.statement,
.token.atrule,
.token.important,
.token.rule {
  color: #c084fc; /* purple-400 */
}

.token.string,
.token.attr-value,
.token.template-string,
.token.regex,
.token.char {
  color: #86efac; /* green-300 */
}

.token.function,
.token.method,
.token.function-variable {
  color: #7dd3fc; /* sky-300 */
}

.token.number,
.token.boolean,
.token.hexcode {
  color: #fca5a5; /* red-300 */
}

.token.variable,
.token.constant,
.token.parameter,
.token.attr-name,
.token.property:not(.token.keyword) {
  color: #fcd34d; /* amber-300 */
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #cbd5e1; /* slate-300 */
}

.token.tag,
.token.selector {
  color: #7dd3fc; /* sky-300 */
}

.token.class-name,
.token.maybe-class-name {
  color: #fcd34d; /* amber-300 */
}

.token.namespace {
  opacity: 0.7;
}

.token.deleted {
  color: #fca5a5;
}

.token.inserted {
  color: #86efac;
}

/* ── No extra Prism box-model on our pre (we control that in the shortcode) ── */
pre[class*="language-"] {
  overflow-x: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}