/* mutx.io — theme tokens: the colours and fonts of the twenty-two themes, eleven light and eleven dark, one setting for the site
   and the demos (demo/*). assets/js/theme.js sets data-theme (light or dark) and data-palette (the theme) on <html>
   before the first paint; styles.css and demo/common.css use these tokens. */

:root {
    color-scheme: light;

    /* Corner radii, one for the site, the demos and the cheatsheets: 4px on every box and control (cards, code wells,
       a toggle's track, buttons, fields, selects and their lists, tabs, a toggle's options, the menu's items), 3px on
       checkboxes, full rounding on counters, dots and radios. Use the tokens, never a literal. */
    --radius: 4px;
    --radius-check: 3px;
    --radius-full: 9999px;

    /* Brand: the logo's blue (assets/images/mutx-logo.png, favicon.svg), white on it as in the logo, for fills,
       borders and outlines; as text on white, the same hue darkened (--brand-700, 5.6:1; --brand-800 on hover). */
    --brand: #6ba5dc;
    --brand-600: #5a96d1; /* a fill's hover */
    --brand-700: #2b6aa8;
    --brand-800: #1f5a94;
    --on-brand: #fff;
    --accent: #188038; /* the green status badge, Google's green 700 */
    --warn: #b06000; /* the warning callout's text, Google's dark yellow */
    --danger: #c5221f; /* the error callout's text, Google's red 700 */
    --danger-muted: #e8a19c; /* a required field still disabled, a pale red */
    --purple: #8430ce; /* the cloud demo's connected account, Google's purple 700 */
    /* Google's four colours, its own in both themes: the ring round a Google photo on the profile button. */
    --google-red: #ea4335;
    --google-blue: #4285f4;
    --google-yellow: #fbbc05;
    --google-green: #34a853;

    /* Google's Material neutrals, a cool blue-grey that sits with the logo's blue. Layer 0 is the page, white, under a
       blue-grey top bar; the cards and tabs a paler blue-grey on it; fields and buttons white, and inside a
       card its tabs and code too. */
    --bg: #fff;
    --nav-bg: #f0f4f9; /* the top bar */
    --nav-hover: var(--btn-hover); /* a menu link's hover on the top bar */
    --nav-current: var(--bg); /* the current menu item on the top bar, plus an outline */
    --bar-line: #dde3ea; /* the top bar's and the footer's rule, crisp against the white page */
    --demo-panel: var(--bg); /* the demos' cards and panels (demo/common.css), white on their grey ground */
    --surface: #f8fafd; /* a step lighter than the top bar */
    --surface-2: #e9eef6;
    --dialog-head-bg: var(--btn-primary-bg); /* a dialog's head, the blue button's fill */
    --dialog-head-text: var(--btn-primary-text); /* its title and close, the blue button's text */
    --field-bg: var(--bg); /* a form field and its list, the page's colour in the grey cards */
    --demo-bg: var(
        --surface
    ); /* the demos' ground (demo/common.css), and their frames' on the site: the cards' grey */
    --border: #e1e6ed;
    --border-soft: #e9eef6;
    --rule: #d0d5db;
    --hover: #eef2f7; /* a menu item's or a card link's hover */

    /* Controls (buttons, tabs, fields): these colours; buttons with GitHub's (Primer) hover and press behaviour, our
       sizes, and every control's states as .md/DESIGN.md describes them. */
    --btn-bg: #fff; /* a secondary button, on the page and on a card's grey */
    --btn-hover: #e5eaf1;
    --tab-hover: #f0f4f9; /* a list item's hover, lighter than a button's */
    --btn-active: #dae0e8;
    /* A slight 3D: a see-through border, darker along the bottom; a light line inside the top edge, a soft drop;
       pressed, sunk in. */
    --btn-border: rgba(31, 41, 55, 0.13);
    --btn-border-bottom: rgba(31, 41, 55, 0.2);
    --btn-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    --btn-pressed: inset 0 1px 2px 0 rgba(0, 0, 0, 0.12);
    --btn-primary-border: rgba(0, 0, 0, 0.14);
    --btn-primary-border-bottom: rgba(0, 0, 0, 0.26);
    --btn-primary-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
    --btn-primary-pressed: inset 0 1px 2px 0 rgba(0, 0, 0, 0.25);
    --brand-active: #4f8bc6; /* a blue fill pressed */
    /* The blue button: the logo's blue in light; in dark a deeper blue with white text (5.6:1), as the bright one with
       dark text glares there. */
    --btn-primary-bg: var(--brand);
    --btn-primary-hover: var(--brand-600);
    --btn-primary-active: var(--brand-active);
    --btn-primary-text: var(--on-brand);
    /* The red button, a dialog's red action: Google's red 700 with white text (5.6:1), lighter on hover, deeper
       pressed. */
    --btn-danger-bg: #c5221f;
    --btn-danger-hover: #d93025;
    --btn-danger-active: #a50e0e;
    --btn-transition:
        color 150ms cubic-bezier(0.33, 1, 0.68, 1), background-color 150ms cubic-bezier(0.33, 1, 0.68, 1),
        box-shadow 150ms cubic-bezier(0.33, 1, 0.68, 1), border-color 150ms cubic-bezier(0.33, 1, 0.68, 1);
    /* Google's elevation shadows, in its grey rgb(60, 64, 67). */
    --shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); /* a select's open list */
    --shadow-raised: 0 4px 8px 3px rgba(60, 64, 67, 0.15), 0 1px 3px rgba(60, 64, 67, 0.3); /* a confirmation, over the page */    --loader-ring: rgba(0, 0, 0, 0.18); /* a loader's spinner, its ring under the blue arc (styles.css, .loader) */
    --dialog-border: #a6abb0; /* the loader's border, darker than a card's to show over the dimmed page */

    /* Google's text greys. */
    --text: #1f1f1f;
    --text-muted: #444746;
    --text-dim: #747775;
    --field-label: #8e918f; /* a field's label, lighter than --text-dim */

    /* Code wells: light. A well and inline code take the cards' colour and border on the page, and the
       page's colour in a card (.card, styles.css). */
    --code-bg: var(--surface);
    --code-border: var(--border);
    --code-text: #1f2c39;
    --code-dim: #627386; /* language label, comments */
    --code-btn-bg: var(--btn-bg);
    --code-btn-border: #ccd8e4;
    --code-btn-text: #56697e;
    --code-btn-text-hover: #16212c;
    --code-thumb: #c2d0dd;
    --code-accent: var(--brand-700);
    --code-inline: var(--surface);

    /* Syntax palette. */
    --hl-cm: var(--code-dim);
    --hl-st: #2a7548;
    --hl-kw: #74449f;
    --hl-nu: #915619;
    --hl-fn: #1d5f8f;

    /* The social card's protocol line (assets/social-card.php). */
    --term-text: var(--code-text);
    --term-cd: #16212c;
    --term-ok: #137333;
    --term-pr: #11786b;

    --brand-wash: rgba(107, 165, 220, 0.12);
    --brand-line: rgba(107, 165, 220, 0.55);
    --tile: #f0f4f9; /* an information tile's ground (the hero's facts), the top bar's blue-grey; in a card (.card, styles.css) --tile-card */
    --tile-card: #e9eef6; /* a step darker than the card */
    --focus-halo: 0 0 0 3px rgba(107, 165, 220, 0.25); /* round a focused field or checkbox */
    --danger-halo: 0 0 0 3px rgba(197, 34, 31, 0.15); /* round a focused invalid field */
    --accent-wash: #e6f4ea;
    --accent-line: rgba(24, 128, 56, 0.28);
    --danger-wash: #fce8e6; /* the error callout's */
    --danger-line: rgba(197, 34, 31, 0.12);
    --warn-wash: #fef7e0; /* the API docs' PATCH badge, --warn on it */
    --warn-line: rgba(176, 96, 0, 0.3);

    /* The cluster page's graphs. */
    --chart: var(--brand);

    --track: var(--bg);
    --thumb: #d0d5db;
    --thumb-hover: #a6abb0;

    --font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Dark: Google's dark greys (page #131314, cards #1e1f20, borders #3c4043 to #5f6368, text #e3e3e3), the logo's blue
   lifted for text, and Google's pale states so they read on the dark surfaces. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --brand-700: #8dbde8; /* as text on the dark cards, 8:1 */
    --brand-800: #b0d2f0;
    --on-brand: #131314; /* the page's near-black on the blue, 7:1; white would be 2.6:1 */
    --accent: #81c995; /* Google's green 300 */
    --warn: #fdd663; /* Google's yellow 300 */
    --danger: #f28b82; /* Google's red 300 */
    --danger-muted: #8c4a46; /* a muted red */
    --purple: #d7aefb; /* Google's purple 200 */

    /* The light theme's layers mirrored: cards close to the page, the bars standing out, and inside a card the page's
       colour (fields, code wells, inline code). */
    --bg: #131314;
    --surface: #1e1f20;
    --surface-2: #282a2c;
    --nav-bg: #282a2c;
    --nav-hover: #333537;
    --bar-line: var(--border);
    --border: #3c4043;
    --border-soft: #333537;
    --rule: #5f6368;
    --hover: #282a2c;
    --btn-bg: #2d2f31;
    --btn-hover: #37393b;
    --tab-hover: #282a2c;
    --btn-active: #424548;
    --btn-border: rgba(255, 255, 255, 0.05);
    --btn-border-bottom: rgba(0, 0, 0, 0.3);
    --btn-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
    --btn-pressed: inset 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --btn-primary-border: rgba(0, 0, 0, 0.2);
    --btn-primary-border-bottom: rgba(0, 0, 0, 0.45);
    --btn-primary-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
    --btn-primary-pressed: inset 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --btn-primary-bg: #2b6aa8;
    --btn-primary-hover: #3474b3;
    --btn-primary-active: #245d95;
    --btn-primary-text: #fff;
    --btn-danger-bg: #b3261e;
    --btn-danger-hover: #c5221f;
    --btn-danger-active: #8c1d18;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    --loader-ring: rgba(255, 255, 255, 0.22);
    --dialog-border: var(--border);

    --text: #e3e3e3;
    --text-muted: #c4c7c5;
    --text-dim: #9aa0a6;

    --code-text: #e3e3e3;
    --code-dim: #9aa0a6;
    --code-btn-border: #444746;
    --code-btn-text: #c4c7c5;
    --code-btn-text-hover: #fff;
    --code-thumb: #444746;

    --hl-st: #6fcf97;
    --hl-kw: #c39bff;
    --hl-nu: #e0a458;
    --hl-fn: #7fbcf0;

    --term-cd: #fff;
    --term-ok: #81c995;
    --term-pr: #8dbde8;

    --brand-wash: rgba(107, 165, 220, 0.16);
    --brand-line: rgba(107, 165, 220, 0.5);
    --tile: #1e1f20;
    --tile-card: #282a2c;
    --focus-halo: 0 0 0 3px rgba(107, 165, 220, 0.3);
    --danger-halo: 0 0 0 3px rgba(242, 139, 130, 0.25);
    --accent-wash: rgba(129, 201, 149, 0.12);
    --accent-line: rgba(129, 201, 149, 0.35);
    --danger-wash: #3b2120;
    --danger-line: rgba(242, 139, 130, 0.25);
    --warn-wash: rgba(253, 214, 99, 0.12);
    --warn-line: rgba(253, 214, 99, 0.35);

    --thumb: #444746;
    --thumb-hover: #5f6368;
}

