@layer ds_html {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-group(*) {
    animation-duration: 0.33s;
  }

  ::view-transition-old(root) {
    animation: 0.33s ease-in both leave;
  }

  ::view-transition-new(root) {
    animation: 0.33s ease-in both enter;
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*) {
      animation-duration: 0s;
    }
  }

  body {
    background-color: var(--ds-skin-background);
    font-family: var(--ds-semantic-base-font-family);
    font-size: var(--ds-semantic-base-font-size);
    container: body / inline-size;
  }

  strong {
    font-weight: var(--ds-semantic-base-font-weight-semi-bold);
  }

  hr {
    border-color: var(--ds-skin-border);
    border-style: solid;
    border-width: 1px;
  }

  :where([data-skin]) {
    background-color: var(--ds-skin-background);
    color: var(--ds-skin-text);
    border-color: var(--ds-skin-border);

    :where(h1, h2, h3, h4, h5, h6) {
      color: var(--ds-skin-accent);
    }

    :where(p, dd, dt, footer li, [role="list"] li, label) a {
      color: var(--ds-skin-link);

      &:hover,
      &:focus-visible {
        filter: var(--ds-semantic-fx-filter-hover-brighten);
        text-underline-offset: 3px;
        text-decoration-thickness: 2px;
      }

      &:has(svg) {
        display: inline-flex;
        align-items: center;
        gap: var(--ds-semantic-whitespace-icon-gap);
      }
    }
  }
}