/* schemes.css — GENERATED by scripts/gen-schemes.mjs. Do not edit by hand:
   change the generator and run it again.

   Colour schemes a visitor can choose (footer, "Colours"). The choice is
   stored as data-scheme on <html>. Light or dark is the site's ordinary
   setting (data-theme, or the system preference), so each scheme has a
   light side and a dark side. No data-scheme = the standard colours in
   tokens.css. Every text pair below is computed to pass WCAG 2 AAA and the
   APCA level for body text (Lc 75).

   Selectors start with html:root so they outrank the standard light,
   dark and automatic-dark blocks whatever order the stylesheets load in. */

/* ===== Pink and maroon =====
   Light side: ink #320707 on #FBE2F1 (14.76:1, Lc 91); the ground is #FFD7EF muted.
   Dark side: text #FFEFF9 on #320707 (16.22:1, Lc 99). */
html:root[data-scheme="pink"] {
  --paper: #FBE2F1;
  --paper-2: #FDF2F9;
  --paper-3: #E7CCDA;
  --ink: #320707;
  --ink-2: #4D201D;
  --ink-3: #693835;
  --ink-rule: #C3A5AF;
  --brand: #320707;
  --brand-2: #320707;
  --brand-soft: #EBD0DE;
  --accent: #8E0148;
  --accent-text: #5B002B;
  --accent-soft: #EBD0DE;
  --success: #320707;
  --success-text: #320707;
  --warn: #320707;
  --warn-text: #320707;
  --error: #320707;
  --error-text: #320707;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  --shadow-1: 0 1px 0 rgba(50,7,7,.05), 0 2px 6px -2px rgba(50,7,7,.14);
  --shadow-2: 0 2px 0 rgba(50,7,7,.05), 0 10px 24px -10px rgba(50,7,7,.24);
  --shadow-3: 0 4px 0 rgba(50,7,7,.05), 0 28px 50px -18px rgba(50,7,7,.32);
  color-scheme: light;
}
/* the two dark bands on a light page: the scheme's dark side, unlifted */
html:root[data-scheme="pink"] [data-theme="dark"] {
  --paper: #320707;
  --paper-2: #320707;
  --paper-3: #572C31;
  --ink: #FFEFF9;
  --ink-2: #FFE8F6;
  --ink-3: #FFE1F3;
  --ink-rule: #784E56;
  --brand: #FFEFF9;
  --brand-2: #FFEFF9;
  --brand-soft: #4F2427;
  --accent: #FFD7EF;
  --accent-text: #FFD7EF;
  --accent-soft: #4F2427;
  --highlight: #70454D;
  --success: #FFE1F3;
  --success-text: #FFE8F6;
  --warn: #FFE1F3;
  --warn-text: #FFE8F6;
  --error: #FFE1F3;
  --error-text: #FFE8F6;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  --shadow-1: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.55);
  --shadow-2: 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.65);
  --shadow-3: 0 4px 0 rgba(0,0,0,.45), 0 28px 50px -18px rgba(0,0,0,.75);
}
/* dark side, chosen with the toggle */
html:root[data-scheme="pink"][data-theme="dark"],
html:root[data-scheme="pink"][data-theme="dark"] [data-theme="dark"] {
  --paper: #320707;
  --paper-2: #421614;
  --paper-3: #572C31;
  --ink: #FFEFF9;
  --ink-2: #FFE8F6;
  --ink-3: #FFE1F3;
  --ink-rule: #784E56;
  --brand: #FFEFF9;
  --brand-2: #FFEFF9;
  --brand-soft: #5C3133;
  --accent: #FFD7EF;
  --accent-text: #FFD7EF;
  --accent-soft: #5C3133;
  --highlight: #70454D;
  --success: #FFE1F3;
  --success-text: #FFE8F6;
  --warn: #FFE1F3;
  --warn-text: #FFE8F6;
  --error: #FFE1F3;
  --error-text: #FFE8F6;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  --shadow-1: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.55);
  --shadow-2: 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.65);
  --shadow-3: 0 4px 0 rgba(0,0,0,.45), 0 28px 50px -18px rgba(0,0,0,.75);
}
html:root[data-scheme="pink"][data-theme="dark"] { color-scheme: dark; }
/* dark side, from the system preference */
@media (prefers-color-scheme: dark) {
  html:root[data-scheme="pink"]:not([data-theme="light"]),
  html:root[data-scheme="pink"]:not([data-theme="light"]) [data-theme="dark"] {
    --paper: #320707;
    --paper-2: #421614;
    --paper-3: #572C31;
    --ink: #FFEFF9;
    --ink-2: #FFE8F6;
    --ink-3: #FFE1F3;
    --ink-rule: #784E56;
    --brand: #FFEFF9;
    --brand-2: #FFEFF9;
    --brand-soft: #5C3133;
    --accent: #FFD7EF;
    --accent-text: #FFD7EF;
    --accent-soft: #5C3133;
    --highlight: #70454D;
    --success: #FFE1F3;
    --success-text: #FFE8F6;
    --warn: #FFE1F3;
    --warn-text: #FFE8F6;
    --error: #FFE1F3;
    --error-text: #FFE8F6;
    --signal: var(--accent);
    --signal-text: var(--accent-text);
    --signal-soft: var(--accent-soft);
    --link: var(--brand-2);
    --link-hover: var(--ink);
    --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
    --shadow-1: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.55);
    --shadow-2: 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.65);
    --shadow-3: 0 4px 0 rgba(0,0,0,.45), 0 28px 50px -18px rgba(0,0,0,.75);
  }
  html:root[data-scheme="pink"]:not([data-theme="light"]) { color-scheme: dark; }
}

