@layer base {
  html {
    font-size: 100%;

    /* Theme switching is a whole-document change, so it animates once here
       rather than being restated on every themed component. */
    transition: background-color var(--duration) ease-in-out,
      color var(--duration) ease-in-out;

    @media (min-width: 100ch) {
      font-size: 1.0625rem;
    }
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-normal);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
  }

  /* Every link gets the link color, visited or not, so a class that only
     sets size or spacing never falls back to the browser's blue and purple.
     Components and utilities (later layers) still set their own color. */
  a {
    color: var(--color-link);
    text-decoration: none;

    &:not([class]) {
      text-decoration: underline;
      text-decoration-skip-ink: auto;
    }
  }

  :is(a, button, input, select, textarea, .btn) {
    transition: 100ms ease-out;
    transition-property: background-color, border-color, box-shadow, color, opacity, outline;

    &:where(:focus-visible) {
      border-radius: var(--border-radius);
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    &:where([disabled], [aria-disabled="true"]) {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  ::selection {
    background-color: var(--color-selected);
  }
}