@layer base {
  body {
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-base);
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
  }

  a {
    color: inherit;
    text-decoration: none;
    &:not([class]) { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  }

  em { font-family: var(--font-display); font-style: italic; }

  :is(a, button, input, textarea, select) {
    transition: 150ms var(--ease-out);
    transition-property: color, background-color, border-color, opacity, transform;

    &:where(:focus-visible) {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }
  }

  ::selection { background: var(--color-ink); color: var(--color-canvas); }
}