.form {
  display: grid;
  row-gap: 2ch;
}

.form-field {
  display: grid;
  row-gap: 1ch;
}

.form-field__label {
  font-weight: 700;
}

.text-field {
  font: inherit;
  box-sizing: border-box;
  width: 100%;
  padding: 0.25rem 0.375rem;
  color: light-dark(var(--color-gray-700), var(--color-zinc-100));
  background: light-dark(var(--color-white), var(--color-zinc-700));
  border: 1px solid light-dark(var(--color-gray-400), var(--color-zinc-500));

  &:placeholder {
    color: light-dark(var(--color-gray-400), var(--color-zinc-500));
  }

  &:focus {
    outline: none;
    border-color: light-dark(var(--color-blue-400), var(--color-blue-400));
    box-shadow: 0 0 0 3px
      light-dark(var(--color-blue-100), var(--color-blue-600));
  }
}