/* ===== Blue and charcoal =====
   Light side: ink #21231D on #CFEAF7 (12.67:1, Lc 88); the ground is #A0DEFC muted.
   Dark side: text #D9F2FE on #21231D (13.67:1, Lc 94). */
html:root[data-scheme="blue"] {
  --paper: #CFEAF7;
  --paper-2: #E9F6FB;
  --paper-3: #BED6E1;
  --ink: #21231D;
  --ink-2: #30322C;
  --ink-3: #40433C;
  --ink-rule: #9EB2BA;
  --brand: #21231D;
  --brand-2: #21231D;
  --brand-soft: #C3DCE8;
  --accent: #21231D;
  --accent-text: #21231D;
  --accent-soft: #C3DCE8;
  --success: #21231D;
  --success-text: #21231D;
  --warn: #21231D;
  --warn-text: #21231D;
  --error: #21231D;
  --error-text: #21231D;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  --shadow-1: 0 1px 0 rgba(33,35,29,.05), 0 2px 6px -2px rgba(33,35,29,.14);
  --shadow-2: 0 2px 0 rgba(33,35,29,.05), 0 10px 24px -10px rgba(33,35,29,.24);
  --shadow-3: 0 4px 0 rgba(33,35,29,.05), 0 28px 50px -18px rgba(33,35,29,.32);
  color-scheme: light;
}
/* the two dark bands on a light page: the scheme's dark side, unlifted */
html:root[data-scheme="blue"] [data-theme="dark"] {
  --paper: #21231D;
  --paper-2: #21231D;
  --paper-3: #384545;
  --ink: #D9F2FE;
  --ink-2: #C8ECFD;
  --ink-3: #B8E6FD;
  --ink-rule: #4C6369;
  --brand: #D9F2FE;
  --brand-2: #D9F2FE;
  --brand-soft: #333D3C;
  --accent: #A0DEFC;
  --accent-text: #A0DEFC;
  --accent-soft: #333D3C;
  --highlight: #475B60;
  --success: #B8E6FD;
  --success-text: #C8ECFD;
  --warn: #B8E6FD;
  --warn-text: #C8ECFD;
  --error: #B8E6FD;
  --error-text: #C8ECFD;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  --shadow-1: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.55);
  --shadow-2: 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.65);
  --shadow-3: 0 4px 0 rgba(0,0,0,.45), 0 28px 50px -18px rgba(0,0,0,.75);
}
/* dark side, chosen with the toggle */
html:root[data-scheme="blue"][data-theme="dark"],
html:root[data-scheme="blue"][data-theme="dark"] [data-theme="dark"] {
  --paper: #21231D;
  --paper-2: #2F312A;
  --paper-3: #384545;
  --ink: #D9F2FE;
  --ink-2: #C8ECFD;
  --ink-3: #B8E6FD;
  --ink-rule: #4C6369;
  --brand: #D9F2FE;
  --brand-2: #D9F2FE;
  --brand-soft: #3F4947;
  --accent: #A0DEFC;
  --accent-text: #A0DEFC;
  --accent-soft: #3F4947;
  --highlight: #475B60;
  --success: #B8E6FD;
  --success-text: #C8ECFD;
  --warn: #B8E6FD;
  --warn-text: #C8ECFD;
  --error: #B8E6FD;
  --error-text: #C8ECFD;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  --shadow-1: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.55);
  --shadow-2: 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.65);
  --shadow-3: 0 4px 0 rgba(0,0,0,.45), 0 28px 50px -18px rgba(0,0,0,.75);
}
html:root[data-scheme="blue"][data-theme="dark"] { color-scheme: dark; }
/* dark side, from the system preference */
@media (prefers-color-scheme: dark) {
  html:root[data-scheme="blue"]:not([data-theme="light"]),
  html:root[data-scheme="blue"]:not([data-theme="light"]) [data-theme="dark"] {
    --paper: #21231D;
    --paper-2: #2F312A;
    --paper-3: #384545;
    --ink: #D9F2FE;
    --ink-2: #C8ECFD;
    --ink-3: #B8E6FD;
    --ink-rule: #4C6369;
    --brand: #D9F2FE;
    --brand-2: #D9F2FE;
    --brand-soft: #3F4947;
    --accent: #A0DEFC;
    --accent-text: #A0DEFC;
    --accent-soft: #3F4947;
    --highlight: #475B60;
    --success: #B8E6FD;
    --success-text: #C8ECFD;
    --warn: #B8E6FD;
    --warn-text: #C8ECFD;
    --error: #B8E6FD;
    --error-text: #C8ECFD;
    --signal: var(--accent);
    --signal-text: var(--accent-text);
    --signal-soft: var(--accent-soft);
    --link: var(--brand-2);
    --link-hover: var(--ink);
    --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
    --shadow-1: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.55);
    --shadow-2: 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.65);
    --shadow-3: 0 4px 0 rgba(0,0,0,.45), 0 28px 50px -18px rgba(0,0,0,.75);
  }
  html:root[data-scheme="blue"]:not([data-theme="light"]) { color-scheme: dark; }
}

