/* syntax.css — Light code theme */

.code-block {
    background-color: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.code-block pre {
    margin: 0; padding: 0;
    background: transparent; border: none;
}

.code-block code {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--ink);
    background: transparent;
    border: none; padding: 0;
}

.code-inline {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 0.125em 0.25em;
    background-color: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    color: var(--ink);
}

/* Token palette */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--muted);
    font-style: italic;
}

.token.punctuation,
.token.operator,
.token.entity {
    color: var(--ink);
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #b91c1c;
}

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

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

.token.function,
.token.class-name,
.token.regex,
.token.important,
.token.variable {
    color: #7c3aed;
}

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

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

.token.entity {
    cursor: help;
}