/* gdhami.net palettes: the palette section of styles.css, written by
   scripts/palettes.py together with it. Loaded on its own by the live
   hero frames (assets/heroes/*.html), which have no other site CSS. */

/* gdhami.net — v0 static prototype. First palette locked with Khaled 2026-08-20
   (kept as "Midnight"); a palette picker since 2026-09-26; the set rebuilt
   2026-09-27 and again 2026-09-28, when the VS Code themes came in. */

/* ============================================================
   Colour palettes — the only place a site colour is written.

   Each palette is one rule. Its selector matches the page
   (html[data-theme="<id>"]) and also any swatch element that
   carries data-palette="<id>", so the picker paints its colour
   dots from these same tokens and no colour is repeated in JS.
   The selector is always html[data-theme=…], never a bare
   [data-theme=…]: gitglass writes data-theme on its own .gg root.

   :root carries Midnight, the default, so a missing or unknown
   theme falls back to it. Every palette defines every token,
   including the five --bar-* ones for the nav and footer bars
   (background, brand and active text, links, dim text, the
   brand accent): every theme but Midnight sets them to its own
   panel and text colours.

   Three families, all written by scripts/palettes.py (edit the
   script, not the rules):
   - Reef, Dune and Forest are GENERATED from one paletton.com
     colour scheme each (the scheme and its paletton address are
     in the comment above the rule): the ground and every grey
     are shades of the base hue, the accents the scheme's hues.
   - Ember, Midnight (the default; its page, card and light bar
     colours were set by Khaled 2026-09-28) and Daylight are
     hand-written; the script copies them through.
   - VS Code Dark, VS Code Light, Solarized Dark, Solarized
     Light, Monokai and Quiet Light are the colour themes that
     ship with Visual Studio Code, read from their theme files in microsoft/vscode.
     Where a pair of the editor's own colours misses the site's
     contrast floor, the value is lifted along its lightness and
     the editor's value is noted beside it.
   Every colour pair a reader has to read passes the WCAG
   contrast floors (scripts/palette_check.py). The same section
   is written to assets/palette.css for the live hero frames.
   ============================================================ */
/* Reef: mint on a deep sea-green ground; the scheme's gold and coral are the other two accents.
   paletton: tetrad, base hue 200, angle 40 (gives 240, 20 and 60)
   https://paletton.com/#uid=7380D0kFccSvg88DJ9VBOjtEyqu */
html[data-theme="reef"],
.pal-swatch[data-palette="reef"] {
  color-scheme: dark;
  --bg: #0a211a;
  --panel: #123027;
  --panel-deep: #061712;
  --text: #ebf7f4;
  --body-text: #c1d9d2;
  --sub: #90ada4;
  --dim: #69857c;
  --accent: #22e0a7;
  --accent-2: #fac04b;
  --accent-3: #fa955f;
  --accent-hover: #79ffd6;
  --disabled: #234037;
  --hairline: rgb(34 224 167 / 16%);
  --green: #53db77;
  --red: #f76868;
  --modal-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 4px 18px rgba(0, 0, 0, 0.4);
  --hero-shadow: 0 14px 38px rgba(6, 23, 18, 0.6);
  --nav-sep: rgb(34 224 167 / 34%);
  --overlay: rgba(6, 23, 18, 0.72);
  --bar-bg: #123027;
  --bar-text: #ebf7f4;
  --bar-link: #90ada4;
  --bar-dim: #69857c;
  --bar-accent: #22e0a7;
  --code-bg: #061a14;
  --code-text: #daebe6;
  --tok-kw: #fa9f6e;
  --tok-str: #facb6e;
  --tok-cm: #76948b;
  --tok-type: #63f5c9;
  --tok-num: #7da3fa;
  --tok-prop: #aaf2dc;
  --rv-bg: #061a14;
  --rv-side: #0c261e;
  --rv-text: #ebf7f4;
  --rv-code-text: #daebe6;
  --rv-muted: #90ada4;
  --rv-dim: #69857c;
  --rv-faint: #516b63;
  --rv-gutter: #3b524b;
  --rv-hover: rgba(250, 192, 75, 0.07);
  --rv-active: rgba(34, 224, 167, 0.12);
  --chart-1: #22e0a7;
  --chart-2: #fac04b;
  --chart-3: #fa955f;
  --chart-4: #6d95f2;
  --chart-5: #b4c9fa;
}

