/* Qifrey (mono): its accent is the light grey-white of a wizard's cloak (#cccec3). In dark mode it is the
   accent everywhere; in light mode it fills the main buttons (dark text, the cloak's shadow grey as the edge)
   and the dark ink stays the accent for text, links, focus rings and the selected tab, so they stay readable. */
/* Colour themes. Agott (id "parchment") is the default (theme.css). Each theme has a light and a dark set;
   light/dark follows the system unless the Light or Dark mode is chosen. */
:root[data-palette="slate"] { --bg: #eef1f4; --surface: #fbfcfd; --ink: #1f2730; --muted: #66717e; --line: #d9dee5; --line-strong: #b7c0cb; --accent: #2f5d8a; --accent-soft: #2f5d8a1a; --band: #e2e7ed; --band-2: #e8ecf1; --done: #3f7a63; }
@media (prefers-color-scheme: dark) { :root[data-palette="slate"]:not([data-theme="light"]) { --bg: #161a1f; --surface: #1e232a; --ink: #e3e8ee; --muted: #97a2af; --line: #2c333c; --line-strong: #475160; --accent: #86b0e0; --accent-soft: #86b0e022; --band: #1d2229; --band-2: #1a1f25; --done: #7fc0a3; } }
:root[data-palette="slate"][data-theme="dark"] { --bg: #161a1f; --surface: #1e232a; --ink: #e3e8ee; --muted: #97a2af; --line: #2c333c; --line-strong: #475160; --accent: #86b0e0; --accent-soft: #86b0e022; --band: #1d2229; --band-2: #1a1f25; --done: #7fc0a3; }
:root[data-palette="sage"] { --bg: #dae6d8; --surface: #f2f7f1; --ink: #1c2b22; --muted: #4f6352; --line: #bfcfbb; --line-strong: #8ea58c; --accent: #344c3d; --accent-soft: #344c3d17; --band: #cddbca; --band-2: #d3e0d1; --done: #738a6e; }
@media (prefers-color-scheme: dark) { :root[data-palette="sage"]:not([data-theme="light"]) { --bg: #223028; --surface: #2b3c32; --ink: #eef4ec; --muted: #b4c6b0; --line: #354a3d; --line-strong: #58725f; --accent: #dae6d8; --accent-soft: #dae6d81c; --band: #1b261f; --band-2: #1e2b23; --done: #8ea58c; --char-l: 72%; } }
:root[data-palette="sage"][data-theme="dark"] { --bg: #223028; --surface: #2b3c32; --ink: #eef4ec; --muted: #b4c6b0; --line: #354a3d; --line-strong: #58725f; --accent: #dae6d8; --accent-soft: #dae6d81c; --band: #1b261f; --band-2: #1e2b23; --done: #8ea58c; --char-l: 72%; }
:root[data-palette="rose"] { --bg: #f6eef0; --surface: #fffafb; --ink: #2d2226; --muted: #7d6970; --line: #eadbe0; --line-strong: #cfb6be; --accent: #9c3d5e; --accent-soft: #9c3d5e1a; --band: #eee1e5; --band-2: #f1e7ea; --done: #5e7d4e; }
@media (prefers-color-scheme: dark) { :root[data-palette="rose"]:not([data-theme="light"]) { --bg: #1c1618; --surface: #251d20; --ink: #efe3e7; --muted: #ab97a0; --line: #382c31; --line-strong: #574650; --accent: #e893b0; --accent-soft: #e893b022; --band: #241c1f; --band-2: #201a1c; --done: #9dbb89; } }
:root[data-palette="rose"][data-theme="dark"] { --bg: #1c1618; --surface: #251d20; --ink: #efe3e7; --muted: #ab97a0; --line: #382c31; --line-strong: #574650; --accent: #e893b0; --accent-soft: #e893b022; --band: #241c1f; --band-2: #201a1c; --done: #9dbb89; }
:root[data-palette="mono"] { --bg: #ebebe9; --surface: #f5f5f5; --ink: #1a1a1a; --muted: #60605c; --line: #d9d9d5; --line-strong: #b3b3ad; --accent: #1a1a1a; --accent-soft: #1a1a1a12; --band: #e1e1dd; --band-2: #e6e6e2; --done: #4a4a4a; --accent-fill: #cccec3; --accent-fill-edge: #7c8084; --on-accent: #1a1a1a; }
@media (prefers-color-scheme: dark) { :root[data-palette="mono"]:not([data-theme="light"]) { --bg: #141414; --surface: #1d1d1d; --ink: #ececec; --muted: #9a9a9a; --line: #2c2c2c; --line-strong: #4a4a4a; --accent: #cccec3; --accent-soft: #cccec318; --accent-fill: #cccec3; --accent-fill-edge: #cccec3; --on-accent: #141414; --band: #1c1c1c; --band-2: #181818; --done: #bdbdbd; } }
:root[data-palette="mono"][data-theme="dark"] { --bg: #141414; --surface: #1d1d1d; --ink: #ececec; --muted: #9a9a9a; --line: #2c2c2c; --line-strong: #4a4a4a; --accent: #cccec3; --accent-soft: #cccec318; --accent-fill: #cccec3; --accent-fill-edge: #cccec3; --on-accent: #141414; --band: #1c1c1c; --band-2: #181818; --done: #bdbdbd; }

:root[data-palette="seafoam"] { --bg: #e9f3f0; --surface: #f7fcfa; --ink: #15302b; --muted: #55706a; --line: #cfe2dd; --line-strong: #a6c4bc; --accent: #398588; --accent-soft: #3985881c; --band: #dbeae5; --band-2: #e2eeea; --done: #4f7a2c; }
@media (prefers-color-scheme: dark) { :root[data-palette="seafoam"]:not([data-theme="light"]) { --bg: #173640; --surface: #1f4450; --ink: #eef6f7; --muted: #a9c4c9; --line: #2b5260; --line-strong: #4a7482; --accent: #a3f0e0; --accent-soft: #a3f0e01f; --band: #112c35; --band-2: #14313b; --done: #cdee8c; --char-l: 74%; } }
:root[data-palette="seafoam"][data-theme="dark"] { --bg: #173640; --surface: #1f4450; --ink: #eef6f7; --muted: #a9c4c9; --line: #2b5260; --line-strong: #4a7482; --accent: #a3f0e0; --accent-soft: #a3f0e01f; --band: #112c35; --band-2: #14313b; --done: #cdee8c; --char-l: 74%; }

/* Fonts: the face picked under Aa is used for the whole panel. Two things keep Plotypus's own
   font (Newsreader) whatever is picked: the "Plotypus" name beside the logo, and the title of the
   story you're on, so they always look the same. Code-style editors stay monospaced. */
:root { --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif; --sans: var(--serif); --brand-font: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif; }
:root[data-font="mulish"] { --serif: "Mulish", "Segoe UI", system-ui, sans-serif; --sans: var(--serif); }
:root[data-font="rubik"] { --serif: "Rubik", "Segoe UI", system-ui, sans-serif; --sans: var(--serif); }
:root[data-font="garamond"] { --serif: "EB Garamond", Garamond, Georgia, serif; --sans: var(--serif); }
/* EB Garamond's small letters are short, so scale it to Newsreader's letter height:
   switching to it doesn't make everything look tiny. (Monospace bits are left alone.) */
:root[data-font="garamond"] body { font-size-adjust: 0.426; }
:root[data-font="garamond"] :is(code, .sy-field input) { font-size-adjust: none; }
:root[data-font="sourceserif"] { --serif: "Source Serif 4", Georgia, serif; --sans: var(--serif); }
:root[data-font="fira"] { --serif: "Fira Sans", "Segoe UI", system-ui, sans-serif; --sans: var(--serif); }

/* Text size: five steps, the middle one is the default. Every font-size multiplies by --fs. */
:root { --fs: 1; }
:root[data-size="1"] { --fs: 0.86; }
:root[data-size="2"] { --fs: 0.93; }
:root[data-size="4"] { --fs: 1.08; }
:root[data-size="5"] { --fs: 1.17; }

/* Major beats: a faint yellow highlight (like a highlighter pen) in every theme.
 Built at a fixed yellow hue, just lighter or darker than each background, so it reads
 as the same yellow everywhere; text on it stays at least 8.8:1 contrast. */
:root { --major-bg: #fceeba; --major-edge: #f4d369; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --major-bg: #42330c; --major-edge: #6d5418; } }
:root[data-theme="dark"] { --major-bg: #42330c; --major-edge: #6d5418; }
:root[data-palette="slate"] { --major-bg: #fbedb9; --major-edge: #f3d269; }
@media (prefers-color-scheme: dark) { :root[data-palette="slate"]:not([data-theme="light"]) { --major-bg: #352a0c; --major-edge: #5f4800; } }
:root[data-palette="slate"][data-theme="dark"] { --major-bg: #352a0c; --major-edge: #5f4800; }
:root[data-palette="sage"] { --major-bg: #ecdeab; --major-edge: #e5c359; }
@media (prefers-color-scheme: dark) { :root[data-palette="sage"]:not([data-theme="light"]) { --major-bg: #493e20; --major-edge: #765e20; } }
:root[data-palette="sage"][data-theme="dark"] { --major-bg: #493e20; --major-edge: #765e20; }
:root[data-palette="rose"] { --major-bg: #faedb9; --major-edge: #f3d268; }
@media (prefers-color-scheme: dark) { :root[data-palette="rose"]:not([data-theme="light"]) { --major-bg: #33280a; --major-edge: #5d4600; } }
:root[data-palette="rose"][data-theme="dark"] { --major-bg: #33280a; --major-edge: #5d4600; }
:root[data-palette="seafoam"] { --major-bg: #faedb9; --major-edge: #f3d268; }
@media (prefers-color-scheme: dark) { :root[data-palette="seafoam"]:not([data-theme="light"]) { --major-bg: #4f4426; --major-edge: #7c6426; } }
:root[data-palette="seafoam"][data-theme="dark"] { --major-bg: #4f4426; --major-edge: #7c6426; }
:root[data-palette="mono"] { --major-bg: #fef0bc; --major-edge: #f6d56b; }
@media (prefers-color-scheme: dark) { :root[data-palette="mono"]:not([data-theme="light"]) { --major-bg: #2f2405; --major-edge: #584200; } }
:root[data-palette="mono"][data-theme="dark"] { --major-bg: #2f2405; --major-edge: #584200; }