chell

I have yet to find anything that syntax-highlights the custom property names correctly¹. Codehost does better than average, at least.

@import "./normalize.css";

/* FONTS (Modern Font Stacks, https://modernfontstacks.com/) */
:root {
    --font\\system-ui: system-ui, sans-serif;
    --font\\transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
        serif;
    --font\\old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
        P052, serif;
    --font\\humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
        source-sans-pro, sans-serif;
    --font\\geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic",
        source-sans-pro, sans-serif;
    --font\\classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
        sans-serif;
    --font\\neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova",
        "Nimbus Sans", Arial, sans-serif;
    --font\\monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace;
    --font\\monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro",
        Menlo, Consolas, "DejaVu Sans Mono", monospace;
    --font\\industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
        "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
    --font\\rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
        Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri,
        source-sans-pro, sans-serif;
    --font\\slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif",
        "Sitka Small", serif;
    --font\\antique: Superclarendon, "Bookman Old Style", "URW Bookman",
        "URW Bookman L", "Georgia Pro", Georgia, serif;
    --font\\didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L",
        P052, Sylfaen, serif;
    --font\\handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic,
        casual, cursive;
}

/* COLORS (Solarized, https://ethanschoonover.com/solarized/) */
:root {
    --color\\base03: lab(15 -12 -12);
    --color\\base02: lab(20 -12 -12);
    --color\\base01: lab(45 -07 -07);
    --color\\base00: lab(50 -07 -07);
    --color\\base0: lab(60 -06 -03);
    --color\\base1: lab(65 -05 -02);
    --color\\base2: lab(92 -00 10);
    --color\\base3: lab(97 00 10);
    --color\\yellow: lab(60 10 65);
    --color\\orange: lab(50 50 55);
    --color\\red: lab(50 65 45);
    --color\\magenta: lab(50 65 -05);
    --color\\violet: lab(50 15 -45);
    --color\\blue: lab(55 -10 -45);
    --color\\cyan: lab(60 -35 -05);
    --color\\green: lab(60 -20 65);

    /* See: https://github.com/altercation/solarized?tab=readme-ov-file#usage--development */
    --color\\semantic\\emphasized: var(--color\\base01);
    --color\\semantic\\primary: var(--color\\base00);
    --color\\semantic\\secondary: var(--color\\base1);
    --color\\semantic\\highlight: var(--color\\base2);
    --color\\semantic\\background: var(--color\\base3);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color\\semantic\\emphasized: var(--color\\base1);
        --color\\semantic\\primary: var(--color\\base0);
        --color\\semantic\\secondary: var(--color\\base01);
        --color\\semantic\\highlight: var(--color\\base02);
        --color\\semantic\\background: var(--color\\base03);
    }
}

body {
    background-color: var(--color\\semantic\\background);
    color: var(--color\\semantic\\primary);
}

1. And yes, this is valid syntax. It's terrible awful syntax but it is valid according to both the spec and my browsers.