html[data-theme] {
  --color-character-tile-text-dark-fill: #ffffff;
  --color-character-tile-text-light-fill: #000000;
}
html[data-theme]:not([data-theme="dark"]) {
  --color-bg: #7cfee8;
  --color-border: #a35f00;
  --color-input: #a4fee8;
  --color-inverse: #86c2fe;
  --color-inverse-text: #05423b;
  --color-surface: #2eff74;
  --color-surface-hover: #fea916;
  --color-text: #012317;
  --color-text-muted: #000000;
  --color-yellow-dark: #051524;
  --color-yellow-mid: #a35f00;
  --color-yellow-soft: #d2ab74;
  --color-yellow-subtle: #00ffd5;
}
html[data-theme="dark"] {
  --color-bg: #13342e;
  --color-border: #c78933;
  --color-input: #1d1007;
  --color-inverse-text: #00ffd5;
  --color-surface: #0c1a27;
  --color-surface-hover: #411e0c;
  --color-text: #70ffc8;
  --color-yellow-dark: #d6deff;
  --color-yellow-mid: #ff9500;
  --color-yellow-soft: #c78933;
  --color-yellow-subtle: #005748;
}
html[data-theme]:not([data-theme="dark"]) .bg-bg {
  background-image: url('https://d2hplq259yjfnt.cloudfront.net/series/9d429d7f-41a7-4ed9-97e4-de2276ef1fc5/reader-patterns/light-f8f8822c-4288-4554-9e88-36edc623e8c8.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/9d429d7f-41a7-4ed9-97e4-de2276ef1fc5/reader-patterns/dark-2eb18ad8-3a2c-4935-9f5a-36406bb1e458.png');
  background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
  background-color: var(--color-bg);
  background-attachment: local;
}