/* The other twenty themes (data-palette, theme.js), each on the light or the dark theme above: its own neutrals (the
   page, the bars, the cards, the borders, the controls' greys and the text) and its own accent (--brand to --brand-800,
   the blue buttons), from which the washes, outlines and halos are mixed. A theme
   menu's swatch (.theme-swatch) takes its theme's accent, page and rule too. */
.theme-swatch[data-palette="light"] {
    --brand: #6ba5dc;
    --bg: #fff;
    --rule: #d0d5db;
}
.theme-swatch[data-palette="dark"] {
    --brand: #6ba5dc;
    --bg: #131314;
    --rule: #5f6368;
}
/* Rose: a pale rose tint, a rose-red accent. */
:root[data-palette="rose"],
.theme-swatch[data-palette="rose"] {
    --brand: #e07a86;
    --brand-600: #d46c79;
    --brand-700: #b23a4b;
    --brand-800: #93303e;
    --brand-active: #c45e6b;
    --code-text: #3a2427;
    --code-dim: #8a6a6e;
    --code-btn-text: #7e6064;
    --code-btn-text-hover: #2b1d1f;
    --term-cd: #2b1d1f;
    --bg: #fffcfc;
    --nav-bg: #f9eced;
    --bar-line: #eed8da;
    --surface: #fdf6f6;
    --surface-2: #f5e5e7;
    --border: #f0dfe1;
    --border-soft: #f5e5e7;
    --rule: #e0c6ca;
    --hover: #f8eced;
    --btn-hover: #f1e0e2;
    --tab-hover: #f9eced;
    --btn-active: #e9d3d6;
    --tile: #f9eced;
    --tile-card: #f5e5e7;
    --text: #2b1d1f;
    --text-muted: #554044;
    --text-dim: #85707a;
    --field-label: #a08c8f;
    --code-btn-border: #e6cfd2;
    --code-thumb: #e0c6ca;
    --thumb: #e0c6ca;
    --thumb-hover: #c4a2a7;
    --dialog-border: #c4a2a7;
    --warn: hsl(32 100% 31%);
    --danger: hsl(12 85% 40%);
}
/* Ember: a deep red-brown tint, a coral-red accent. */
:root[data-palette="ember"],
.theme-swatch[data-palette="ember"] {
    --brand: #e8776f;
    --brand-600: #db6a62;
    --brand-700: #f4aaa4;
    --brand-800: #f8cbc7;
    --btn-primary-bg: #a83a33;
    --btn-primary-hover: #b5443c;
    --btn-primary-active: #93312b;
    --term-pr: #f4aaa4;
    --bg: #1a1112;
    --surface: #24191a;
    --surface-2: #2f2122;
    --nav-bg: #2f2122;
    --nav-hover: #3a2a2b;
    --border: #412e30;
    --border-soft: #372728;
    --rule: #634a4c;
    --hover: #2f2122;
    --btn-bg: #332425;
    --btn-hover: #3e2d2e;
    --tab-hover: #2f2122;
    --btn-active: #4a3638;
    --tile: #24191a;
    --tile-card: #2f2122;
    --text: #f0e4e4;
    --text-muted: #d1bfc0;
    --text-dim: #a89192;
    --on-brand: #1a1112;
    --code-btn-border: #4b3739;
    --code-thumb: #4b3739;
    --thumb: #4b3739;
    --thumb-hover: #634a4c;
    --warn: hsl(44 95% 66%);
    --danger: hsl(348 90% 78%);
}
/* Paper: a warm off-white, ink browns. */
:root[data-palette="paper"],
.theme-swatch[data-palette="paper"] {
    --brand: #c9824a;
    --brand-600: #bb7440;
    --brand-700: #9a5521;
    --brand-800: #7f4419;
    --brand-active: #a8662f;
    --code-text: #3a2f25;
    --code-dim: #857462;
    --code-btn-text: #7a6a58;
    --code-btn-text-hover: #2b2620;
    --term-cd: #2b2620;
    --bg: #fffdf8;
    --nav-bg: #f5f0e6;
    --bar-line: #e6dfd2;
    --surface: #faf7f0;
    --surface-2: #efe9dd;
    --border: #e7e0d3;
    --border-soft: #efe9dd;
    --rule: #d6cebf;
    --hover: #f3eee4;
    --btn-bg: #fffdf8;
    --btn-hover: #ebe5d9;
    --tab-hover: #f5f0e6;
    --btn-active: #e0d9cb;
    --tile: #f5f0e6;
    --tile-card: #efe9dd;
    --text: #2b2620;
    --text-muted: #4f483f;
    --text-dim: #7b7367;
    --field-label: #978f82;
    --code-btn-border: #ddd4c4;
    --code-thumb: #d6cebf;
    --thumb: #d6cebf;
    --thumb-hover: #b0a796;
    --dialog-border: #b0a796;
    --warn: hsl(40 100% 27%);
    --danger: hsl(6 70% 40%);
}
/* Slate: cool greys a step deeper than Light's, its text near-black navy. */
:root[data-palette="slate"],
.theme-swatch[data-palette="slate"] {
    --brand: #6d7fe0;
    --brand-600: #5f71d4;
    --brand-700: #3f4fb8;
    --brand-800: #333f99;
    --brand-active: #5262c4;
    --code-text: #1e293b;
    --code-dim: #64748b;
    --code-btn-text: #5b6b80;
    --code-btn-text-hover: #0f172a;
    --term-cd: #0f172a;
    --bg: #f8fafc;
    --nav-bg: #e2e8f0;
    --bar-line: #cbd5e1;
    --surface: #f1f5f9;
    --surface-2: #e2e8f0;
    --border: #d5dde7;
    --border-soft: #e2e8f0;
    --rule: #c3cdd9;
    --hover: #e9eef4;
    --btn-hover: #dfe6ee;
    --tab-hover: #e9eef4;
    --btn-active: #d3dce6;
    --tile: #e9eef4;
    --tile-card: #e2e8f0;
    --text: #0f172a;
    --text-muted: #334155;
    --text-dim: #64748b;
    --field-label: #8794a7;
    --code-btn-border: #cbd5e1;
    --code-thumb: #cbd5e1;
    --thumb: #cbd5e1;
    --thumb-hover: #94a3b8;
    --dialog-border: #94a3b8;
    --warn: hsl(38 100% 28%);
    --danger: hsl(354 70% 44%);
}
/* Mint: a pale green tint. */
:root[data-palette="mint"],
.theme-swatch[data-palette="mint"] {
    --brand: #4fb38a;
    --brand-600: #43a47c;
    --brand-700: #1f7a55;
    --brand-800: #186345;
    --brand-active: #3a926d;
    --code-text: #1d2e25;
    --code-dim: #64806f;
    --code-btn-text: #5b7466;
    --code-btn-text-hover: #17241d;
    --term-cd: #17241d;
    --bg: #fbfefc;
    --nav-bg: #e8f5ee;
    --bar-line: #d3e8dc;
    --surface: #f3faf6;
    --surface-2: #e3f1e9;
    --border: #d9eadf;
    --border-soft: #e3f1e9;
    --rule: #c4dccd;
    --hover: #eaf5ef;
    --btn-hover: #ddeee4;
    --tab-hover: #e8f5ee;
    --btn-active: #d0e6d9;
    --tile: #e8f5ee;
    --tile-card: #e3f1e9;
    --text: #17241d;
    --text-muted: #3a4a41;
    --text-dim: #6a7b71;
    --field-label: #889890;
    --code-btn-border: #c9dfd1;
    --code-thumb: #c4dccd;
    --thumb: #c4dccd;
    --thumb-hover: #9bbaa7;
    --dialog-border: #9bbaa7;
    --warn: hsl(40 100% 27%);
    --danger: hsl(4 70% 42%);
}
/* Lavender: a pale violet tint. */
:root[data-palette="lavender"],
.theme-swatch[data-palette="lavender"] {
    --brand: #9b7fe0;
    --brand-600: #8d70d4;
    --brand-700: #6646b8;
    --brand-800: #523799;
    --brand-active: #7d5fc4;
    --code-text: #2a2540;
    --code-dim: #76708f;
    --code-btn-text: #6b6584;
    --code-btn-text-hover: #1f1c2b;
    --term-cd: #1f1c2b;
    --bg: #fdfcff;
    --nav-bg: #efedfa;
    --bar-line: #dddaf0;
    --surface: #f7f6fd;
    --surface-2: #ebe8f8;
    --border: #e2dff3;
    --border-soft: #ebe8f8;
    --rule: #cdc9e3;
    --hover: #f0eefa;
    --btn-hover: #e5e2f5;
    --tab-hover: #efedfa;
    --btn-active: #d9d5ee;
    --tile: #efedfa;
    --tile-card: #ebe8f8;
    --text: #1f1c2b;
    --text-muted: #44405a;
    --text-dim: #747089;
    --field-label: #9290a5;
    --code-btn-border: #d4d0ea;
    --code-thumb: #cdc9e3;
    --thumb: #cdc9e3;
    --thumb-hover: #a7a2c7;
    --dialog-border: #a7a2c7;
    --warn: hsl(36 100% 29%);
    --danger: hsl(2 72% 44%);
}
/* Midnight: deep navy. */
:root[data-palette="midnight"],
.theme-swatch[data-palette="midnight"] {
    --brand: #4fc3d9;
    --brand-600: #45b5ca;
    --brand-700: #8adcec;
    --brand-800: #b2e9f4;
    --btn-primary-bg: #1f7f91;
    --btn-primary-hover: #26899b;
    --btn-primary-active: #1a6f80;
    --term-pr: #8adcec;
    --bg: #0d1520;
    --surface: #142030;
    --surface-2: #1c2a3d;
    --nav-bg: #1c2a3d;
    --nav-hover: #253549;
    --border: #2a3a50;
    --border-soft: #223247;
    --rule: #46586f;
    --hover: #1c2a3d;
    --btn-bg: #1f2e42;
    --btn-hover: #283a51;
    --tab-hover: #1c2a3d;
    --btn-active: #31455e;
    --tile: #142030;
    --tile-card: #1c2a3d;
    --text: #e2e8f0;
    --text-muted: #b8c3d1;
    --text-dim: #8796a9;
    --on-brand: #0d1520;
    --code-btn-border: #2f4058;
    --code-thumb: #2f4058;
    --thumb: #2f4058;
    --thumb-hover: #46586f;
    --warn: hsl(45 90% 66%);
    --danger: hsl(0 85% 74%);
}
/* Graphite: true greys, a step lighter than Dark's. */
:root[data-palette="graphite"],
.theme-swatch[data-palette="graphite"] {
    --brand: #e0a24f;
    --brand-600: #d29545;
    --brand-700: #f0c48a;
    --brand-800: #f6d8b0;
    --btn-primary-bg: #9a6420;
    --btn-primary-hover: #a76e27;
    --btn-primary-active: #87571b;
    --term-pr: #f0c48a;
    --bg: #1a1a1a;
    --surface: #232323;
    --surface-2: #2d2d2d;
    --nav-bg: #2d2d2d;
    --nav-hover: #383838;
    --border: #3d3d3d;
    --border-soft: #333;
    --rule: #5c5c5c;
    --hover: #2d2d2d;
    --btn-bg: #303030;
    --btn-hover: #3a3a3a;
    --tab-hover: #2d2d2d;
    --btn-active: #454545;
    --tile: #232323;
    --tile-card: #2d2d2d;
    --text: #e6e6e6;
    --text-muted: #c2c2c2;
    --text-dim: #999;
    --on-brand: #1a1a1a;
    --code-btn-border: #474747;
    --code-thumb: #474747;
    --thumb: #474747;
    --thumb-hover: #5c5c5c;
    --warn: hsl(50 95% 66%);
    --danger: hsl(4 80% 72%);
}
/* Forest: a deep green tint. */
:root[data-palette="forest"],
.theme-swatch[data-palette="forest"] {
    --brand: #5cc28a;
    --brand-600: #50b47d;
    --brand-700: #96dcb3;
    --brand-800: #bce9cf;
    --btn-primary-bg: #2a7d4f;
    --btn-primary-hover: #318a59;
    --btn-primary-active: #236a43;
    --term-pr: #96dcb3;
    --bg: #0f1712;
    --surface: #16211a;
    --surface-2: #1e2c23;
    --nav-bg: #1e2c23;
    --nav-hover: #27372d;
    --border: #2c3d32;
    --border-soft: #24342a;
    --rule: #4a5e51;
    --hover: #1e2c23;
    --btn-bg: #213027;
    --btn-hover: #2a3b30;
    --tab-hover: #1e2c23;
    --btn-active: #33473a;
    --tile: #16211a;
    --tile-card: #1e2c23;
    --text: #e1ebe4;
    --text-muted: #bccbc1;
    --text-dim: #8ea195;
    --on-brand: #0f1712;
    --code-btn-border: #34473b;
    --code-thumb: #34473b;
    --thumb: #34473b;
    --thumb-hover: #4a5e51;
    --warn: hsl(44 85% 64%);
    --danger: hsl(6 80% 72%);
}
/* Plum: a deep violet tint. */
:root[data-palette="plum"],
.theme-swatch[data-palette="plum"] {
    --brand: #d07fc8;
    --brand-600: #c272ba;
    --brand-700: #e6b0e0;
    --brand-800: #f0cdec;
    --btn-primary-bg: #9a4a92;
    --btn-primary-hover: #a7549f;
    --btn-primary-active: #86407f;
    --term-pr: #e6b0e0;
    --bg: #17121c;
    --surface: #201927;
    --surface-2: #2a2133;
    --nav-bg: #2a2133;
    --nav-hover: #342a3f;
    --border: #3a2f46;
    --border-soft: #31273c;
    --rule: #5a4c6a;
    --hover: #2a2133;
    --btn-bg: #2d2437;
    --btn-hover: #372d43;
    --tab-hover: #2a2133;
    --btn-active: #41354f;
    --tile: #201927;
    --tile-card: #2a2133;
    --text: #ebe4f0;
    --text-muted: #c9bfd3;
    --text-dim: #9d91aa;
    --on-brand: #17121c;
    --code-btn-border: #443852;
    --code-thumb: #443852;
    --thumb: #443852;
    --thumb-hover: #5a4c6a;
    --warn: hsl(42 90% 66%);
    --danger: hsl(4 85% 73%);
}

