@layer base {
  body {
    background-color: var(--color-panel);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    min-height: 100vh;
  }

  body::before {
    background-image: linear-gradient(rgb(255 255 255 / 8%) 1px, transparent 1px), linear-gradient(90deg, rgb(0 0 0 / 8%) 1px, transparent 1px);
    background-size: 1rem 1rem;
    content: "";
    inset: 0;
    opacity: 0.25;
    pointer-events: none;
    position: fixed;
    z-index: -1;
  }

  body.is-public::before {
    display: none;
  }

  ::selection {
    background: var(--color-orange);
    color: var(--color-black);
  }

  a {
    color: inherit;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
  }

  a:hover {
    color: #000;
  }

  button,
  input,
  select,
  textarea {
    color: inherit;
  }

  h1,
  h2,
  h3 {
    font-weight: 600;
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-compact);
  }

  h1 {
    font-size: var(--font-size-2xl);
  }

  h2 {
    font-size: var(--font-size-xl);
  }

  h3 {
    font-size: var(--font-size-lg);
  }

  :focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 1px;
  }
}