/*
 * Prism.js syntax highlighting theme built from this theme's own color
 * tokens (variables.css), not an imported/generic Prism theme, so code
 * blocks match the rest of the site in both dark and light mode.
 */

pre[class*="language-"] {
    position: relative;
    margin: var(--space-lg) 0;
    padding: 2.25rem var(--space-lg) var(--space-lg);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.6;
}

pre[class*="language-"]::before {
    content: '';
    position: absolute;
    top: var(--space-sm);
    left: var(--space-lg);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-red);
    box-shadow: 18px 0 0 var(--color-yellow), 36px 0 0 var(--color-green);
}

code[class*="language-"] {
    font-family: var(--font-mono);
    color: var(--color-white);
    text-shadow: none;
}

pre[class*="language-"] code {
    display: block;
}

:not(pre) > code[class*="language-"] {
    padding: 0.15em 0.4em;
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    white-space: normal;
}

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

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

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted,
.token.boolean,
.token.number {
    color: var(--color-blue);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: var(--color-green);
}

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

.token.atrule,
.token.attr-value,
.token.keyword {
    color: var(--color-blue-dim);
}

.token.function,
.token.class-name {
    color: var(--color-yellow);
}

.token.regex,
.token.important,
.token.variable {
    color: var(--color-yellow);
}

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

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