html {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

.theme-light-mode {
  --pui-theme: light;
  --pui-real-theme: light;
  color-scheme: light;
  --md-sys-color-primary: var(--md-ref-palette-primary40);
  --md-sys-color-on-primary: var(--md-ref-palette-primary100);
  --md-sys-color-primary-container: var(--md-ref-palette-primary90);
  --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
  --md-sys-color-success: var(--md-ref-palette-success40);
  --md-sys-color-on-success: var(--md-ref-palette-success100);
  --md-sys-color-success-container: var(--md-ref-palette-success90);
  --md-sys-color-on-success-container: var(--md-ref-palette-success10);
  --md-sys-color-error: var(--md-ref-palette-error40);
  --md-sys-color-on-error: var(--md-ref-palette-error100);
  --md-sys-color-error-container: var(--md-ref-palette-error90);
  --md-sys-color-on-error-container: var(--md-ref-palette-error10);
  --md-sys-color-normal: var(--md-ref-palette-normal40);
  --md-sys-color-on-normal: var(--md-ref-palette-normal100);
  --md-sys-color-normal-container: var(--md-ref-palette-normal90);
  --md-sys-color-on-normal-container: var(--md-ref-palette-normal10);
  --md-sys-color-surface: var(--md-ref-palette-normal98);
  --md-sys-color-on-surface: var(--md-ref-palette-normal10);
}

@media (prefers-color-scheme: light) {
  html {
    --pui-theme: auto;
    --pui-real-theme: light;
    --md-sys-color-primary: var(--md-ref-palette-primary40);
    --md-sys-color-on-primary: var(--md-ref-palette-primary100);
    --md-sys-color-primary-container: var(--md-ref-palette-primary90);
    --md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
    --md-sys-color-success: var(--md-ref-palette-success40);
    --md-sys-color-on-success: var(--md-ref-palette-success100);
    --md-sys-color-success-container: var(--md-ref-palette-success90);
    --md-sys-color-on-success-container: var(--md-ref-palette-success10);
    --md-sys-color-error: var(--md-ref-palette-error40);
    --md-sys-color-on-error: var(--md-ref-palette-error100);
    --md-sys-color-error-container: var(--md-ref-palette-error90);
    --md-sys-color-on-error-container: var(--md-ref-palette-error10);
    --md-sys-color-normal: var(--md-ref-palette-normal40);
    --md-sys-color-on-normal: var(--md-ref-palette-normal100);
    --md-sys-color-normal-container: var(--md-ref-palette-normal90);
    --md-sys-color-on-normal-container: var(--md-ref-palette-normal10);
    --md-sys-color-surface: var(--md-ref-palette-normal98);
    --md-sys-color-on-surface: var(--md-ref-palette-normal10);
  }
}

.theme-dark-mode {
  --pui-theme: dark;
  --pui-real-theme: dark;
  color-scheme: dark;
  --md-sys-color-primary: var(--md-ref-palette-primary80);
  --md-sys-color-on-primary: var(--md-ref-palette-primary20);
  --md-sys-color-primary-container: var(--md-ref-palette-primary30);
  --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
  --md-sys-color-success: var(--md-ref-palette-success80);
  --md-sys-color-on-success: var(--md-ref-palette-success20);
  --md-sys-color-success-container: var(--md-ref-palette-success30);
  --md-sys-color-on-success-container: var(--md-ref-palette-success90);
  --md-sys-color-error: var(--md-ref-palette-error80);
  --md-sys-color-on-error: var(--md-ref-palette-error20);
  --md-sys-color-error-container: var(--md-ref-palette-error30);
  --md-sys-color-on-error-container: var(--md-ref-palette-error90);
  --md-sys-color-normal: var(--md-ref-palette-normal80);
  --md-sys-color-on-normal: var(--md-ref-palette-normal20);
  --md-sys-color-normal-container: var(--md-ref-palette-normal30);
  --md-sys-color-on-normal-container: var(--md-ref-palette-normal90);
  --md-sys-color-surface: var(--md-ref-palette-normal6);
  --md-sys-color-on-surface: var(--md-ref-palette-normal90);
}

@media (prefers-color-scheme: dark) {
  html {
    --pui-theme: auto;
    --pui-real-theme: dark;
    --md-sys-color-primary: var(--md-ref-palette-primary80);
    --md-sys-color-on-primary: var(--md-ref-palette-primary20);
    --md-sys-color-primary-container: var(--md-ref-palette-primary30);
    --md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
    --md-sys-color-success: var(--md-ref-palette-success80);
    --md-sys-color-on-success: var(--md-ref-palette-success20);
    --md-sys-color-success-container: var(--md-ref-palette-success30);
    --md-sys-color-on-success-container: var(--md-ref-palette-success90);
    --md-sys-color-error: var(--md-ref-palette-error80);
    --md-sys-color-on-error: var(--md-ref-palette-error20);
    --md-sys-color-error-container: var(--md-ref-palette-error30);
    --md-sys-color-on-error-container: var(--md-ref-palette-error90);
    --md-sys-color-normal: var(--md-ref-palette-normal80);
    --md-sys-color-on-normal: var(--md-ref-palette-normal20);
    --md-sys-color-normal-container: var(--md-ref-palette-normal30);
    --md-sys-color-on-normal-container: var(--md-ref-palette-normal90);
    --md-sys-color-surface: var(--md-ref-palette-normal6);
    --md-sys-color-on-surface: var(--md-ref-palette-normal90);
  }
}