html[data-theme] {
  --color-character-tile-text-dark-fill: #fbf9f0;
  --color-character-tile-text-light-fill: #111827;
}
html[data-theme]:not([data-theme="dark"]) {
  --color-bg: #f3f3f3;
  --color-border: #7b776b;
  --color-input: #ffffff;
  --color-inverse: #1d1f23;
  --color-inverse-text: #f9fafb;
  --color-surface: #ffffff;
  --color-surface-hover: #eeeeee;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-yellow-dark: #854d0e;
  --color-yellow-mid: #edbd0e;
  --color-yellow-soft: #fef08a;
  --color-yellow-subtle: #fef9c3;
}
html[data-theme="dark"] {
  --color-bg: #242729;
  --color-border: #7f7c75;
  --color-input: #1f2123;
  --color-inverse: #070707;
  --color-inverse-text: #fbfbf9;
  --color-surface: #1f2123;
  --color-surface-hover: #3b3e43;
  --color-text: #fbf9f0;
  --color-text-muted: #9ca3af;
  --color-yellow-dark: #fdf3b8;
  --color-yellow-mid: #eead17;
  --color-yellow-soft: #bf950d;
  --color-yellow-subtle: #9c7c15;
}