:root {
    --syntax-alert: #c2410c;
    --syntax-annotation: #0f766e;
    --syntax-attribute: #2563eb;
    --syntax-number: #7c3aed;
    --syntax-control: #4d7c0f;
    --syntax-char: #0f766e;
    --syntax-constant: #9f1239;
    --syntax-comment: #7b8794;
    --syntax-doc: #b45309;
    --syntax-type-bg: #efe7ff;
    --syntax-error: #dc2626;
    --syntax-function: #0f4c81;
    --syntax-import: #0d9488;
    --syntax-preprocessor: #92400e;
    --syntax-special: #0369a1;
    --syntax-string: #15803d;
    --syntax-variable: #1d4ed8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --syntax-alert: #fdba74;
        --syntax-annotation: #99f6e4;
        --syntax-attribute: #93c5fd;
        --syntax-number: #d8b4fe;
        --syntax-control: #bef264;
        --syntax-char: #86efac;
        --syntax-constant: #fda4af;
        --syntax-comment: #94a3b8;
        --syntax-doc: #fcd34d;
        --syntax-type-bg: rgba(216, 180, 254, 0.16);
        --syntax-error: #f87171;
        --syntax-function: #bfdbfe;
        --syntax-import: #5eead4;
        --syntax-preprocessor: #fdba74;
        --syntax-special: #7dd3fc;
        --syntax-string: #86efac;
        --syntax-variable: #c4b5fd;
    }
}

code.sourceCode {
    background: inherit;
}

pre > code.sourceCode > span > a:first-child::before {
    text-decoration: underline;
}

code span.al { color: var(--syntax-alert); font-weight: 700; }
code span.an { color: var(--syntax-annotation); font-weight: 700; font-style: italic; }
code span.at { color: var(--syntax-attribute); }
code span.bn { color: var(--syntax-number); }
code span.bu { color: var(--syntax-function); }
code span.cf { color: var(--syntax-control); font-weight: 700; }
code span.ch { color: var(--syntax-char); }
code span.cn { color: var(--syntax-constant); }
code span.co { color: var(--syntax-comment); font-style: italic; }
code span.cv { color: var(--syntax-annotation); font-weight: 700; font-style: italic; }
code span.do { color: var(--syntax-doc); font-style: italic; }
code span.dt { background-color: var(--syntax-type-bg); }
code span.dv { color: var(--syntax-number); }
code span.er { color: var(--syntax-error); font-weight: 700; }
code span.ex { color: var(--syntax-function); }
code span.fl { color: var(--syntax-number); }
code span.fu { color: var(--syntax-function); }
code span.im { color: var(--syntax-import); }
code span.in { color: var(--syntax-annotation); font-weight: 700; font-style: italic; }
code span.kw { color: var(--syntax-control); font-weight: 700; }
code span.op { color: var(--syntax-function); font-weight: 700; }
code span.ot { color: var(--syntax-special); font-weight: 700; }
code span.pp { color: var(--syntax-preprocessor); }
code span.sc { color: var(--syntax-special); }
code span.ss { color: var(--syntax-number); }
code span.st { color: var(--syntax-string); }
code span.va { color: var(--syntax-variable); }
code span.vs { color: var(--syntax-special); }
code span.wa { color: var(--syntax-annotation); font-weight: 700; font-style: italic; }