/* ============================================================
   Prism theme: ink on paper.

   Replaces the synthwave theme, which fought the Sketchbook palette.
   Colours are the design system's pastels darkened only by sitting on
   paper. Structure carries the meaning; hue is secondary, so this stays
   legible if you print it.
   ============================================================ */

code[class*="language-"],
pre[class*="language-"] {
  color: var(--ink);
  font-family: var(--mono);
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.6;
  tab-size: 2;
  hyphens: none;
}

pre[class*="language-"]::selection,
code[class*="language-"]::selection {
  background: var(--lemon);
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--ink-faint);
  font-style: italic;
}

.token.punctuation {
  color: var(--ink-soft);
}

.token.namespace {
  opacity: 0.7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #9c5566;
}

.token.boolean,
.token.number {
  color: #8a5a2b;
}

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

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

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: #5b4a86;
}

.token.keyword {
  color: #9c5566;
  font-weight: 600;
}

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

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

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

.token.entity {
  cursor: help;
}

/* Markdown blocks get a little extra structure, matching main.js. */
.token.title,
.token.title .token.punctuation {
  color: var(--ink);
  font-weight: 700;
}

.token.blockquote-marker {
  color: var(--ink-faint);
}

.token.blockquote-text,
.token.in-blockquote {
  color: var(--ink-soft);
  font-style: italic;
}

/* Line highlighting from the Eleventy syntax-highlight plugin. */
.highlight-line-active {
  background: rgba(240, 228, 155, 0.4);
}