/* Design tokens
   Library: an off-white page, thin serif headings, small tracked capitals; each book's cloth colour, softened, is its
   cover and the only colour. Reader themes: white / paper / gray / night. */
:root {
  color-scheme: light;
  --font-read: "Times New Roman", Tinos, Times, "Liberation Serif", serif;
  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-display: "Cormorant Garamond", "Times New Roman", Tinos, Times, serif;

  --wall: #f3f3f0;
  --bg: #f3f3f0;
  --surface: #fbfbf9;
  --surface-2: #ecece8;
  --ink: #1d1d1b;
  --ink-2: #5c5c57;
  --ink-3: #8a8a83;
  --rule: #e2e2dc;
  --accent: #1d1d1b;
  --accent-ink: #fbfbf8;
  /* a cover: the book's cloth mixed this far into the page, its symbol in this colour */
  --cover-mix: 45%;
  --cover-ink: #fbfbf8;
  /* spines: cream paper with ink lettering, or black (essential reading) with cream lettering */
  --spine-cream: #f4efe3; --spine-ink: #23221f; --spine-ink-2: #77746c; --spine-black: #26241f; --spine-cream-ink: #efe8d8;
  --focus: #2f6fb3;
  --shadow: 0 1px 2px rgb(28 34 32 / .06), 0 12px 32px -8px rgb(28 34 32 / .18);

  --ledge: #e4e2db;
  --ledge-edge: #f8f8f5;
  --ledge-shadow: rgb(40 48 44 / .22);
  --book-shadow: rgb(28 34 32 / .35);
  --scrim: rgb(243 243 240 / .88);
  --wall-ao: rgb(40 48 44 / .10);
  /* fine noise: cloth, paper and the ledge take it through a blend mode */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 -.12'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  /* reader page */
  --page: #ffffff;
  --page-ink: #1b1b1b;
  --page-ink-2: #6b6b6b;
  --surround: #ecece8;
}

:root[data-theme="paper"] {
  --wall: #ece5d6; --bg: #ece5d6; --surface: #f8f2e5; --surface-2: #efe7d6;
  --ink: #3a2f24; --ink-2: #6d5d4c; --ink-3: #978672; --rule: #dccfb8;
  --ledge: #f6f0e3; --ledge-edge: #d8ccb5; --scrim: rgb(236 229 214 / .84);
  --page: #f7f0e1; --page-ink: #3b3024; --page-ink-2: #85735f; --surround: #e9e0cd;
}

:root[data-theme="gray"] {
  color-scheme: dark;
  --wall: #3b3e41; --bg: #3b3e41; --surface: #4a4d51; --surface-2: #54585c;
  --ink: #ececea; --ink-2: #c3c5c3; --ink-3: #9a9d9c; --rule: #5d6165;
  --accent: #9cc0e0; --accent-ink: #15222d;
  --shadow: 0 1px 2px rgb(0 0 0 / .25), 0 12px 32px -8px rgb(0 0 0 / .5);
  --ledge: #4c5054; --ledge-edge: #2e3134; --ledge-shadow: rgb(0 0 0 / .45); --book-shadow: rgb(0 0 0 / .55); --wall-ao: rgb(0 0 0 / .22);
  --scrim: rgb(59 62 65 / .84);
  --cover-mix: 70%; --cover-ink: #f0eee9;
  --page: #4b4e52; --page-ink: #e9e9e6; --page-ink-2: #b0b2b1; --surround: #3b3e41;
}

:root[data-theme="night"] {
  color-scheme: dark;
  --wall: #1c1c1a; --bg: #1c1c1a; --surface: #252523; --surface-2: #2c2c29;
  --ink: #ecebe6; --ink-2: #b5b4ad; --ink-3: #8a8a83; --rule: #2e2e2b;
  --accent: #ecebe6; --accent-ink: #1c1c1a;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 14px 36px -8px rgb(0 0 0 / .7);
  --ledge: #2b2b28; --ledge-edge: #34342f; --ledge-shadow: rgb(0 0 0 / .6); --book-shadow: rgb(0 0 0 / .7); --wall-ao: rgb(0 0 0 / .35);
  --scrim: rgb(28 28 26 / .95);
  --cover-mix: 78%; --cover-ink: #e9e4d6;
  --page: #1f1f1d; --page-ink: #dedcd5; --page-ink-2: #8f8e88; --surround: #171716;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --wall: #1c1c1a; --bg: #1c1c1a; --surface: #252523; --surface-2: #2c2c29;
    --ink: #ecebe6; --ink-2: #b5b4ad; --ink-3: #8a8a83; --rule: #2e2e2b;
    --accent: #ecebe6; --accent-ink: #1c1c1a;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 14px 36px -8px rgb(0 0 0 / .7);
    --ledge: #2b2b28; --ledge-edge: #34342f; --ledge-shadow: rgb(0 0 0 / .6); --book-shadow: rgb(0 0 0 / .7); --wall-ao: rgb(0 0 0 / .35);
    --scrim: rgb(28 28 26 / .95);
    --cover-mix: 78%; --cover-ink: #e9e4d6;
    --page: #1f1f1d; --page-ink: #dedcd5; --page-ink-2: #8f8e88; --surround: #171716;
  }
}