:root {
    --code-block-background-color: #f5f5f5;
    --code-default-color: black;
    --token-attribute-color: rgb(91, 121, 227);
    --token-builtin-color: rgb(102, 159, 89);
    --token-comment-color: rgb(165, 166, 170);
    --token-constant-color: rgb(121, 161, 103);
    --token-function-color: rgb(91, 121, 227);
    --token-keyword-color: rgb(164, 73, 171);
    --token-module-color: rgb(56, 130, 183);
    --token-number-color: rgb(173, 110, 37);
    --token-operator-color: rgb(91, 121, 227);
    --token-property-color: rgb(73, 110, 38);
    --token-special-string-color: rgb(173, 110, 38);
    --token-string-color: rgb(100, 159, 88);
    --token-tag-color: rgb(164, 73, 171);
    --token-builtin-variable-color: rgb(173, 110, 37);
    --line-number-color: rgba(27, 31, 35, 0.3);
}

:root[data-theme="dark"] {
    --code-block-background-color: rgb(40, 44, 51);
    --code-default-color: rgb(172, 178, 190);
    --token-attribute-color: rgb(173, 110, 37);
    --token-builtin-color: rgb(223, 193, 132);
    --token-comment-color: rgb(135, 142, 152);
    --token-constant-color: rgb(115, 173, 233);
    --token-function-color: rgb(115, 173, 233);
    --token-keyword-color: rgb(180, 119, 207);
    --token-module-color: rgb(180, 119, 207);
    --token-number-color: rgb(172, 178, 190);
    --token-operator-color: rgb(105, 169, 180);
    --token-property-color: rgb(105, 169, 180);
    --token-special-string-color: rgb(191, 149, 106);
    --token-string-color: rgb(152, 181, 123);
    --token-tag-color: rgb(115, 173, 233);
    --token-builtin-variable-color: rgb(115, 173, 233);
    --line-number-color: rgba(77, 81, 88);
}

.code-block code {
    font-family:
        Roboto Mono,
        monospace;
    display: grid;
    line-height: 1.5;
    color: var(--code-default-color);
    background-color: var(--code-block-background-color);
}

.line-number {
    user-select: none;
    text-align: right;
    padding: 0 10px;
    color: var(--line-number-color);
}

.token.attribute {
    color: var(--token-attribute-color);
}
.token.builtin {
    color: var(--token-builtin-color);
}
.token.constant {
    color: var(--token-constant-color);
}
.token.comment {
    color: var(--token-comment-color);
}
.token.comment .string {
    color: var(--token-comment-color);
}
.token.function {
    color: var(--token-function-color);
}
.token.keyword {
    color: var(--token-keyword-color);
}
.token.module {
    color: var(--token-module-color);
}
.token.number {
    color: var(--token-number-color);
}
.token.operator {
    color: var(--token-operator-color);
}
.token.property {
    color: var(--token-property-color);
}
.token.string {
    color: var(--token-string-color);
}
.token.string.special {
    color: var(--token-special-string-color);
}
.token.tag {
    color: var(--token-tag-color);
}
.token.variable.builtin {
    color: var(--token-builtin-variable-color);
}