Document-level Elements

These are elements unique to each document.

html

scss

html {
  @media screen and not (prefers-reduced-motion) {
    scroll-behavior: smooth;
  }
}

Document root. Also selectable as :root (which has a higher specificity).

scss

body {
  @include coloring.set-colors("body");
  @include coloring.use-colors;
}

Content root.

scss

main {
  padding-block: svar(spacing-block-lg);
}