html[data-theme] {
  --color-border: #c78933;
  --color-yellow-mid: #ff9500;
  --color-yellow-soft: #c78933;
}
html[data-theme]:not([data-theme="dark"]) {
  --color-bg: #71e5c8;
  --color-input: #ddc583;
  --color-inverse-text: #00ffe1;
  --color-surface: #8ec3fb;
  --color-surface-hover: #6de89d;
  --color-yellow-dark: #142039;
  --color-yellow-subtle: #66ffe6;
}
html[data-theme="dark"] {
  --color-bg: #13342e;
  --color-input: #1d1007;
  --color-inverse-text: #00ffd5;
  --color-surface: #0c1a27;
  --color-surface-hover: #411e0c;
  --color-text: #70ffc8;
  --color-yellow-dark: #d6deff;
  --color-yellow-subtle: #005748;
}
html[data-theme="dark"] .bg-bg {
  background-image: url('https://d2hplq259yjfnt.cloudfront.net/series/9d429d7f-41a7-4ed9-97e4-de2276ef1fc5/reader-patterns/dark-6c761675-4950-4db1-bd11-9b4fd6cd0725.png');
  background-repeat: repeat;
  background-size: auto;
  background-position: 0 0;
  background-color: var(--color-bg);
  background-attachment: local;
}