/* Dune: teal on a warm sand-brown ground, the ground being the complement; sand and terracotta are two of its shades.
   paletton: adjacent with complement, base hue 205, angle 25 (complement 25)
   https://paletton.com/#uid=63d0p0kFccSvg88DJ9VBOjtEyqu */
html[data-theme="dune"],
.pal-swatch[data-palette="dune"] {
  color-scheme: dark;
  --bg: #211a14;
  --panel: #302720;
  --panel-deep: #17110d;
  --text: #f7f0eb;
  --body-text: #d9cbc1;
  --sub: #ad9c90;
  --dim: #857469;
  --accent: #3bd1b8;
  --accent-2: #f2b185;
  --accent-3: #ed8742;
  --accent-hover: #8dffec;
  --disabled: #403630;
  --hairline: rgb(59 209 184 / 16%);
  --green: #53db77;
  --red: #f76868;
  --modal-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 4px 18px rgba(0, 0, 0, 0.4);
  --hero-shadow: 0 14px 38px rgba(23, 17, 13, 0.6);
  --nav-sep: rgb(59 209 184 / 34%);
  --overlay: rgba(23, 17, 13, 0.72);
  --bar-bg: #302720;
  --bar-text: #f7f0eb;
  --bar-link: #ad9c90;
  --bar-dim: #857469;
  --bar-accent: #3bd1b8;
  --code-bg: #1a130f;
  --code-text: #ebe1da;
  --tok-kw: #fa9958;
  --tok-str: #fac4a0;
  --tok-cm: #948276;
  --tok-type: #79f5e0;
  --tok-num: #7db8fa;
  --tok-prop: #f2c7aa;
  --rv-bg: #1a130f;
  --rv-side: #261e18;
  --rv-text: #f7f0eb;
  --rv-code-text: #ebe1da;
  --rv-muted: #ad9c90;
  --rv-dim: #857469;
  --rv-faint: #6b5c51;
  --rv-gutter: #52443b;
  --rv-hover: rgba(242, 177, 133, 0.07);
  --rv-active: rgba(59, 209, 184, 0.12);
  --chart-1: #3bd1b8;
  --chart-2: #f2b185;
  --chart-3: #ed8742;
  --chart-4: #6dacf2;
  --chart-5: #b4d5fa;
}

/* Forest: green on dark green, lime and teal beside it; the complement is the red of the status colour.
   paletton: adjacent with complement, base hue 185, angle 30 (secondaries 155 and 215, complement 5)
   https://paletton.com/#uid=62U0u0kFccSvg88DJ9VBOjtEyqu */
html[data-theme="forest"],
.pal-swatch[data-palette="forest"] {
  color-scheme: dark;
  --bg: #0a2110;
  --panel: #12301a;
  --panel-deep: #06170a;
  --text: #ebf7ee;
  --body-text: #c1d9c7;
  --sub: #90ad98;
  --dim: #698570;
  --accent: #36d97d;
  --accent-2: #bef26d;
  --accent-3: #5ccbe6;
  --accent-hover: #88ffbc;
  --disabled: #23402b;
  --hairline: rgb(54 217 125 / 16%);
  --green: #53db77;
  --red: #f76868;
  --modal-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 4px 18px rgba(0, 0, 0, 0.4);
  --hero-shadow: 0 14px 38px rgba(6, 23, 10, 0.6);
  --nav-sep: rgb(54 217 125 / 34%);
  --overlay: rgba(6, 23, 10, 0.72);
  --bar-bg: #12301a;
  --bar-text: #ebf7ee;
  --bar-link: #90ad98;
  --bar-dim: #698570;
  --bar-accent: #36d97d;
  --code-bg: #061a0b;
  --code-text: #daebdf;
  --tok-kw: #73e0fa;
  --tok-str: #cffa8c;
  --tok-cm: #76947e;
  --tok-type: #74f5ac;
  --tok-num: #7dfafa;
  --tok-prop: #aaf2bd;
  --rv-bg: #061a0b;
  --rv-side: #0c2613;
  --rv-text: #ebf7ee;
  --rv-code-text: #daebdf;
  --rv-muted: #90ad98;
  --rv-dim: #698570;
  --rv-faint: #516b58;
  --rv-gutter: #3b5241;
  --rv-hover: rgba(190, 242, 109, 0.07);
  --rv-active: rgba(54, 217, 125, 0.12);
  --chart-1: #36d97d;
  --chart-2: #bef26d;
  --chart-3: #5ccbe6;
  --chart-4: #6df2f2;
  --chart-5: #b4fafa;
}

