/*
 * Prism syntax highlighting theme for staltz.com.
 * Mostly grayscale; keywords carry the theme accent (cobalt in light, teal in dark).
 */

:root {
  --code-bg: var(--surface-sunken);
  --code-fg: var(--slate-700);
  --code-comment: var(--slate-500);
  --code-punct: var(--slate-500);
  --code-dim: var(--slate-600);
  --code-bright: var(--slate-800);
  --code-accent: var(--accent);
}

[data-theme="dark"] {
  --code-bg: #141922;
  --code-fg: var(--slate-300);
  --code-comment: var(--text-muted);
  --code-punct: var(--slate-500);
  --code-dim: var(--slate-400);
  --code-bright: var(--slate-200);
  --code-accent: var(--accent);
}

pre[class*="language-"] {
  color: var(--code-fg);
  background: var(--code-bg);
  text-shadow: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  overflow-x: auto;
  white-space: pre;
  word-wrap: normal;
  tab-size: 2;
  hyphens: none;
  border: 1px solid var(--border-subtle);
}
code[class*="language-"] {
  color: var(--code-fg);
  background: none;
  text-shadow: none;
  font-family: var(--font-mono);
  white-space: pre;
  word-wrap: normal;
  tab-size: 2;
  hyphens: none;
}

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

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

.token.keyword,
.token.atrule,
.token.important,
.token.tag {
  color: var(--code-accent);
  font-weight: 500;
}

.token.boolean,
.token.number,
.token.constant {
  color: var(--code-bright);
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.inserted {
  color: var(--code-dim);
}

.token.function {
  color: var(--code-bright);
}

.token.class-name,
.token.builtin {
  color: var(--code-fg);
  font-weight: 500;
}

.token.attr-name,
.token.property,
.token.symbol,
.token.variable,
.token.parameter {
  color: var(--code-dim);
}

.token.interpolation,
.token.template-string {
  color: var(--code-dim);
}

.token.selector { color: var(--code-dim); }

.token.deleted { color: var(--code-dim); text-decoration: line-through; }

.token.namespace { opacity: 0.75; }