/*
 * highlight.js token → theme palette mapping.
 *
 * Replaces the generic atom-one-dark stylesheet so syntax colours match
 * the rest of the design (violet keywords · lime strings · ink-3 comments ·
 * danger-hi numbers · lime-hi function names). Background is not set here —
 * .code-block in pages.css already paints the slab.
 *
 * Selectors target hljs's own class names (`.hljs-*`) AND the legacy `.kw`
 * / `.str` / `.com` / `.fn` token classes already used in pages.css, so any
 * server-rendered or hand-written code block keeps working too.
 */

.code-block .hljs,
.code-block pre code {
    background: transparent;
    color: var(--ink-1);
}

/* ── Comments + meta + docstring tags ─────────────────────────────── */
.code-block .hljs-comment,
.code-block .hljs-quote,
.code-block .hljs-meta,
.code-block .hljs-meta .hljs-keyword,
.code-block .hljs-doctag {
    color: var(--ink-3);
    font-style: italic;
}

/* ── Keywords / language constructs (violet) ──────────────────────── */
.code-block .hljs-keyword,
.code-block .hljs-selector-tag,
.code-block .hljs-built_in,
.code-block .hljs-type,
.code-block .hljs-name,
.code-block .hljs-tag,
.code-block .hljs-template-tag,
.code-block .hljs-section,
.code-block .hljs-bullet {
    color: var(--violet-hi);
    font-weight: 500;
}

/* ── Strings + regex + attribute values (lime) ────────────────────── */
.code-block .hljs-string,
.code-block .hljs-regexp,
.code-block .hljs-attr,
.code-block .hljs-template-variable,
.code-block .hljs-link,
.code-block .hljs-symbol {
    color: var(--lime);
}

/* ── Numbers + literals + booleans (danger-hi pink) ──────────────── */
.code-block .hljs-number,
.code-block .hljs-literal,
.code-block .hljs-params {
    color: var(--danger-hi);
}

/* ── Function / class titles (lime-hi) ────────────────────────────── */
.code-block .hljs-title,
.code-block .hljs-title.function_,
.code-block .hljs-title.class_,
.code-block .hljs-function .hljs-title,
.code-block .hljs-class .hljs-title {
    color: var(--lime-hi);
    font-weight: 500;
}

/* ── Identifiers / variables / properties ─────────────────────────── */
.code-block .hljs-variable,
.code-block .hljs-property,
.code-block .hljs-attribute,
.code-block .hljs-selector-attr,
.code-block .hljs-selector-pseudo,
.code-block .hljs-selector-class,
.code-block .hljs-selector-id {
    color: var(--ink-0);
}

/* ── Punctuation ──────────────────────────────────────────────────── */
.code-block .hljs-punctuation,
.code-block .hljs-operator {
    color: var(--ink-2);
}

/* ── Diff / addition / deletion ───────────────────────────────────── */
.code-block .hljs-deletion {
    color: var(--danger);
    background: color-mix(in oklab, var(--danger) 12%, transparent);
}
.code-block .hljs-addition {
    color: var(--lime);
    background: color-mix(in oklab, var(--lime) 10%, transparent);
}

/* ── Emphasis flavours ────────────────────────────────────────────── */
.code-block .hljs-emphasis {
    font-style: italic;
}
.code-block .hljs-strong {
    font-weight: 700;
}

/* ── Inline <code> (outside .code-block, in body prose) ───────────── */
.article :not(pre) > code,
.gh-content :not(pre) > code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    color: var(--lime);
    background: color-mix(in oklab, var(--violet) 12%, transparent);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-s);
    border: 1px solid color-mix(in oklab, var(--violet) 22%, transparent);
}