/* Ember, kept as it was */
html[data-theme="ember"],
.pal-swatch[data-palette="ember"] {
  color-scheme: dark;
  --bg: #16110e;
  --panel: #211914;
  --panel-deep: #0e0a08;
  --text: #fdf1e6;
  --body-text: #eadbcc;
  --sub: #bfaa96;
  --dim: #8f7a67;
  --accent: #fb923c;
  --accent-2: #fbbf24;
  --accent-3: #f87171;
  --accent-hover: #fdba74;
  --disabled: #3a2d24;
  --hairline: rgb(251 146 60 / 15%);
  --green: #4ade80;
  --red: #f87171;
  --modal-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 4px 18px rgba(0, 0, 0, 0.4);
  --hero-shadow: 0 14px 38px rgba(8, 4, 2, 0.6);
  --nav-sep: rgb(251 146 60 / 30%);
  --overlay: rgba(10, 6, 3, 0.72);
  --bar-bg: #211914;
  --bar-text: #fdf1e6;
  --bar-link: #bfaa96;
  --bar-dim: #8f7a67;
  --bar-accent: #fb923c;
  --code-bg: #0f0b08;
  --code-text: #f3e4d6;
  --tok-kw: #fb923c;
  --tok-str: #a3e635;
  --tok-cm: #8f7a67;
  --tok-type: #fcd34d;
  --tok-num: #fda4af;
  --tok-prop: #fdba74;
  --rv-bg: #0f0b08;
  --rv-side: #19130f;
  --rv-text: #fdf1e6;
  --rv-code-text: #f3e4d6;
  --rv-muted: #bfaa96;
  --rv-dim: #8f7a67;
  --rv-faint: #66564a;
  --rv-gutter: #4a3d33;
  --rv-hover: rgba(251, 191, 36, 0.06);
  --rv-active: rgba(251, 146, 60, 0.14);
  --chart-1: #fb923c;
  --chart-2: #fbbf24;
  --chart-3: #a3e635;
  --chart-4: #f87171;
  --chart-5: #c4b5fd;
}

/* the first palette, 2026-08-20. Page, card and bar colours set by Khaled
   2026-09-28: aliceblue nav and footer over a navy page. */
:root,
.pal-swatch[data-palette="midnight"] {
  color-scheme: dark;
  --bg: #0f192e;
  --panel: #15223f;
  --panel-deep: #0b1120;
  --text: #e2e8f0;
  --body-text: #cbd5e1;
  --sub: #94a3b8;
  --dim: #64748b;
  --accent: #38bdf8;
  --accent-2: #7dd3fc;
  --accent-3: #7dd3fc;
  --accent-hover: #7dd3fc;
  --disabled: #2b3646;
  --hairline: rgb(94 144 216 / 14%);
  --green: #22c55e;
  --red: #ef4444;
  --modal-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0, 0, 0, 0.35);
  --hero-shadow: 0 12px 32px rgba(2, 6, 23, 0.5);
  --nav-sep: rgba(15, 25, 46, 0.3);
  --overlay: rgba(2, 6, 23, 0.65);
  --bar-bg: #f0f8ff;
  --bar-text: #0f192e;
  --bar-link: #334155;
  --bar-dim: #64748b;
  --bar-accent: #0369a1;
  --code-bg: #0b1120;
  --code-text: #cbd5e1;
  --tok-kw: #38bdf8;
  --tok-str: #22c55e;
  --tok-cm: #64748b;
  --tok-type: #5eead4;
  --tok-num: #fbbf24;
  --tok-prop: #c4b5fd;
  --rv-bg: #0b1120;
  --rv-side: #0d1526;
  --rv-text: #e2e8f0;
  --rv-code-text: #cbd5e1;
  --rv-muted: #94a3b8;
  --rv-dim: #64748b;
  --rv-faint: #475569;
  --rv-gutter: #334155;
  --rv-hover: rgba(148, 163, 184, 0.06);
  --rv-active: rgba(56, 189, 248, 0.1);
  --chart-1: #38bdf8;
  --chart-2: #22c55e;
  --chart-3: #fbbf24;
  --chart-4: #a78bfa;
  --chart-5: #f472b6;
}

