/* Series theme "mizube" (水辺): the viewer's colours, fonts and corner shapes as custom properties.
   app/style.css holds only layout and reads these names; a new series adds a file with the same names
   (tests/unit/series.test.mjs checks that every name style.css uses is defined here) and names it as the
   series' `theme` in scenes/index.js. The scene page puts data-theme on <html>; the LP puts it on the series'
   section, where --accent(-rgb), --accent-hover, --paper, --muted, --dim and the serif fonts restyle that
   section. The values are the viewer's look as it was before themes existed. */
[data-theme="mizube"] {
  /* Base colours as RGB triplets, so a translucent variant is written rgb(var(--accent-rgb) / .3). */
  --accent-rgb: 136 234 210;   /* mint: lines, highlights, selected states */
  --ink-rgb: 0 41 48;          /* the deep teal ground and the panels */
  --paper-rgb: 239 255 248;    /* text on the dark ground */
  --glass-rgb: 0 55 59;        /* face of the menu button */
  --shade-rgb: 0 28 35;        /* the screen vignette and text shadows */
  --shadow-rgb: 0 27 35;       /* drop shadows */

  --accent: rgb(var(--accent-rgb));
  --accent-hover: #b0f5e3;
  --ink: rgb(var(--ink-rgb));
  --paper: rgb(var(--paper-rgb));
  --title-ink: #fff;           /* the big title at the start */
  --muted: #b5d1ca;
  --dim: #92b3af;
  --label: #c2d9d3;            /* setting labels and buttons */
  --line: rgb(var(--accent-rgb) / .1765);
  --track: #456f72;            /* slider rail */
  --field: #14515a;            /* select boxes */
  --field-line: #75b2af;
  --scrollbar: #75b2af66;

  /* Trouble: a status line in error, the load-error caption and the error toast. */
  --warn: #efc3a0;
  --warn-soft: #f3c5ab;
  --toast-ink: #f3d5ba;
  --toast-line: #e8bc9455;
  --toast-bg: #10272df2;

  --font-sans: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
  --serif-ja: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", serif;
  --serif-en: Georgia, "Times New Roman", serif;

  /* Asymmetric curved corners: top-left, top-right, bottom-right, bottom-left. */
  --corner-panel: 28px 6px 24px 6px;   /* the settings menu */
  --corner-bar: 17px 5px 15px 5px;     /* the view bar */
  --corner-toast: 14px 4px;
}