/* Sky: a pale cyan tint, a teal accent. */
:root[data-palette="sky"],
.theme-swatch[data-palette="sky"] {
    --brand: hsl(186 55% 60%);
    --brand-600: hsl(186 55% 55%);
    --brand-700: hsl(186 55% 32%);
    --brand-800: hsl(186 55% 26%);
    --brand-active: hsl(186 55% 50%);
    --bg: hsl(190 60% 99%);
    --nav-bg: hsl(190 40% 94%);
    --bar-line: hsl(190 30% 87%);
    --surface: hsl(190 45% 97%);
    --surface-2: hsl(190 35% 92%);
    --border: hsl(190 30% 89%);
    --border-soft: hsl(190 35% 92%);
    --rule: hsl(190 25% 82%);
    --hover: hsl(190 40% 95%);
    --btn-hover: hsl(190 30% 91%);
    --tab-hover: hsl(190 40% 94%);
    --btn-active: hsl(190 25% 86%);
    --tile: hsl(190 40% 94%);
    --tile-card: hsl(190 35% 92%);
    --text: hsl(190 20% 12%);
    --text-muted: hsl(190 12% 27%);
    --text-dim: hsl(190 8% 45%);
    --field-label: hsl(190 7% 58%);
    --code-text: hsl(190 22% 18%);
    --code-dim: hsl(190 12% 48%);
    --code-btn-text: hsl(190 12% 42%);
    --code-btn-text-hover: hsl(190 20% 12%);
    --term-cd: hsl(190 20% 12%);
    --code-btn-border: hsl(190 25% 85%);
    --code-thumb: hsl(190 25% 82%);
    --thumb: hsl(190 25% 82%);
    --thumb-hover: hsl(190 20% 68%);
    --dialog-border: hsl(190 20% 68%);
    --warn: hsl(38 100% 28%);
    --danger: hsl(356 72% 43%);
}
/* Ocean: a deep sea-blue tint, a teal accent. */
:root[data-palette="ocean"],
.theme-swatch[data-palette="ocean"] {
    --brand: hsl(180 55% 62%);
    --brand-600: hsl(180 55% 57%);
    --brand-700: hsl(180 55% 78%);
    --brand-800: hsl(180 55% 86%);
    --btn-primary-bg: hsl(180 55% 36%);
    --btn-primary-hover: hsl(180 55% 40%);
    --btn-primary-active: hsl(180 55% 31%);
    --term-pr: hsl(180 55% 78%);
    --bg: hsl(195 25% 8%);
    --surface: hsl(195 22% 12%);
    --surface-2: hsl(195 20% 16%);
    --nav-bg: hsl(195 20% 16%);
    --nav-hover: hsl(195 18% 20%);
    --border: hsl(195 18% 22%);
    --border-soft: hsl(195 18% 18%);
    --rule: hsl(195 12% 34%);
    --hover: hsl(195 20% 16%);
    --btn-bg: hsl(195 19% 17%);
    --btn-hover: hsl(195 17% 21%);
    --tab-hover: hsl(195 20% 16%);
    --btn-active: hsl(195 15% 25%);
    --tile: hsl(195 22% 12%);
    --tile-card: hsl(195 20% 16%);
    --text: hsl(195 20% 91%);
    --text-muted: hsl(195 12% 78%);
    --text-dim: hsl(195 9% 61%);
    --on-brand: hsl(195 25% 8%);
    --code-btn-border: hsl(195 15% 25%);
    --code-thumb: hsl(195 15% 25%);
    --thumb: hsl(195 15% 25%);
    --thumb-hover: hsl(195 12% 34%);
    --warn: hsl(45 92% 66%);
    --danger: hsl(2 85% 74%);
}
/* Sand: a pale sand tint, a gold accent. */
:root[data-palette="sand"],
.theme-swatch[data-palette="sand"] {
    --brand: hsl(42 65% 60%);
    --brand-600: hsl(42 65% 55%);
    --brand-700: hsl(42 65% 32%);
    --brand-800: hsl(42 65% 26%);
    --brand-active: hsl(42 65% 50%);
    --bg: hsl(45 60% 99%);
    --nav-bg: hsl(45 40% 94%);
    --bar-line: hsl(45 30% 87%);
    --surface: hsl(45 45% 97%);
    --surface-2: hsl(45 35% 92%);
    --border: hsl(45 30% 89%);
    --border-soft: hsl(45 35% 92%);
    --rule: hsl(45 25% 82%);
    --hover: hsl(45 40% 95%);
    --btn-hover: hsl(45 30% 91%);
    --tab-hover: hsl(45 40% 94%);
    --btn-active: hsl(45 25% 86%);
    --tile: hsl(45 40% 94%);
    --tile-card: hsl(45 35% 92%);
    --text: hsl(45 20% 12%);
    --text-muted: hsl(45 12% 27%);
    --text-dim: hsl(45 8% 45%);
    --field-label: hsl(45 7% 58%);
    --code-text: hsl(45 22% 18%);
    --code-dim: hsl(45 12% 48%);
    --code-btn-text: hsl(45 12% 42%);
    --code-btn-text-hover: hsl(45 20% 12%);
    --term-cd: hsl(45 20% 12%);
    --code-btn-border: hsl(45 25% 85%);
    --code-thumb: hsl(45 25% 82%);
    --thumb: hsl(45 25% 82%);
    --thumb-hover: hsl(45 20% 68%);
    --dialog-border: hsl(45 20% 68%);
    --warn: hsl(28 90% 32%);
    --danger: hsl(6 68% 40%);
}
/* Dune: a deep brown-gold tint, a gold accent. */
:root[data-palette="dune"],
.theme-swatch[data-palette="dune"] {
    --brand: hsl(45 65% 62%);
    --brand-600: hsl(45 65% 57%);
    --brand-700: hsl(45 65% 78%);
    --brand-800: hsl(45 65% 86%);
    --btn-primary-bg: hsl(45 65% 36%);
    --btn-primary-hover: hsl(45 65% 40%);
    --btn-primary-active: hsl(45 65% 31%);
    --term-pr: hsl(45 65% 78%);
    --bg: hsl(40 25% 8%);
    --surface: hsl(40 22% 12%);
    --surface-2: hsl(40 20% 16%);
    --nav-bg: hsl(40 20% 16%);
    --nav-hover: hsl(40 18% 20%);
    --border: hsl(40 18% 22%);
    --border-soft: hsl(40 18% 18%);
    --rule: hsl(40 12% 34%);
    --hover: hsl(40 20% 16%);
    --btn-bg: hsl(40 19% 17%);
    --btn-hover: hsl(40 17% 21%);
    --tab-hover: hsl(40 20% 16%);
    --btn-active: hsl(40 15% 25%);
    --tile: hsl(40 22% 12%);
    --tile-card: hsl(40 20% 16%);
    --text: hsl(40 20% 91%);
    --text-muted: hsl(40 12% 78%);
    --text-dim: hsl(40 9% 61%);
    --on-brand: hsl(40 25% 8%);
    --code-btn-border: hsl(40 15% 25%);
    --code-thumb: hsl(40 15% 25%);
    --thumb: hsl(40 15% 25%);
    --thumb-hover: hsl(40 12% 34%);
    --warn: hsl(30 85% 66%);
    --danger: hsl(2 80% 72%);
}
/* Peach: a pale peach tint, an orange accent. */
:root[data-palette="peach"],
.theme-swatch[data-palette="peach"] {
    --brand: hsl(22 75% 60%);
    --brand-600: hsl(22 75% 55%);
    --brand-700: hsl(22 75% 32%);
    --brand-800: hsl(22 75% 26%);
    --brand-active: hsl(22 75% 50%);
    --bg: hsl(25 60% 99%);
    --nav-bg: hsl(25 40% 94%);
    --bar-line: hsl(25 30% 87%);
    --surface: hsl(25 45% 97%);
    --surface-2: hsl(25 35% 92%);
    --border: hsl(25 30% 89%);
    --border-soft: hsl(25 35% 92%);
    --rule: hsl(25 25% 82%);
    --hover: hsl(25 40% 95%);
    --btn-hover: hsl(25 30% 91%);
    --tab-hover: hsl(25 40% 94%);
    --btn-active: hsl(25 25% 86%);
    --tile: hsl(25 40% 94%);
    --tile-card: hsl(25 35% 92%);
    --text: hsl(25 20% 12%);
    --text-muted: hsl(25 12% 27%);
    --text-dim: hsl(25 8% 45%);
    --field-label: hsl(25 7% 58%);
    --code-text: hsl(25 22% 18%);
    --code-dim: hsl(25 12% 48%);
    --code-btn-text: hsl(25 12% 42%);
    --code-btn-text-hover: hsl(25 20% 12%);
    --term-cd: hsl(25 20% 12%);
    --code-btn-border: hsl(25 25% 85%);
    --code-thumb: hsl(25 25% 82%);
    --thumb: hsl(25 25% 82%);
    --thumb-hover: hsl(25 20% 68%);
    --dialog-border: hsl(25 20% 68%);
    --warn: hsl(42 100% 27%);
    --danger: hsl(354 72% 42%);
}
/* Copper: a deep copper tint, an orange accent. */
:root[data-palette="copper"],
.theme-swatch[data-palette="copper"] {
    --brand: hsl(24 65% 62%);
    --brand-600: hsl(24 65% 57%);
    --brand-700: hsl(24 65% 78%);
    --brand-800: hsl(24 65% 86%);
    --btn-primary-bg: hsl(24 65% 36%);
    --btn-primary-hover: hsl(24 65% 40%);
    --btn-primary-active: hsl(24 65% 31%);
    --term-pr: hsl(24 65% 78%);
    --bg: hsl(20 25% 8%);
    --surface: hsl(20 22% 12%);
    --surface-2: hsl(20 20% 16%);
    --nav-bg: hsl(20 20% 16%);
    --nav-hover: hsl(20 18% 20%);
    --border: hsl(20 18% 22%);
    --border-soft: hsl(20 18% 18%);
    --rule: hsl(20 12% 34%);
    --hover: hsl(20 20% 16%);
    --btn-bg: hsl(20 19% 17%);
    --btn-hover: hsl(20 17% 21%);
    --tab-hover: hsl(20 20% 16%);
    --btn-active: hsl(20 15% 25%);
    --tile: hsl(20 22% 12%);
    --tile-card: hsl(20 20% 16%);
    --text: hsl(20 20% 91%);
    --text-muted: hsl(20 12% 78%);
    --text-dim: hsl(20 9% 61%);
    --on-brand: hsl(20 25% 8%);
    --code-btn-border: hsl(20 15% 25%);
    --code-thumb: hsl(20 15% 25%);
    --thumb: hsl(20 15% 25%);
    --thumb-hover: hsl(20 12% 34%);
    --warn: hsl(46 90% 66%);
    --danger: hsl(354 82% 74%);
}
/* Blossom: a pale pink tint, a pink accent. */
:root[data-palette="blossom"],
.theme-swatch[data-palette="blossom"] {
    --brand: hsl(330 60% 60%);
    --brand-600: hsl(330 60% 55%);
    --brand-700: hsl(330 60% 32%);
    --brand-800: hsl(330 60% 26%);
    --brand-active: hsl(330 60% 50%);
    --bg: hsl(330 60% 99%);
    --nav-bg: hsl(330 40% 94%);
    --bar-line: hsl(330 30% 87%);
    --surface: hsl(330 45% 97%);
    --surface-2: hsl(330 35% 92%);
    --border: hsl(330 30% 89%);
    --border-soft: hsl(330 35% 92%);
    --rule: hsl(330 25% 82%);
    --hover: hsl(330 40% 95%);
    --btn-hover: hsl(330 30% 91%);
    --tab-hover: hsl(330 40% 94%);
    --btn-active: hsl(330 25% 86%);
    --tile: hsl(330 40% 94%);
    --tile-card: hsl(330 35% 92%);
    --text: hsl(330 20% 12%);
    --text-muted: hsl(330 12% 27%);
    --text-dim: hsl(330 8% 45%);
    --field-label: hsl(330 7% 58%);
    --code-text: hsl(330 22% 18%);
    --code-dim: hsl(330 12% 48%);
    --code-btn-text: hsl(330 12% 42%);
    --code-btn-text-hover: hsl(330 20% 12%);
    --term-cd: hsl(330 20% 12%);
    --code-btn-border: hsl(330 25% 85%);
    --code-thumb: hsl(330 25% 82%);
    --thumb: hsl(330 25% 82%);
    --thumb-hover: hsl(330 20% 68%);
    --dialog-border: hsl(330 20% 68%);
    --warn: hsl(32 100% 31%);
    --danger: hsl(6 78% 42%);
}
/* Berry: a deep berry tint, a pink accent. */
:root[data-palette="berry"],
.theme-swatch[data-palette="berry"] {
    --brand: hsl(330 55% 62%);
    --brand-600: hsl(330 55% 57%);
    --brand-700: hsl(330 55% 78%);
    --brand-800: hsl(330 55% 86%);
    --btn-primary-bg: hsl(330 55% 36%);
    --btn-primary-hover: hsl(330 55% 40%);
    --btn-primary-active: hsl(330 55% 31%);
    --term-pr: hsl(330 55% 78%);
    --bg: hsl(335 25% 8%);
    --surface: hsl(335 22% 12%);
    --surface-2: hsl(335 20% 16%);
    --nav-bg: hsl(335 20% 16%);
    --nav-hover: hsl(335 18% 20%);
    --border: hsl(335 18% 22%);
    --border-soft: hsl(335 18% 18%);
    --rule: hsl(335 12% 34%);
    --hover: hsl(335 20% 16%);
    --btn-bg: hsl(335 19% 17%);
    --btn-hover: hsl(335 17% 21%);
    --tab-hover: hsl(335 20% 16%);
    --btn-active: hsl(335 15% 25%);
    --tile: hsl(335 22% 12%);
    --tile-card: hsl(335 20% 16%);
    --text: hsl(335 20% 91%);
    --text-muted: hsl(335 12% 78%);
    --text-dim: hsl(335 9% 61%);
    --on-brand: hsl(335 25% 8%);
    --code-btn-border: hsl(335 15% 25%);
    --code-thumb: hsl(335 15% 25%);
    --thumb: hsl(335 15% 25%);
    --thumb-hover: hsl(335 12% 34%);
    --warn: hsl(42 92% 66%);
    --danger: hsl(8 85% 72%);
}
/* Sage: a pale sage tint, an olive accent. */
:root[data-palette="sage"],
.theme-swatch[data-palette="sage"] {
    --brand: hsl(80 35% 60%);
    --brand-600: hsl(80 35% 55%);
    --brand-700: hsl(80 35% 32%);
    --brand-800: hsl(80 35% 26%);
    --brand-active: hsl(80 35% 50%);
    --bg: hsl(85 60% 99%);
    --nav-bg: hsl(85 40% 94%);
    --bar-line: hsl(85 30% 87%);
    --surface: hsl(85 45% 97%);
    --surface-2: hsl(85 35% 92%);
    --border: hsl(85 30% 89%);
    --border-soft: hsl(85 35% 92%);
    --rule: hsl(85 25% 82%);
    --hover: hsl(85 40% 95%);
    --btn-hover: hsl(85 30% 91%);
    --tab-hover: hsl(85 40% 94%);
    --btn-active: hsl(85 25% 86%);
    --tile: hsl(85 40% 94%);
    --tile-card: hsl(85 35% 92%);
    --text: hsl(85 20% 12%);
    --text-muted: hsl(85 12% 27%);
    --text-dim: hsl(85 8% 45%);
    --field-label: hsl(85 7% 58%);
    --code-text: hsl(85 22% 18%);
    --code-dim: hsl(85 12% 48%);
    --code-btn-text: hsl(85 12% 42%);
    --code-btn-text-hover: hsl(85 20% 12%);
    --term-cd: hsl(85 20% 12%);
    --code-btn-border: hsl(85 25% 85%);
    --code-thumb: hsl(85 25% 82%);
    --thumb: hsl(85 25% 82%);
    --thumb-hover: hsl(85 20% 68%);
    --dialog-border: hsl(85 20% 68%);
    --warn: hsl(40 90% 28%);
    --danger: hsl(6 62% 41%);
}
/* Moss: a deep moss tint, an olive accent. */
:root[data-palette="moss"],
.theme-swatch[data-palette="moss"] {
    --brand: hsl(75 40% 62%);
    --brand-600: hsl(75 40% 57%);
    --brand-700: hsl(75 40% 78%);
    --brand-800: hsl(75 40% 86%);
    --btn-primary-bg: hsl(75 40% 36%);
    --btn-primary-hover: hsl(75 40% 40%);
    --btn-primary-active: hsl(75 40% 31%);
    --term-pr: hsl(75 40% 78%);
    --bg: hsl(90 25% 8%);
    --surface: hsl(90 22% 12%);
    --surface-2: hsl(90 20% 16%);
    --nav-bg: hsl(90 20% 16%);
    --nav-hover: hsl(90 18% 20%);
    --border: hsl(90 18% 22%);
    --border-soft: hsl(90 18% 18%);
    --rule: hsl(90 12% 34%);
    --hover: hsl(90 20% 16%);
    --btn-bg: hsl(90 19% 17%);
    --btn-hover: hsl(90 17% 21%);
    --tab-hover: hsl(90 20% 16%);
    --btn-active: hsl(90 15% 25%);
    --tile: hsl(90 22% 12%);
    --tile-card: hsl(90 20% 16%);
    --text: hsl(90 20% 91%);
    --text-muted: hsl(90 12% 78%);
    --text-dim: hsl(90 9% 61%);
    --on-brand: hsl(90 25% 8%);
    --code-btn-border: hsl(90 15% 25%);
    --code-thumb: hsl(90 15% 25%);
    --thumb: hsl(90 15% 25%);
    --thumb-hover: hsl(90 12% 34%);
    --warn: hsl(44 80% 63%);
    --danger: hsl(6 72% 71%);
}
/* The logo follows the theme: the dark variant is the letters alone, in the brand blue, on a transparent background. */
:root[data-theme="dark"] .logo-light,
:root:not([data-theme="dark"]) .logo-dark {
    display: none;
}
/* The twenty other themes: the logo's blue is Light's and Dark's alone. Theirs is drawn in the theme's accent
   (.logo-tint, mutxio_site_header()), the letters the dark logo's shape as a mask: a light theme's on a tile of the
   accent in white, as the light logo, a dark theme's in the accent alone, as the dark one. Their code's functions
   take the accent's text colour too, and their washes, outlines and halos are mixed from the accent, the warning's and
   the error's from their own colour, see-through, so each sits on the theme's own ground; each theme's amber and red
   (--warn, --danger, in its own block) are its own, picked for its palette, a red far enough from a red accent and an
   amber from an amber one, each at least 4.5:1 on its tint (Light's and Dark's stay literal rgba(), which the
   cheatsheets' to-svg.js reads). */