/* the old light theme — every value as it was, except four greys and
   token colours that missed the contrast floor (each noted in place),
   the link hover colour, and chart colours dark enough for a light page */
html[data-theme="daylight"],
.pal-swatch[data-palette="daylight"] {
  color-scheme: light;
  --bg: #f6f8fb;
  --panel: #e9eef5;
  --panel-deep: #d6dee9;
  --text: #0f172a;
  --body-text: #28364a;
  --sub: #5b6b80;
  --dim: #76869a;          /* was #8494a7: 2.9:1 on the page, under the 3:1 floor */
  --accent: #0369a1;
  --accent-2: #0e7490;
  --accent-3: #0e7490;
  --accent-hover: #075985; /* a:hover was the dark theme's #7dd3fc, near-invisible on white */
  --disabled: #c3cedb;
  --hairline: rgba(15, 23, 42, 0.12);
  --green: #15803d;       /* was #22c55e: 2.1:1 on the page, under the 3:1 floor */
  --red: #ef4444;
  --modal-shadow: 0 24px 70px rgba(15, 23, 42, 0.20), 0 4px 18px rgba(15, 23, 42, 0.10);
  --hero-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  --nav-sep: rgba(15, 23, 42, 0.3);
  --overlay: rgba(2, 6, 23, 0.65);
  --bar-bg: #e9eef5;
  --bar-text: #0f172a;
  --bar-link: #5b6b80;
  --bar-dim: #76869a;
  --bar-accent: #0369a1;
  --code-bg: #e9eef5;
  --code-text: #1e293b;
  --tok-kw: #0369a1;
  --tok-str: #14773a;      /* was #15803d: 4.3:1 on the code block, under 4.5:1 */
  --tok-cm: #76869a;       /* was #8494a7: 2.6:1, under the 3:1 floor for comments */
  --tok-type: #0e7490;
  --tok-num: #a84d07;      /* was #b45309: 4.3:1, under 4.5:1 */
  --tok-prop: #1d4ed8;
  --rv-bg: #f4f7fb;
  --rv-side: #e7edf5;
  --rv-text: #0f172a;
  --rv-code-text: #1e293b;
  --rv-muted: #5b6b80;
  --rv-dim: #64748b;
  --rv-faint: #8494a7;
  --rv-gutter: #a5b3c4;
  --rv-hover: rgba(15, 23, 42, 0.05);
  --rv-active: rgba(3, 105, 161, 0.1);
  --chart-1: #0284c7;
  --chart-2: #16a34a;
  --chart-3: #d97706;
  --chart-4: #7c3aed;
  --chart-5: #db2777;
}

/* VS Code Dark: Dark Modern, the default dark theme of VS Code: the editor grey with its blue link and the Dark+ token colours.
   VS Code: extensions/theme-defaults/themes/dark_modern.json in microsoft/vscode
   (panel = list.hoverBackground; panel-deep and code-bg = sideBar.background; text = the Dark+ editor.foreground; sub = descriptionForeground; dim = editorLineNumber.foreground; accent = textLink.foreground; green = the testing pass green; red = errorForeground; chart-4/5 = the function and control-keyword tokens). */