/* ===== Orange and purple =====
   Light side: ink #260A2F on #F7E4D6 (14.59:1, Lc 90); the ground is #FFC091 muted.
   Dark side: text #FFE6D3 on #260A2F (15.01:1, Lc 93). */
html:root[data-scheme="orange"] {
  --paper: #F7E4D6;
  --paper-2: #FBF3ED;
  --paper-3: #E2CEC5;
  --ink: #260A2F;
  --ink-2: #3E2148;
  --ink-3: #573962;
  --ink-rule: #BCA7A7;
  --brand: #260A2F;
  --brand-2: #260A2F;
  --brand-soft: #E6D3C9;
  --accent: #260A2F;
  --accent-text: #260A2F;
  --accent-soft: #E6D3C9;
  --success: #260A2F;
  --success-text: #260A2F;
  --warn: #260A2F;
  --warn-text: #260A2F;
  --error: #260A2F;
  --error-text: #260A2F;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  --shadow-1: 0 1px 0 rgba(38,10,47,.05), 0 2px 6px -2px rgba(38,10,47,.14);
  --shadow-2: 0 2px 0 rgba(38,10,47,.05), 0 10px 24px -10px rgba(38,10,47,.24);
  --shadow-3: 0 4px 0 rgba(38,10,47,.05), 0 28px 50px -18px rgba(38,10,47,.32);
  color-scheme: light;
}
/* the two dark bands on a light page: the scheme's dark side, unlifted */
html:root[data-scheme="orange"] [data-theme="dark"] {
  --paper: #260A2F;
  --paper-2: #260A2F;
  --paper-3: #4D2B41;
  --ink: #FFE6D3;
  --ink-2: #FFDABF;
  --ink-3: #FFD0AD;
  --ink-rule: #704850;
  --brand: #FFE6D3;
  --brand-2: #FFE6D3;
  --brand-soft: #44233D;
  --accent: #FFC091;
  --accent-text: #FFD0AD;
  --accent-soft: #44233D;
  --highlight: #67414C;
  --success: #FFD0AD;
  --success-text: #FFDABF;
  --warn: #FFD0AD;
  --warn-text: #FFDABF;
  --error: #FFD0AD;
  --error-text: #FFDABF;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  --shadow-1: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.55);
  --shadow-2: 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.65);
  --shadow-3: 0 4px 0 rgba(0,0,0,.45), 0 28px 50px -18px rgba(0,0,0,.75);
}
/* dark side, chosen with the toggle */
html:root[data-scheme="orange"][data-theme="dark"],
html:root[data-scheme="orange"][data-theme="dark"] [data-theme="dark"] {
  --paper: #260A2F;
  --paper-2: #34183E;
  --paper-3: #4D2B41;
  --ink: #FFE6D3;
  --ink-2: #FFDABF;
  --ink-3: #FFD0AD;
  --ink-rule: #704850;
  --brand: #FFE6D3;
  --brand-2: #FFE6D3;
  --brand-soft: #50304A;
  --accent: #FFC091;
  --accent-text: #FFD0AD;
  --accent-soft: #50304A;
  --highlight: #67414C;
  --success: #FFD0AD;
  --success-text: #FFDABF;
  --warn: #FFD0AD;
  --warn-text: #FFDABF;
  --error: #FFD0AD;
  --error-text: #FFDABF;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  --shadow-1: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.55);
  --shadow-2: 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.65);
  --shadow-3: 0 4px 0 rgba(0,0,0,.45), 0 28px 50px -18px rgba(0,0,0,.75);
}
html:root[data-scheme="orange"][data-theme="dark"] { color-scheme: dark; }
/* dark side, from the system preference */
@media (prefers-color-scheme: dark) {
  html:root[data-scheme="orange"]:not([data-theme="light"]),
  html:root[data-scheme="orange"]:not([data-theme="light"]) [data-theme="dark"] {
    --paper: #260A2F;
    --paper-2: #34183E;
    --paper-3: #4D2B41;
    --ink: #FFE6D3;
    --ink-2: #FFDABF;
    --ink-3: #FFD0AD;
    --ink-rule: #704850;
    --brand: #FFE6D3;
    --brand-2: #FFE6D3;
    --brand-soft: #50304A;
    --accent: #FFC091;
    --accent-text: #FFD0AD;
    --accent-soft: #50304A;
    --highlight: #67414C;
    --success: #FFD0AD;
    --success-text: #FFDABF;
    --warn: #FFD0AD;
    --warn-text: #FFDABF;
    --error: #FFD0AD;
    --error-text: #FFDABF;
    --signal: var(--accent);
    --signal-text: var(--accent-text);
    --signal-soft: var(--accent-soft);
    --link: var(--brand-2);
    --link-hover: var(--ink);
    --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
    --shadow-1: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.55);
    --shadow-2: 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.65);
    --shadow-3: 0 4px 0 rgba(0,0,0,.45), 0 28px 50px -18px rgba(0,0,0,.75);
  }
  html:root[data-scheme="orange"]:not([data-theme="light"]) { color-scheme: dark; }
}

