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

  body {
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }

  a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);

    &:hover {
      color: var(--color-link-hover);
    }

    &.underline {
      text-decoration: underline;
      text-decoration-skip-ink: auto;

      &:hover {
        text-decoration: none;
      }
    }
  }

  :is(a, button, input, textarea, select) {
    &:focus-visible {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
      border-radius: var(--radius-sm);
    }
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--color-ink);
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }

  code, pre, kbd {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  kbd {
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: 0 0.4em;
    font-size: 0.8em;
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  /* A frame is a box like the panel it fills: custom elements are inline
     by default, which breaks the borders and spacing of a list inside. */
  turbo-frame {
    display: block;
  }
}