html[data-theme="vscode-dark"],
.pal-swatch[data-palette="vscode-dark"] {
  color-scheme: dark;
  --bg: #1f1f1f;
  --panel: #2a2d2e;
  --panel-deep: #181818;
  --text: #d4d4d4;
  --body-text: #cccccc;
  --sub: #9d9d9d;
  --dim: #6e7681;
  --accent: #4daafc;
  --accent-2: #ce9178;
  --accent-3: #4ec9b0;
  --accent-hover: #8bc8fd;
  --disabled: #3a3a3a;
  --hairline: rgb(77 170 252 / 16%);
  --green: #89d185;
  --red: #f85149;
  --modal-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 4px 18px rgba(0, 0, 0, 0.4);
  --hero-shadow: 0 14px 38px rgba(24, 24, 24, 0.6);
  --nav-sep: rgb(77 170 252 / 34%);
  --overlay: rgba(24, 24, 24, 0.72);
  --bar-bg: #2a2d2e;
  --bar-text: #d4d4d4;
  --bar-link: #9d9d9d;
  --bar-dim: #6e7681;
  --bar-accent: #4daafc;
  --code-bg: #181818;
  --code-text: #cccccc;
  --tok-kw: #569cd6;
  --tok-str: #ce9178;
  --tok-cm: #6a9955;
  --tok-type: #4ec9b0;
  --tok-num: #b5cea8;
  --tok-prop: #9cdcfe;
  --rv-bg: #1f1f1f;
  --rv-side: #181818;
  --rv-text: #d4d4d4;
  --rv-code-text: #cccccc;
  --rv-muted: #9d9d9d;
  --rv-dim: #6e7681;
  --rv-faint: #5a6068;
  --rv-gutter: #4a4f55;
  --rv-hover: rgba(206, 145, 120, 0.07);
  --rv-active: rgba(77, 170, 252, 0.12);
  --chart-1: #4daafc;
  --chart-2: #ce9178;
  --chart-3: #4ec9b0;
  --chart-4: #dcdcaa;
  --chart-5: #c586c0;
}

/* VS Code Light: Light Modern, the default light theme of VS Code: white page, blue links, the Light+ token colours.
   VS Code: extensions/theme-defaults/themes/light_modern.json in microsoft/vscode
   (panel and code-bg = sideBar.background; panel-deep = list.activeSelectionBackground; body-text = editor.foreground; sub = badge.foreground; dim = editorLineNumber.foreground; accent = textLink.foreground; green = gitDecoration.addedResourceForeground; red = terminal.ansiRed; chart-4/5 = the function and control-keyword tokens).
   2 values lifted along the lightness axis to pass the contrast floors; the editor's own value follows each */
html[data-theme="vscode-light"],
.pal-swatch[data-palette="vscode-light"] {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #f8f8f8;
  --panel-deep: #e8e8e8;
  --text: #262626;
  --body-text: #3b3b3b;
  --sub: #616161;
  --dim: #6e7681;
  --accent: #005fb8;
  --accent-2: #a31515;
  --accent-3: #267f99;
  --accent-hover: #00478a;
  --disabled: #c9c9c9;
  --hairline: rgba(38, 38, 38, 0.12);
  --green: #587c0c;
  --red: #cd3131;
  --modal-shadow: 0 24px 70px rgba(38, 38, 38, 0.20), 0 4px 18px rgba(38, 38, 38, 0.10);
  --hero-shadow: 0 10px 28px rgba(38, 38, 38, 0.18);
  --nav-sep: rgba(38, 38, 38, 0.3);
  --overlay: rgba(38, 38, 38, 0.72);
  --bar-bg: #f8f8f8;
  --bar-text: #262626;
  --bar-link: #616161;
  --bar-dim: #6e7681;
  --bar-accent: #005fb8;
  --code-bg: #f8f8f8;
  --code-text: #3b3b3b;
  --tok-kw: #0000ff;
  --tok-str: #a31515;
  --tok-cm: #008000;
  --tok-type: #247991;  /* was #267f99 */
  --tok-num: #098155;   /* was #098658 */
  --tok-prop: #001080;
  --rv-bg: #ffffff;
  --rv-side: #f8f8f8;
  --rv-text: #262626;
  --rv-code-text: #3b3b3b;
  --rv-muted: #616161;
  --rv-dim: #6e7681;
  --rv-faint: #9298a0;
  --rv-gutter: #afb4ba;
  --rv-hover: rgba(38, 38, 38, 0.05);
  --rv-active: rgba(0, 95, 184, 0.10);
  --chart-1: #005fb8;
  --chart-2: #a31515;
  --chart-3: #267f99;
  --chart-4: #795e26;
  --chart-5: #af00db;
}

