/* Syntax highlighting colors */
:root {
    --syn-text: #2a4a52;
    --syn-bg: #f4f6f8;
    --syn-comment: #6e8090;
    --syn-punctuation: #5a6a72;
    --syn-keyword: #7b5ea7;
    --syn-string: #4a8f3f;
    --syn-number: #2b6cb0;
    --syn-function: #c44d3b;
    --syn-operator: #9e6a2f;
    --syn-variable: #e09f3e;
}

@media (prefers-color-scheme: dark) {
    :root {
        --syn-text: #c8d6dc;
        --syn-bg: #1a2a30;
        --syn-comment: #7e9aaa;
        --syn-punctuation: #9aabb5;
        --syn-keyword: #b0a0d6;
        --syn-string: #8cc88a;
        --syn-number: #72b4e0;
        --syn-function: #e8887c;
        --syn-operator: #dbb478;
        --syn-variable: #ebc078;
    }
}

/* Token styles */
code[class*="language-"],
pre[class*="language-"] {
    color: var(--syn-text);
    background: var(--syn-bg);
    font-size: 0.9em;
}

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

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

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

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

.token.operator,
.token.entity,
.token.url { color: var(--syn-operator); }

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

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

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