html[data-theme]:not([data-theme="dark"]) {
  --color-bg: #9effd2;
  --color-inverse-text: #f9fafb;
  --color-surface: #ffd48a;
  --color-surface-hover: #46ff2e;
  --color-text: #111827;
  --color-yellow-dark: #854d0e;
  --color-yellow-mid: #fff6d6;
  --color-yellow-soft: #fef08a;
  --color-yellow-subtle: #fef9c3;
}
html[data-theme="dark"] {
  --color-bg: #48d594;
  --color-inverse-text: #fbfbf9;
  --color-surface: #eaa939;
  --color-surface-hover: #30b21f;
  --color-text: #fbf9f0;
  --color-yellow-dark: #fdf3b8;
  --color-yellow-mid: #cbc4aa;
  --color-yellow-soft: #bf950d;
  --color-yellow-subtle: #9c7c15;
}