html[data-theme] {
  --color-border: #ff0000;
  --color-inverse: #0c0f5a;
  --color-yellow-mid: #cc0000;
}
html[data-theme]:not([data-theme="dark"]) {
  --color-bg: #d6d5e7;
  --color-input: #aaa8ff;
  --color-surface: #aaa8ff;
  --color-surface-hover: #800000;
  --color-text: #111827;
  --color-text-muted: #6e6bff;
  --color-yellow-soft: #d60000;
  --color-yellow-subtle: #a30000;
}
html[data-theme="dark"] {
  --color-bg: #2e00ad;
  --color-input: #07006b;
  --color-text: #fbf9f0;
}
html[data-theme]:not([data-theme="dark"]) .bg-bg {
  background-image: url('https://s3.amazonaws.com/fauxble.beta/series/9d79a89a-d611-49b1-9aac-521bb60bf753/reader-patterns/light-69d95721-2178-4b0d-8c74-8e36c4b1e970.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://s3.amazonaws.com/fauxble.beta/series/9d79a89a-d611-49b1-9aac-521bb60bf753/reader-patterns/dark-d6acc619-4049-4acf-9bbc-1decc08036d6.png');
  background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
  background-color: var(--color-bg);
  background-attachment: local;
}