/* ===== Same hue, pink and plum =====
   Light side: ink #270E1F on #FBE2F1 (14.76:1, Lc 91); the ground is #FFD7EF muted.
   Dark side: text #FBE5F2 on #270E1F (15.05:1, Lc 94). */
html:root[data-scheme="hue"] {
  --paper: #FBE2F1;
  --paper-2: #FDF2F9;
  --paper-3: #E6CDDC;
  --ink: #270E1F;
  --ink-2: #412537;
  --ink-3: #5C3E51;
  --ink-rule: #C0A7B6;
  --brand: #270E1F;
  --brand-2: #270E1F;
  --brand-soft: #EAD1E0;
  --accent: #270E1F;
  --accent-text: #270E1F;
  --accent-soft: #EAD1E0;
  --success: #270E1F;
  --success-text: #270E1F;
  --warn: #270E1F;
  --warn-text: #270E1F;
  --error: #270E1F;
  --error-text: #270E1F;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  --shadow-1: 0 1px 0 rgba(39,14,31,.05), 0 2px 6px -2px rgba(39,14,31,.14);
  --shadow-2: 0 2px 0 rgba(39,14,31,.05), 0 10px 24px -10px rgba(39,14,31,.24);
  --shadow-3: 0 4px 0 rgba(39,14,31,.05), 0 28px 50px -18px rgba(39,14,31,.32);
  color-scheme: light;
}
/* the two dark bands on a light page: the scheme's dark side, unlifted */
html:root[data-scheme="hue"] [data-theme="dark"] {
  --paper: #270E1F;
  --paper-2: #270E1F;
  --paper-3: #4C2E42;
  --ink: #FBE5F2;
  --ink-2: #F9D9EC;
  --ink-3: #F7CEE7;
  --ink-rule: #6D4A60;
  --brand: #FBE5F2;
  --brand-2: #FBE5F2;
  --brand-soft: #44273A;
  --accent: #F4BEDF;
  --accent-text: #F7CEE7;
  --accent-soft: #44273A;
  --highlight: #654359;
  --success: #F7CEE7;
  --success-text: #F9D9EC;
  --warn: #F7CEE7;
  --warn-text: #F9D9EC;
  --error: #F7CEE7;
  --error-text: #F9D9EC;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  --shadow-1: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.55);
  --shadow-2: 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.65);
  --shadow-3: 0 4px 0 rgba(0,0,0,.45), 0 28px 50px -18px rgba(0,0,0,.75);
}
/* dark side, chosen with the toggle */
html:root[data-scheme="hue"][data-theme="dark"],
html:root[data-scheme="hue"][data-theme="dark"] [data-theme="dark"] {
  --paper: #270E1F;
  --paper-2: #361B2D;
  --paper-3: #4C2E42;
  --ink: #FBE5F2;
  --ink-2: #F9D9EC;
  --ink-3: #F7CEE7;
  --ink-rule: #6D4A60;
  --brand: #FBE5F2;
  --brand-2: #FBE5F2;
  --brand-soft: #513246;
  --accent: #F4BEDF;
  --accent-text: #F7CEE7;
  --accent-soft: #513246;
  --highlight: #654359;
  --success: #F7CEE7;
  --success-text: #F9D9EC;
  --warn: #F7CEE7;
  --warn-text: #F9D9EC;
  --error: #F7CEE7;
  --error-text: #F9D9EC;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  --shadow-1: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.55);
  --shadow-2: 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.65);
  --shadow-3: 0 4px 0 rgba(0,0,0,.45), 0 28px 50px -18px rgba(0,0,0,.75);
}
html:root[data-scheme="hue"][data-theme="dark"] { color-scheme: dark; }
/* dark side, from the system preference */
@media (prefers-color-scheme: dark) {
  html:root[data-scheme="hue"]:not([data-theme="light"]),
  html:root[data-scheme="hue"]:not([data-theme="light"]) [data-theme="dark"] {
    --paper: #270E1F;
    --paper-2: #361B2D;
    --paper-3: #4C2E42;
    --ink: #FBE5F2;
    --ink-2: #F9D9EC;
    --ink-3: #F7CEE7;
    --ink-rule: #6D4A60;
    --brand: #FBE5F2;
    --brand-2: #FBE5F2;
    --brand-soft: #513246;
    --accent: #F4BEDF;
    --accent-text: #F7CEE7;
    --accent-soft: #513246;
    --highlight: #654359;
    --success: #F7CEE7;
    --success-text: #F9D9EC;
    --warn: #F7CEE7;
    --warn-text: #F9D9EC;
    --error: #F7CEE7;
    --error-text: #F9D9EC;
    --signal: var(--accent);
    --signal-text: var(--accent-text);
    --signal-soft: var(--accent-soft);
    --link: var(--brand-2);
    --link-hover: var(--ink);
    --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
    --shadow-1: 0 1px 0 rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.55);
    --shadow-2: 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px rgba(0,0,0,.65);
    --shadow-3: 0 4px 0 rgba(0,0,0,.45), 0 28px 50px -18px rgba(0,0,0,.75);
  }
  html:root[data-scheme="hue"]:not([data-theme="light"]) { color-scheme: dark; }
}

