@layer base {
  body {
    font-family: var(--font-sans);
    background-color: var(--bg-light);
    color: var(--text-light);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  .container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
  }

  p > a {
    color: var(--primary);
  }

  p > a:hover {
    color: var(--primary-hover);
  }

  :not(p) > a {
    color: inherit;
    text-decoration: none;
  }

  button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
  }

  textarea {
    font-family: var(--font-sans);
  }

  input[type=submit] {
    border-width: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 700;
    line-height: 1.2;
  }
}