/* ----------------------------------------------------------------
   prism-pasteriser.css
   A Prism.js theme keyed to the house design tokens (tokens.css).
   Follows light/dark with the rest of the system via
   [data-theme="dark"] on <html> - the house tokens flip on their
   own, so there is no separate dark palette here.
   Owns: token colors. Does not own: tokenization (Prism), grammars.
   ---------------------------------------------------------------- */

/* Code blocks + inline code ------------------------------------- */
code[class*="language-"],
pre[class*="language-"] {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.55;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  tab-size: 2;
  hyphens: none;
  color: var(--color-ink);
  background: transparent;
}

pre[class*="language-"] {
  margin: 0;
  padding: 0.875rem 1rem;
  overflow: auto;
  background: var(--color-bg-cream-strong);
  border-radius: 0;
  border: 1px solid var(--color-hairline);
}

:not(pre) > code[class*="language-"] {
  padding: 0.0625rem 0.3125rem;
  border-radius: 0;
  background: var(--color-bg-cream-strong);
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  white-space: normal;
}

/* Selection */
pre[class*="language-"] ::selection,
pre[class*="language-"]::selection,
code[class*="language-"] ::selection,
code[class*="language-"]::selection {
  background: color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* ----------------------------------------------------------------
   Token palette - house token families only:
   - comment / punctuation     -> ink-muted / ink-mixed
   - tag / attr / constant     -> accent (slate)
   - string / char / regex     -> state-ok (green)
   - number / boolean          -> state-warn (amber)
   - keyword / function / class -> accent-red (rust)
   - operator / url / variable -> ink
   House tokens flip with data-theme, so one palette serves both.
---------------------------------------------------------------- */
.token.comment,
.token.prolog,
.token.cdata,
.token.doctype {
  color: var(--color-ink-muted);
  font-style: italic;
}

.token.punctuation { color: color-mix(in srgb, var(--color-ink) 55%, transparent); }

.token.namespace { opacity: 0.7; }

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.selector,
.token.attr-name { color: var(--color-accent); }

.token.boolean,
.token.number { color: var(--color-state-warn); font-variant-numeric: tabular-nums; }

.token.string,
.token.char,
.token.builtin,
.token.regex { color: var(--color-state-ok); }

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable { color: var(--color-ink); }

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name,
.token.keyword { color: var(--color-accent-red); }

.token.keyword { font-weight: 500; }

.token.important { color: var(--color-accent-red); }

.token.important,
.token.bold { font-weight: 600; }
.token.italic { font-style: italic; }
.token.entity { cursor: help; }

/* Diff hints */
.token.inserted { color: var(--color-state-ok); background: color-mix(in srgb, var(--color-state-ok) 12%, transparent); }
.token.deleted  { color: var(--color-accent-red); background: color-mix(in srgb, var(--color-accent-red) 12%, transparent); }

/* Line numbers (Prism's line-numbers plugin) --------------------- */
pre[class*="language-"].line-numbers { padding-left: 3.5rem; position: relative; counter-reset: linenumber; }
pre[class*="language-"].line-numbers > code { position: relative; white-space: inherit; }
.line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 1rem; left: 0;
  width: 2.75rem;
  letter-spacing: -1px;
  border-right: 1px solid var(--color-hairline);
  user-select: none;
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--color-ink) 35%, transparent);
}
.line-numbers-rows > span { display: block; counter-increment: linenumber; }
.line-numbers-rows > span::before { content: counter(linenumber); display: block; padding-right: 0.75rem; text-align: right; }

/* Line highlight (Prism's line-highlight plugin) ----------------- */
.line-highlight {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border-left: 2px solid var(--color-accent);
  margin-top: 0;
}