/* ===== High contrast =====
   Light side: black on white, 21:1, Lc 106; black on the yellow highlight 15.4:1, Lc 86.
   Dark side: white on black, 21:1, Lc 108; yellow on black 15.4:1, Lc 86. */
html:root[data-scheme="hc"] {
  --paper: #FFFFFF;
  --paper-2: #FFFFFF;
  --paper-3: #000000;
  --ink: #000000;
  --ink-2: #000000;
  --ink-3: #000000;
  --ink-rule: #000000;
  --brand: #000000;
  --brand-2: #000000;
  --brand-soft: #FCDC3E;
  --accent: #000000;
  --accent-text: #000000;
  --accent-soft: #FCDC3E;
  --highlight: #FCDC3E;
  --success: #000000;
  --success-text: #000000;
  --warn: #000000;
  --warn-text: #000000;
  --error: #000000;
  --error-text: #000000;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: var(--ink);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  color-scheme: light;
}
html:root[data-scheme="hc"] [data-theme="dark"],
html:root[data-scheme="hc"][data-theme="dark"],
html:root[data-scheme="hc"][data-theme="dark"] [data-theme="dark"] {
  --paper: #000000;
  --paper-2: #000000;
  --paper-3: #FFFFFF;
  --ink: #FFFFFF;
  --ink-2: #FFFFFF;
  --ink-3: #FFFFFF;
  --ink-rule: #FFFFFF;
  --brand: #FCDC3E;
  --brand-2: #FCDC3E;
  --brand-soft: #2B2B2B;
  --accent: #FCDC3E;
  --accent-text: #FCDC3E;
  --accent-soft: #2B2B2B;
  --highlight: #4D4000;
  --success: #FFFFFF;
  --success-text: #FFFFFF;
  --warn: #FFFFFF;
  --warn-text: #FFFFFF;
  --error: #FFFFFF;
  --error-text: #FFFFFF;
  --signal: var(--accent);
  --signal-text: var(--accent-text);
  --signal-soft: var(--accent-soft);
  --link: var(--brand-2);
  --link-hover: #FFFFFF;
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
}
html:root[data-scheme="hc"][data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html:root[data-scheme="hc"]:not([data-theme="light"]),
  html:root[data-scheme="hc"]:not([data-theme="light"]) [data-theme="dark"] {
    --paper: #000000;
    --paper-2: #000000;
    --paper-3: #FFFFFF;
    --ink: #FFFFFF;
    --ink-2: #FFFFFF;
    --ink-3: #FFFFFF;
    --ink-rule: #FFFFFF;
    --brand: #FCDC3E;
    --brand-2: #FCDC3E;
    --brand-soft: #2B2B2B;
    --accent: #FCDC3E;
    --accent-text: #FCDC3E;
    --accent-soft: #2B2B2B;
    --highlight: #4D4000;
    --success: #FFFFFF;
    --success-text: #FFFFFF;
    --warn: #FFFFFF;
    --warn-text: #FFFFFF;
    --error: #FFFFFF;
    --error-text: #FFFFFF;
    --signal: var(--accent);
    --signal-text: var(--accent-text);
    --signal-soft: var(--accent-soft);
    --link: var(--brand-2);
    --link-hover: #FFFFFF;
    --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-color);
  }
  html:root[data-scheme="hc"]:not([data-theme="light"]) { color-scheme: dark; }
}
/* The current place in a table of contents, dark side: black on yellow
   (PeO, 2026-11-12: "Aktuell plats i TOC kunde vara svart text på gul
   bakgrund även i mörkt läge"), as on the light side. */