/* Solarized Dark: Ethan Schoonover's Solarized on its dark base: the sixteen Solarized colours and nothing else.
   VS Code: extensions/theme-solarized-dark/themes/solarized-dark-color-theme.json in microsoft/vscode
   (bg = base03, panel = base02, panel-deep and code-bg = sideBar.background; text and body-text = base1, sub = base0, dim = base01; accent = blue, accent-2 = yellow, accent-3 = cyan; chart-4 = violet, chart-5 = magenta).
   13 values lifted along the lightness axis to pass the contrast floors; the editor's own value follows each */
html[data-theme="solarized-dark"],
.pal-swatch[data-palette="solarized-dark"] {
  color-scheme: dark;
  --bg: #002b36;
  --panel: #073642;
  --panel-deep: #00212b;
  --text: #bdbfbf;        /* was #93a1a1 */
  --body-text: #93a1a1;
  --sub: #8f9c9e;         /* was #839496 */
  --dim: #648087;         /* was #586e75 */
  --accent: #4aa0e0;      /* was #268bd2 */
  --accent-2: #b58900;
  --accent-3: #2aa198;
  --accent-hover: #72b4e2;
  --disabled: #163d46;
  --hairline: rgb(38 139 210 / 16%);
  --green: #859900;
  --red: #dc322f;
  --modal-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 4px 18px rgba(0, 0, 0, 0.4);
  --hero-shadow: 0 14px 38px rgba(0, 33, 43, 0.6);
  --nav-sep: rgb(38 139 210 / 34%);
  --overlay: rgba(0, 33, 43, 0.72);
  --bar-bg: #073642;
  --bar-text: #bdbfbf;    /* was #93a1a1 */
  --bar-link: #8f9c9e;    /* was #839496 */
  --bar-dim: #648087;     /* was #586e75 */
  --bar-accent: #4aa0e0;  /* was #268bd2 */
  --code-bg: #00212b;
  --code-text: #a4aaac;   /* was #839496 */
  --tok-kw: #859900;
  --tok-str: #2aa198;
  --tok-cm: #586e75;
  --tok-type: #e95717;    /* was #cb4b16 */
  --tok-num: #db569a;     /* was #d33682 */
  --tok-prop: #268bd2;
  --rv-bg: #002b36;
  --rv-side: #00212b;
  --rv-text: #aeb3b3;     /* was #93a1a1 */
  --rv-code-text: #839496;
  --rv-muted: #839496;
  --rv-dim: #5c747b;      /* was #586e75 */
  --rv-faint: #425d65;
  --rv-gutter: #305059;
  --rv-hover: rgba(181, 137, 0, 0.07);
  --rv-active: rgba(38, 139, 210, 0.12);
  --chart-1: #268bd2;
  --chart-2: #b58900;
  --chart-3: #2aa198;
  --chart-4: #6c71c4;
  --chart-5: #d33682;
}

/* Solarized Light: Solarized on its light base: the cream page, near-black headings, blue links that turn magenta on hover.
   VS Code: extensions/theme-solarized-light/themes/solarized-light-color-theme.json in microsoft/vscode
   (bg = base3, panel and code-bg = base2, panel-deep = activityBar.background; text = base02, body-text = base01, sub = base00, dim = base1; accent = blue, its hover = magenta, otherwise as in Solarized Dark).
   20 values lifted along the lightness axis to pass the contrast floors; the editor's own value follows each */