:root[data-palette]:not([data-palette="light"]):not([data-palette="dark"]) {
    --hl-fn: var(--brand-700);
    --brand-wash: color-mix(in srgb, var(--brand) 12%, transparent);
    --brand-line: color-mix(in srgb, var(--brand) 55%, transparent);
    --focus-halo: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
    --warn-wash: color-mix(in srgb, var(--warn) 10%, transparent);
    --warn-line: color-mix(in srgb, var(--warn) 30%, transparent);
    --danger-wash: color-mix(in srgb, var(--danger) 10%, transparent);
    --danger-line: color-mix(in srgb, var(--danger) 12%, transparent);
}
:root[data-theme="dark"][data-palette]:not([data-palette="dark"]) {
    --brand-wash: color-mix(in srgb, var(--brand) 16%, transparent);
    --brand-line: color-mix(in srgb, var(--brand) 50%, transparent);
    --focus-halo: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent);
    --warn-wash: color-mix(in srgb, var(--warn) 12%, transparent);
    --warn-line: color-mix(in srgb, var(--warn) 35%, transparent);
    --danger-wash: color-mix(in srgb, var(--danger) 16%, transparent);
    --danger-line: color-mix(in srgb, var(--danger) 25%, transparent);
}
.logo-tint {
    display: none;
}
:root[data-palette]:not([data-palette="light"]):not([data-palette="dark"]) :is(.logo-light, .logo-dark) {
    display: none;
}
:root[data-palette]:not([data-palette="light"]):not([data-palette="dark"]) .logo-tint {
    display: block;
    height: 32px;
    aspect-ratio: 2353 / 1041;
}
.logo-tint::before {
    content: "";
    display: block;
    height: 100%;
    background: var(--brand);
    mask: url("../images/mutx-logo-dark.png") center / 100% 100% no-repeat;
}
:root[data-theme="light"] .logo-tint {
    border-radius: 6.4% / 14.4%;
    background: var(--brand);
}
:root[data-theme="light"] .logo-tint::before {
    background: #fff;
}

/* A theme switch is instant: theme.js sets this for the frame of the change. */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
    transition: none !important;
}