html[data-theme] {
  --color-border: #ff0000;
  --color-inverse: #0c0f5a;
  --color-inverse-text: #fbf9f0;
  --color-surface-hover: #800000;
  --color-text: #ffffff;
  --color-text-muted: #fbf9f0;
  --color-yellow-dark: #fbf9f0;
  --color-yellow-mid: #cc0000;
  --color-yellow-soft: #d60000;
  --color-yellow-subtle: #a30000;
}
html[data-theme]:not([data-theme="dark"]) {
  --color-bg: #d6d5e7;
  --color-input: #aaa8ff;
  --color-surface: #aaa8ff;
}
html[data-theme="dark"] {
  --color-bg: #0b0029;
  --color-input: #07006b;
  --color-surface: #231050;
}
html[data-theme]:not([data-theme="dark"]) .bg-bg {
  background-image: url('https://d2hplq259yjfnt.cloudfront.net/series/9d79a89a-d611-49b1-9aac-521bb60bf753/reader-patterns/light-575d90f1-f9ec-4661-a849-2162f61d2fec.png');
  background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
  background-color: var(--color-bg);
  background-attachment: local;
}
html[data-theme="dark"] .bg-bg {
  background-image: url('https://d2hplq259yjfnt.cloudfront.net/series/9d79a89a-d611-49b1-9aac-521bb60bf753/reader-patterns/dark-c5c423b3-f359-4e9f-9b1c-c63e399cbbfe.png');
  background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
  background-color: var(--color-bg);
  background-attachment: local;
}