html[data-theme="solarized-light"],
.pal-swatch[data-palette="solarized-light"] {
  color-scheme: light;
  --bg: #fdf6e3;
  --panel: #eee8d5;
  --panel-deep: #ddd6c1;
  --text: #073642;
  --body-text: #566b72;     /* was #586e75 */
  --sub: #596971;           /* was #657b83 */
  --dim: #708787;           /* was #93a1a1 */
  --accent: #1b6aa6;        /* was #268bd2 */
  --accent-2: #b08500;      /* was #b58900 */
  --accent-3: #299d94;      /* was #2aa198 */
  --accent-hover: #cd2d7a;  /* was #d33682 */
  --disabled: #c0c6bb;
  --hairline: rgba(7, 54, 66, 0.12);
  --green: #819400;         /* was #859900 */
  --red: #dc322f;
  --modal-shadow: 0 24px 70px rgba(7, 54, 66, 0.20), 0 4px 18px rgba(7, 54, 66, 0.10);
  --hero-shadow: 0 10px 28px rgba(7, 54, 66, 0.18);
  --nav-sep: rgba(7, 54, 66, 0.3);
  --overlay: rgba(7, 54, 66, 0.72);
  --bar-bg: #eee8d5;
  --bar-text: #073642;
  --bar-link: #596971;      /* was #657b83 */
  --bar-dim: #708787;       /* was #93a1a1 */
  --bar-accent: #1b6aa6;    /* was #268bd2 */
  --code-bg: #eee8d5;
  --code-text: #454b53;     /* was #657b83 */
  --tok-kw: #5f6c00;        /* was #859900 */
  --tok-str: #1e7168;       /* was #2aa198 */
  --tok-cm: #708787;        /* was #93a1a1 */
  --tok-type: #b24113;      /* was #cb4b16 */
  --tok-num: #bd2971;       /* was #d33682 */
  --tok-prop: #1b6aa6;      /* was #268bd2 */
  --rv-bg: #fdf6e3;
  --rv-side: #eee8d5;
  --rv-text: #073642;
  --rv-code-text: #657b83;
  --rv-muted: #5f727a;      /* was #657b83 */
  --rv-dim: #7e9393;        /* was #93a1a1 */
  --rv-faint: #aeb6b2;
  --rv-gutter: #c3c7bf;
  --rv-hover: rgba(7, 54, 66, 0.05);
  --rv-active: rgba(38, 139, 210, 0.10);
  --chart-1: #268bd2;
  --chart-2: #b58900;
  --chart-3: #2aa198;
  --chart-4: #6c71c4;
  --chart-5: #d33682;
}

/* Monokai: Wimer Hazenberg's Monokai: the olive-black ground, pink keywords, yellow strings, green types.
   VS Code: extensions/theme-monokai/themes/monokai-color-theme.json in microsoft/vscode
   (panel = list.hoverBackground; panel-deep and code-bg = sideBar.background; sub and dim = the active and plain line-number colours; accent = the support cyan, accent-3 = the parameter orange; tok-prop = the same cyan).
   1 value lifted along the lightness axis to pass the contrast floors; the editor's own value follows each */
