[color-palette^=dark] {
  color-scheme: only dark;
}
[color-palette^=light] {
  color-scheme: only light;
}
[color-palette=lightest] {
  --rh-color-surface: var(--rh-color-surface-lightest,#fff);
}
[color-palette=lighter] {
  --rh-color-surface: var(--rh-color-surface-lighter,#f2f2f2);
}
[color-palette=light] {
  --rh-color-surface: var(--rh-color-surface-light,#e0e0e0);
}
[color-palette=dark] {
  --rh-color-surface: var(--rh-color-surface-dark,#383838);
}
[color-palette=darker] {
  --rh-color-surface: var(--rh-color-surface-darker,#1f1f1f);
}
[color-palette=darkest] {
  --rh-color-surface: var(--rh-color-surface-darkest,#151515);
}
[color-palette]:where(div, section) {
  background-color: var(--rh-color-surface);
  color: light-dark(
    var(--rh-color-text-primary-on-light, #151515),
    var(--rh-color-text-primary-on-dark, #ffffff)
  );
}