@import url(tokens.css);
@import url(colors.module.css);
@import url(typography.module.css);
@import url(theme.light.css) (prefers-color-scheme: light);
@import url(theme.dark.css) (prefers-color-scheme: dark);

html,
body {
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif;
  width: 100vw;
  height: 100vh;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);

  /* These variables apply to the overlay for the entry details date picker. */
  --lumo-primary-text-color: var(--md-sys-color-primary);
  --lumo-primary-color: var(--md-sys-color-primary);
  --lumo-base-color: var(--md-sys-color-surface);
  --lumo-body-text-color: var(--md-sys-color-on-surface);
  --lumo-secondary-text-color: var(--md-sys-color-on-surface-variant);
  --lumo-primary-color-10pct: var(--background-hover);
  --lumo-primary-color-50pct: var(--md-sys-color-primary);
  --lumo-shade-5pct: var(--md-sys-color-secondary-container);
  --lumo-header-text-color: var(--md-sys-color-on-secondary-container);
}

#router-outlet {
  min-height: 0;
}