:root {
  background-color: hsl(
    var(--daui-background-hue),
    var(--daui-background-saturation),
    var(--daui-background-lightness)
  );

  /* Use a native looking, zero load-time local font for text and emoji. */
  font-family: var(--daui-sans-serif), var(--daui-emoji);

  /* Normalize font rendering across devices and browsers. Most fonts are not
   * designed for subpixel anti-aliasing and look too thick. This also avoids
   * ugly flickering as browsers transition to the simpler font smoothing when
   * animating or transitioning elements.
   */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  /* Prevent some mobile browsers from inflating the text size. */
  text-size-adjust: none;

  /* Allow long words to break that would otherwise overflow their container.
   * Because page horizontal scroll is disabled via other rules, this ensures
   * such content can still be viewed.
   */
  overflow-wrap: break-word;

  /* Prevent certain touch browsers from adding a highlight effect to active
   * interactive elements.
   */
  -webkit-tap-highlight-color: transparent;

  /* Enable panning and pinch zoom gestures, but disable additional
   * non-standard gestures such as double-tap to zoom. Disabling double-tap to
   * zoom removes the need for browsers to delay the generation of click
   * events when the user taps the screen.
   */
  touch-action: manipulation;
}

:root,
body {
  /* Prevent CSS animations, transforms, etc. that overflow the viewport from
   * causing page horizontal scroll.
   */
  overflow-x: hidden;
}

body {
  /* Remove default page margins. Components should be able to occupy the full
   * viewport area.
   */
  margin: 0;

  /* Establish the narrowest supported viewport. This prevents a crushed
   * layout when the viewport is narrower (e.g. the inspector is open in a
   * narrow window).
   */
  min-width: 320px;

  /* Ensure short page bottom overflow (e.g. the low parts of “g” and “y”
   * characters) doesn’t appear cropped, due to the overflow-x: hidden rule
   * also causing overflow-y to crop.
   */
  min-height: 100vh;
}

::selection {
  background-color: hsla(
    var(--daui-highlight-hue),
    var(--daui-highlight-saturation),
    var(--daui-highlight-lightness),
    var(--daui-highlight-opacity)
  );
}

:root,
[data-daui-color-scheme] {
  color: hsl(
    var(--daui-foreground-hue),
    var(--daui-foreground-saturation),
    var(--daui-foreground-lightness)
  );
}

[data-daui-color-scheme="light"] {
  color-scheme: light;
}

[data-daui-color-scheme="dark"] {
  color-scheme: dark;
}