@layer htmxo {


:root {
    --htmxo-syntax-comment:     #6b6e73;
    --htmxo-syntax-punctuation: currentColor;
    --htmxo-syntax-string:      #467a34;
    --htmxo-syntax-keyword:     #a335a5;
    --htmxo-syntax-function:    #2f6dc7;
    --htmxo-syntax-number:      #9e5e00;
    --htmxo-syntax-class:       #9e5e00;
    --htmxo-syntax-operator:    currentColor;
    --htmxo-syntax-tag:         #c43d3d;
}

html.dark, [data-theme="dark"] {
    --htmxo-syntax-comment:  #8a9ba8;
    --htmxo-syntax-string:   #98c379;
    --htmxo-syntax-keyword:  #c678dd;
    --htmxo-syntax-function: #61afef;
    --htmxo-syntax-number:   #d19a66;
    --htmxo-syntax-class:    #e5c07b;
    --htmxo-syntax-tag:      #e06c75;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --htmxo-syntax-comment:  #8a9ba8;
        --htmxo-syntax-string:   #98c379;
        --htmxo-syntax-keyword:  #c678dd;
        --htmxo-syntax-function: #61afef;
        --htmxo-syntax-number:   #d19a66;
        --htmxo-syntax-class:    #e5c07b;
        --htmxo-syntax-tag:      #e06c75;
    }
}

code[class*="language-"], pre[class*="language-"] { color: inherit; }

.token.comment, .token.prolog, .token.doctype, .token.cdata,
.token.line-comment, .token.block-comment {
    color: var(--htmxo-syntax-comment);
    font-style: italic;
}
.token.punctuation { color: var(--htmxo-syntax-punctuation); }
.token.string, .token.attr-value, .token.char, .token.regex {
    color: var(--htmxo-syntax-string);
}
.token.keyword, .token.atrule, .token.builtin, .token.boolean,
.token.constant, .token.symbol {
    color: var(--htmxo-syntax-keyword);
}
.token.function, .token.method {
    color: var(--htmxo-syntax-function);
}
.token.class-name, .token.namespace {
    color: var(--htmxo-syntax-class);
    font-weight: 600;
}
.token.number, .token.unit {
    color: var(--htmxo-syntax-number);
}
.token.operator, .token.entity, .token.url {
    color: var(--htmxo-syntax-operator);
}
.token.tag, .token.selector, .token.important {
    color: var(--htmxo-syntax-tag);
    font-weight: 600;
}
.token.bold     { font-weight: bold; }
.token.italic   { font-style: italic; }
}