/* ==========================================================================
   westie.blog — syntax highlighting. Loaded on post pages only.
   The colouring happens at build time (Prism, via
   @11ty/eleventy-plugin-syntaxhighlight); this file only gives the
   resulting <span class="token …"> their colours.

   A light, warm theme for the cream code background (--color-code-bg).
   Every colour has a contrast ratio of at least 4.5:1 on that background.
   ========================================================================== */

:root {
  --hl-text: var(--color-text);
  --hl-comment: #6b6558; /* warm grey */
  --hl-keyword: var(--color-accent); /* the site's dark red */
  --hl-string: #4f6b1f; /* olive green */
  --hl-number: #8a4b08; /* amber brown */
  --hl-function: #3f5f82; /* the link blue, a little deeper */
  --hl-type: #6b3f7a; /* muted purple */
  --hl-punct: #5c5c5c;
}

pre[class*="language-"],
code[class*="language-"] {
  color: var(--hl-text);
}

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

.token.keyword,
.token.atrule,
.token.important,
.token.tag,
.token.selector,
.token.deleted {
  color: var(--hl-keyword);
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.inserted,
.token.triple-quoted-string {
  color: var(--hl-string);
}

.token.number,
.token.boolean,
.token.constant,
.token.symbol,
.token.variable {
  color: var(--hl-number);
}

.token.function,
.token.attr-name,
.token.property {
  color: var(--hl-function);
}

.token.class-name,
.token.builtin,
.token.namespace,
.token.decorator {
  color: var(--hl-type);
}

.token.punctuation,
.token.operator,
.token.entity,
.token.url {
  color: var(--hl-punct);
}

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

/* Interpolated code inside f-strings / template strings reads as code */
.token.interpolation {
  color: var(--hl-text);
}