:root {
    /* editor colors */
    --color-cm-background: #fff;
    --color-cm-border: #e1e1e1;
    --color-cm-evaluated: rgb(248, 162, 0);
    --color-cm-keyword: #CC3626;
    --color-cm-built-in: #AF33A6;
    --color-cm-number: #AF33A6;
    --color-cm-symbol: #3F831E;
    --color-cm-class: #3478BC;
    --color-cm-primitive: #C07F00;
    --color-cm-char: #AF33A6;
    --color-cm-env-var: #C07F00;
    --color-cm-comment: #848484;
    --color-cm-string: #3F39C9;
    --color-cm-text: #000;
    --color-cm-selection: var(--color-cm-text);

    /* derived colors
    in future use `color-mix` to calculate them which allows for fewer variables
    but currently the qt browser does not support it, see
    https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
    */
    --color-bg: var(--color-cm-background);

    /* normally each theme uses --color-cm-keyword, but this generates grey text
    on blue background, which is bad to read, therefore it gets manually adjusted here */
    --color-warning-bg: #f7f7d7;
    --color-warning-fg: var(--color-cm-keyword);

    --color-fg: var(--color-cm-text);
    --color-fg-400: #333;
    --color-fg-300: #555;
    --color-fg-200: #999;
    --color-fg-100: #f0f0f0;

    --color-link: var(--color-cm-string);

    --color-extensions-bg: #601c8b;
    --color-extensions-fg: var(--color-cm-background);

    --color-input-fg: var(--color-fg);
    --color-input-bg: var(--color-fg-100);
}