html:root[data-scheme="hc"][data-theme="dark"] .toc-item a.active,
html:root[data-scheme="hc"][data-theme="dark"] .home-toc ol a.active,
html:root[data-scheme="hc"][data-theme="dark"] .home-toc ol a.active .toc-n,
html:root[data-scheme="hc"][data-theme="dark"] .home-toc ol a.active .toc-label {
  color: #000000;
  background: #FCDC3E;
  border-color: #FCDC3E;
}
html:root[data-scheme="hc"][data-theme="dark"] .home-toc ol a.active .toc-n,
html:root[data-scheme="hc"][data-theme="dark"] .home-toc ol a.active .toc-label { background: transparent; border-color: transparent; }
@media (prefers-color-scheme: dark) {
  html:root[data-scheme="hc"]:not([data-theme="light"]) .toc-item a.active,
  html:root[data-scheme="hc"]:not([data-theme="light"]) .home-toc ol a.active,
  html:root[data-scheme="hc"]:not([data-theme="light"]) .home-toc ol a.active .toc-n,
  html:root[data-scheme="hc"]:not([data-theme="light"]) .home-toc ol a.active .toc-label {
    color: #000000;
    background: #FCDC3E;
    border-color: #FCDC3E;
  }
  html:root[data-scheme="hc"]:not([data-theme="light"]) .home-toc ol a.active .toc-n,
  html:root[data-scheme="hc"]:not([data-theme="light"]) .home-toc ol a.active .toc-label { background: transparent; border-color: transparent; }
}
/* The search box's close button fills with the hairline colour on hover,
   which here is the text colour; it takes the highlight tint instead. */
html:root[data-scheme="hc"] .search-dialog .close:hover { background: var(--accent-soft); }

/* The hero collage sits straight on the coloured ground on a scheme's light
   side (PeO, 2026-11-12: "Hero-bilden behöver inte ligga på vit platta i de
   ljusa lägena"); the image is transparent outside the organism. On the dark
   side it keeps its light plate, since the collage itself is dark. */
html:root[data-scheme] .hero-collage { background: transparent; }
html:root[data-scheme][data-theme="dark"] .hero-collage { background: #fcfbf9; }
@media (prefers-color-scheme: dark) {
  html:root[data-scheme]:not([data-theme="light"]) .hero-collage { background: #fcfbf9; }
}