/* Rouge syntax highlighting — theme aware, WCAG AA on both grounds. */

:root {
    --hl-bg:      #F2EFE9;
    --hl-text:    #24292F;
    --hl-comment: #5B6470;
    --hl-keyword: #8B2F8B;
    --hl-string:  #0A6640;
    --hl-number:  #9A4A06;
    --hl-func:    #1F4FA8;
    --hl-type:    #7A4100;
    --hl-var:     #B03030;
    --hl-punct:   #45505C;
    --hl-ins-bg:  #DDF4E4;
    --hl-del-bg:  #FBE1E1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hl-bg:      #0F151C;
        --hl-text:    #D7DEE7;
        --hl-comment: #8C9AA8;
        --hl-keyword: #E6A2E6;
        --hl-string:  #85D6A6;
        --hl-number:  #FFC247;
        --hl-func:    #8FC6FF;
        --hl-type:    #FFCE8A;
        --hl-var:     #FF9E9E;
        --hl-punct:   #A9B5C2;
        --hl-ins-bg:  #16351F;
        --hl-del-bg:  #3A1B1B;
    }
}

/* The <pre> is the painted surface; the wrapping divs stay transparent. */
pre {
    background: var(--hl-bg);
    color: var(--hl-text);
}

div.highlight { background: none; }

.highlight .hll { background: color-mix(in srgb, var(--hl-number) 18%, transparent); }

/* Comments */
.highlight :is(.c, .ch, .cd, .cm, .cp, .cpf, .c1, .cs) { color: var(--hl-comment); font-style: italic; }

/* Keywords */
.highlight :is(.k, .kc, .kd, .kn, .kp, .kr, .kt, .kv) { color: var(--hl-keyword); }
.highlight .kt { color: var(--hl-type); }

/* Names */
.highlight :is(.n, .nl, .py, .bp) { color: var(--hl-text); }
.highlight :is(.na, .nb, .nc, .no, .nn, .nt) { color: var(--hl-type); }
.highlight :is(.nf, .fm) { color: var(--hl-func); }
.highlight :is(.nv, .vc, .vg, .vi, .nx, .ni) { color: var(--hl-text); }
.highlight :is(.nd, .ne) { color: var(--hl-var); }

/* Literals */
.highlight :is(.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss) { color: var(--hl-string); }
.highlight :is(.m, .mb, .mf, .mh, .mi, .il, .mo, .mx) { color: var(--hl-number); }
.highlight .l { color: var(--hl-number); }

/* Operators & punctuation */
.highlight :is(.o, .ow) { color: var(--hl-var); }
.highlight :is(.p, .pi) { color: var(--hl-punct); }

/* Diff / generic */
.highlight .gd { background: var(--hl-del-bg); color: var(--hl-text); }
.highlight .gi { background: var(--hl-ins-bg); color: var(--hl-text); }
.highlight .gh { color: var(--hl-func); font-weight: 700; }
.highlight .gu { color: var(--hl-keyword); font-weight: 700; }
.highlight .ge { font-style: italic; }
.highlight .gs { font-weight: 700; }
.highlight .gl { text-decoration: underline; }
.highlight :is(.gr, .gt) { color: var(--hl-var); }
.highlight .gp { color: var(--hl-comment); }

/* Errors — never colour-only */
.highlight .err {
    color: var(--hl-var);
    text-decoration: underline wavy;
    text-underline-offset: 0.2em;
}

/* Line numbers */
.highlight :is(.lineno, .gl) {
    color: var(--hl-comment);
    user-select: none;
    -webkit-user-select: none;
    padding-right: 1em;
}

@media (forced-colors: active) {
    .highlight, .highlight * { color: CanvasText; background: Canvas; }
}