@import "./palette.css";
@import "./theme.css";

html {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  --pui-default-rounded: 4px;
}

@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-surface: var(--md-ref-palette-neutral98);
    --md-sys-color-on-surface: var(--md-ref-palette-neutral10);
    --md-sys-color-surface-variant: var(--md-ref-palette-neutral90);
    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral30);
    --md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
    --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
    --md-sys-color-neutral: var(--md-ref-palette-neutral40);
    --md-sys-color-on-neutral: var(--md-ref-palette-neutral100);
    --md-sys-color-neutral-container: var(--md-ref-palette-neutral90);
    --md-sys-color-on-neutral-container: var(--md-ref-palette-neutral10);
  }
}

@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-surface: var(--md-ref-palette-neutral6);
    --md-sys-color-on-surface: var(--md-ref-palette-neutral90);
    --md-sys-color-surface-variant: var(--md-ref-palette-neutral30);
    --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral80);
    --md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
    --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
    --md-sys-color-neutral: var(--md-ref-palette-neutral80);
    --md-sys-color-on-neutral: var(--md-ref-palette-neutral20);
    --md-sys-color-neutral-container: var(--md-ref-palette-neutral30);
    --md-sys-color-on-neutral-container: var(--md-ref-palette-neutral90);
  }
}