html[data-theme="monokai"],
.pal-swatch[data-palette="monokai"] {
  color-scheme: dark;
  --bg: #272822;
  --panel: #3e3d32;
  --panel-deep: #1e1f1c;
  --text: #f8f8f2;
  --body-text: #f8f8f2;
  --sub: #c2c2bf;
  --dim: #90908a;
  --accent: #66d9ef;
  --accent-2: #a6e22e;
  --accent-3: #fd971f;
  --accent-hover: #9ce6f5;
  --disabled: #464741;
  --hairline: rgb(102 217 239 / 16%);
  --green: #a6e22e;
  --red: #f92672;
  --modal-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 4px 18px rgba(0, 0, 0, 0.4);
  --hero-shadow: 0 14px 38px rgba(30, 31, 28, 0.6);
  --nav-sep: rgb(102 217 239 / 34%);
  --overlay: rgba(30, 31, 28, 0.72);
  --bar-bg: #3e3d32;
  --bar-text: #f8f8f2;
  --bar-link: #c2c2bf;
  --bar-dim: #90908a;
  --bar-accent: #66d9ef;
  --code-bg: #1e1f1c;
  --code-text: #f8f8f2;
  --tok-kw: #f93078;  /* was #f92672 */
  --tok-str: #e6db74;
  --tok-cm: #88846f;
  --tok-type: #a6e22e;
  --tok-num: #ae81ff;
  --tok-prop: #66d9ef;
  --rv-bg: #272822;
  --rv-side: #1e1f1c;
  --rv-text: #f8f8f2;
  --rv-code-text: #f8f8f2;
  --rv-muted: #c2c2bf;
  --rv-dim: #90908a;
  --rv-faint: #767670;
  --rv-gutter: #61615b;
  --rv-hover: rgba(166, 226, 46, 0.07);
  --rv-active: rgba(102, 217, 239, 0.12);
  --chart-1: #66d9ef;
  --chart-2: #a6e22e;
  --chart-3: #fd971f;
  --chart-4: #ae81ff;
  --chart-5: #e6db74;
}

/* Quiet Light: Quiet Light: soft grey page with a lavender chrome, purple links, muted syntax colours.
   VS Code: extensions/theme-quietlight/themes/quietlight-color-theme.json in microsoft/vscode
   (panel and code-bg = activityBar.background; panel-deep = titleBar.activeBackground; text = editor.foreground; sub = editorLineNumber.foreground; dim = the comment grey; accent = statusBar.background; red = VS Code's default light-theme red, the theme defines none that passes; chart-5 = the function red).
   9 values lifted along the lightness axis to pass the contrast floors; the editor's own value follows each */
html[data-theme="quiet-light"],
.pal-swatch[data-palette="quiet-light"] {
  color-scheme: light;
  --bg: #f5f5f5;
  --panel: #ededf5;
  --panel-deep: #c4b7d7;
  --text: #333333;
  --body-text: #333333;
  --sub: #6a6d59;       /* was #6d705b */
  --dim: #898989;       /* was #aaaaaa */
  --accent: #705697;
  --accent-2: #448c27;
  --accent-3: #4b69c6;
  --accent-hover: #544071;
  --disabled: #c4c4c4;
  --hairline: rgba(51, 51, 51, 0.12);
  --green: #448c27;
  --red: #cd3131;
  --modal-shadow: 0 24px 70px rgba(51, 51, 51, 0.20), 0 4px 18px rgba(51, 51, 51, 0.10);
  --hero-shadow: 0 10px 28px rgba(51, 51, 51, 0.18);
  --nav-sep: rgba(51, 51, 51, 0.3);
  --overlay: rgba(51, 51, 51, 0.72);
  --bar-bg: #ededf5;
  --bar-text: #333333;
  --bar-link: #6a6d59;  /* was #6d705b */
  --bar-dim: #898989;   /* was #aaaaaa */
  --bar-accent: #705697;
  --code-bg: #ededf5;
  --code-text: #333333;
  --tok-kw: #4766c5;    /* was #4b69c6 */
  --tok-str: #3a7822;   /* was #448c27 */
  --tok-cm: #898989;    /* was #aaaaaa */
  --tok-type: #7a3e9d;
  --tok-num: #985b26;   /* was #9c5d27 */
  --tok-prop: #7a3e9d;
  --rv-bg: #f5f5f5;
  --rv-side: #ededf5;
  --rv-text: #333333;
  --rv-code-text: #333333;
  --rv-muted: #6d705b;
  --rv-dim: #8c8c8c;    /* was #aaaaaa */
  --rv-faint: #bdbdbd;
  --rv-gutter: #cccccc;
  --rv-hover: rgba(51, 51, 51, 0.05);
  --rv-active: rgba(112, 86, 151, 0.10);
  --chart-1: #705697;
  --chart-2: #448c27;
  --chart-3: #4b69c6;
  --chart-4: #9c5d27;
  --chart-5: #aa3731;
}